Hallo zusammen,
das originale CSS vom Medialist-Widget ist ja dafür gemacht, die Liste relativ schmal und hoch anzuzeigen. Ich möchte sie aber breit und flach haben. Dabei sollen Künstler und Song nebeneinander stehen, statt untereinander. Coverbilder habe komplett ausgeblendet.
Die Datei 'css/ftui_medialist.css' ist aber so hart eingebunden, dass man eigentlich kaum eine Chance hat, seine eigenen Styles hineinzubringen und diese dann auch ein Update überstehen.
Ich habe mir jetzt erstmal damit beholfen, dass ich die entsprechende Zeile im js-File auskommentiert habe, und beim Aufruf des Widgets entweder die Klasse "media-list-hoch" (=original), oder "media-list-quer" hinzufüge. Das hartcodierte Einbinden der Klasse "media-list" läuft ins Leere, da das CSS-File ja nun nicht mehr eingebunden wird.
Kennt jemand eine Möglichkeit, über einen etwas eleganteren Weg ein eigenes CSS-File für Medialist zu verwenden?
Oder könnte setstate vielleicht irgendwie mit berücksichtigen?
Die CSS-Eigenschaften einfach in der user.css überschreiben geht nicht?
Leider nicht (immer). Es gewinnt ja der, der als letztes das !important einfügt. Und da das vordefinierte Stylesheet zuletzt geladen wird (im Widget -> head.append ...) steht es auch ganz hinten und gewinnt somit immer.
Oder fällt Dir etwas besseres ein? Vielleicht ohne dann noch überall ein !important einbauen zu müssen?
Aja, das ist natürlich blöd.
So richtig schlaue Idee habe ich jetzt nicht. Könntest am Ende des <body> ein Javascript einbinden, dass dir die Klassen überschreibt.
Naja, weiß nicht. Da vertraue ich mal vorsichtig auf setstate, dass er sich da etwas überlegt ;)
Ich würde das so wie beim Stylesheet des Departure machen. Einen sprechenden Skin-Namen ausdenken und die Differenzen im CSS mit dem entsprechenden class Zusatz definieren. Wenn es etwas schönes und für jedermann von Interesse ist, poste es hier und ich werde es mit anfügen.
Ja, Skin-Name klingt super. Man kann ja noch einen Fallback auf das Standard-CSS einbauen, falls nichts angegeben wird.
Im Anhang ein Screenshot mit meinem bisherigen Stand des Players und nachfolgend ein noch etwas umoptimiertes CSS. Ich hab das Original einfach in media-list-hoch umbenannt, und meins in media-list-quer.
/* Medialist QUER*/
.media-list-quer.header{
width: 95%;
max-width: 95%;
margin: auto;
}
.media-list-quer .media-header{
position: relative;
display: block !important;
border-bottom: 1px solid #454545;
margin-right: 2%;
margin-left: 2%;
cursor: pointer;
height: 40px;
}
.media-list-quer .header-text{
width: 95%;
position: relative;
left: 20px;
height: 30px;
top: 13px;
}
.media-list-quer{
position: relative;
border-radius: 10px;
overflow: auto;
margin: 3px;
cursor: default !important;
margin-top: 0px !important;
}
.media-list-quer .media{
position: relative;
display: block !important;
border-bottom: 1px solid #454545;
margin-right: 2%;
margin-left: 2%;
cursor: pointer;
height: 40px;
}
.media-list-quer .media:hover{
background-color: #333;
}
.media-list-quer .media-image{
width: 0px;
height: 0px;
position: relative;
display: inline-block;
text-align: left;
visibility: hidden;
}
.media-list-quer .media-text{
width: 95%;
position: relative;
left: 20px;
height: 30px;
top: -37px;
}
.media-list-quer .cover {
width: 46px;
height: 46px;
}
.media-list-quer .title {
float: left;
width: 450px;
text-align: left;
}
.media-list-quer .artist {
float: left;
width: 400px;
text-align: left;
}
.media-list-quer .duration {
text-align: right;
float: right;
}
.media-list-quer .media.current .media-text *{
color: #aa6900;
}
/* Medialist HOCH (normal) */
.media-list-hoch{
position: relative;
border-radius: 10px;
overflow: auto;
margin: 3px;
cursor: default !important;
}
.media-list-hoch .media{
position: relative;
display: block !important;
border-bottom: 1px solid #454545;
margin-right: 2%;
margin-left: 2%;
cursor: pointer;
}
.media-list-hoch .media:hover{
background-color: #333;
}
.media-list-hoch .media-image{
width: 15%;
position: relative;
display: inline-block;
text-align: left;
}
.media-list-hoch .media-text{
width: 85%;
position: relative;
display: inline-block;
}
.media-list-hoch .cover {
width: 46px;
height: 46px;
}
.media-list-hoch .title {
font-weight: bold;
font-size: larger;
position: relative;
left: 0px;
top: 10px;
text-align: left;
}
.media-list-hoch .artist {
font-weight: normal;
position: relative;
left: 0px;
top: 10px;
text-align: left;
}
.media-list-hoch .duration {
position: relative;
right: 20px;
top: -10px;
text-align: right;
}
.media-list-hoch .media.current .media-text *{
color: #aa6900;
}
@Standarduser
was ich geil finde, deine "spartanische" Footer- und Headerleiste evtl. stellst du das mal zur Verfügung...! ich habe daran schon herum gedoktert, aber mir gelingt das gar nicht...
Arbeitest du mit "gridster" oder "flex"?
Ob ich die Medialist auch für Logitech Media Server nutzen könnte...? Hat das jemand schon einmal probiert.?
Spartanisch ist gut - ist doch alles noch im Aufbau ;D
Bei mir läuft auch ein LMS - also ja ;)
Zitat von: Standarduser am 03 April 2017, 20:04:23
Spartanisch ist gut - ist doch alles noch im Aufbau ;D
Bei mir läuft auch ein LMS - also ja ;)
Ja OK, aber der Grundaufbau mit dem footer ist schon mal gut ;) das kannst du mal rein stellen und die HTML Schnipsel für die Medialist auch sehr gern.
Ich werde das mal alles zusammen packen, wenn ich etwas weiter bin. Im jetzigen Stand funktioniert die Hälfte ja noch garnicht.
Das Layout hatte ich hier übrigens schonmal irgendwo gepostet. Darin enthalten auch noch ein Slideout Menü.
Zitat von: Standarduser am 04 April 2017, 22:08:10
Das Layout hatte ich hier übrigens schonmal irgendwo gepostet. Darin enthalten auch noch ein Slideout Menü.
hab ich gefunden und das schaue ich mir sehr gern einmal an...
Zitat von: setstate am 03 April 2017, 16:02:50
Ich würde das so wie beim Stylesheet des Departure machen. Einen sprechenden Skin-Namen ausdenken und die Differenzen im CSS mit dem entsprechenden class Zusatz definieren. Wenn es etwas schönes und für jedermann von Interesse ist, poste es hier und ich werde es mit anfügen.
Hallo setstate,
hattest Du schon Zeit, Dich mit dem Thema "alternative Skins/Styles" für Medialist zu beschäftigen?
Hi setstate,
ich wollte nochmal höflich nachfragen, ob Du das mit dem Skin in das Medialist-Widget einbauen könntest.
Oder soll ich noch irgendwas zuarbeiten? Fehlt irgendwas?
In der CSS Ergänzung brauchen nur die Abweichungen vom Standard drin sein.
In dieser Form
.<SCHEMA_NAME>.media-list .cover {
width: 26px;
height: 26px;
}
Wenn das Cover auch 46px sein soll, kann man .<SCHEMA_NAME>.media-list .cover weglassen.
Achso, ich hatte mir das eigentlich etwas anders vorgestellt.
Ich war davon ausgegangen, dass über ein neues Attribut die Möglichkeit geschaffen wird, ein anderes Stylesheet anzuhängen, bzw. das originale zu ersetzen.
Für mich war an der Stelle das Ziel, die Styles vollkommen frei verändern zu können. So könnte sich ja jeder das Ganze so zurecht schieben, wie er das braucht und wäre trotzdem Update-sicher.
Dass die Styles jetzt, wenn auch in aufgeräumter Form, einfach mit in den Standard wandern, schafft ja immer noch eine gewisse Unflexibilität.
Meinst Du, es gäbe auch einen Weg in diese Richtung und sind angepasste Styles der einzige?
Verstehe ich jetzt nicht, was wird daran unflexibel?
Einer nimmt den Standard.
<div data-type="medialist" data-device="MPD1" data-get="playlistinfo" data-pos="Pos" data-set="play" data-set-value="file"></div>
Ein anderer sagt, ich will die kleine Variante, die mal XY designed hat und jetzt im CSS mit dabei ist.
<div data-type="medialist" data-device="MPD1" data-get="playlistinfo" data-pos="Pos" data-set="play" data-set-value="file" class="mini_schema"></div>
In der Medialist-CSS steht diese Ergänzung
.mini_schema.media-list .cover {
width: 26px;
height: 26px;
}
Wenn es nicht in den Standard einfließen soll, dann eben nicht. Dann muss man sein Extra CSS im HTML Header mit einbinden.
Aber immer mit diesem Selector:
.mini_schema.media-list .cover
mit
.media-list-mini .cover
erreicht man nicht, dass diese Definition gewinnt und am Ende benutzt wird (siehe CSS Hierarchie Definition)
Hi setstate,
danke, dass Du mich in die richtige Richtung geschubst hast. Hab es hinbekommen.
HTML
<li>
<!-- Playlist-Kopfbereich -->
<div id="mp-playlist-header">
<div id="mp-playlist-cover">
<div data-type="image" data-device="SqueezeboxKU" data-get="coverarturl" data-size="150px" data-opacity="1" class="middle nocache"></div>
</div>
<div id="mp-playlist-details">
<div class="middle left">
<div>Playlist</div>
<div data-type="label" data-device="SqueezeboxKU" data-get="favorites" class="tall"></div>
<div>
<div data-type="label" data-device="SqueezeboxKU" data-get="playlistTracks" data-post-text=" Songs" data-color="#6f6f6f" class="inline"></div>
<div data-type="symbol" data-icon="fa-circle" data-color="#6f6f6f" class="compress mini inline"></div>
<div data-type="label" data-device="SqueezeboxKU" data-get="durationAll" data-pre-text="Spieldauer " data-color="#6f6f6f" class="inline"></div>
</div>
</div>
</div>
</div>
<!-- Playlist -->
<div id="mp-playlist-content">
<!-- Titelzeile für Medialist -->
<div class="media-list quer header">
<div class="media-header">
<div class="header-text">
<div class="title">SONG</div>
<div class="artist">KÜNSTLER</div>
<div data-type="symbol" data-icon="fa-clock-o" class="compress small duration" data-color="#c4c4c4" style="margin-right: 4px; position: relative;"></div>
</div>
</div>
</div>
<!-- Medialist -->
<div data-type="medialist"
data-device="SqueezeboxKU"
data-set="track"
data-get="ftuiMedialist"
data-pos="playlistCurrentTrack"
data-height="85%"
data-width="95%"
class="autoscroll index1 centered quer">
</div>
</div>
</li>
CSS
/* Medialist QUER*/
.quer.media-list.header{
width: 95%;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
.quer.media-list .media-header{
position: relative;
display: block !important;
margin-right: 2%;
margin-left: 2%;
height: 24px;
border-bottom: 1px solid #454545;
}
.quer.media-list .header-text{
width: 95%;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
.quer.media-list .media{
height: 40px;
}
.quer.media-list .media-image{
width: 0px;
height: 0px;
visibility: hidden;
}
.quer.media-list .media-text{
width: 95%;
top: 12px;
}
.quer.media-list .cover {
width: 0px;
height: 0px;
}
.quer.media-list .title {
font-weight: normal;
font-size: 13px;
float: left;
width: 450px;
top: 0px;
}
.quer.media-list .artist {
float: left;
width: 400px;
top: 0px;
}
.quer.media-list .duration {
float: right;
top: 0px;
right: 0px;
}
Leider ist das in dieser Variante nicht sehr flexibel, was die Bildschirmbreite angeht, aber für mich funktioniert es für den Moment.