Medialist: eigenes CSS-File nutzen?

[Standarduser]

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?

[setstate]

Verstehe ich jetzt nicht, was wird daran unflexibel?

Einer nimmt den Standard.

Code Auswählen Erweitern


<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.

Code Auswählen Erweitern


<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:

Code Auswählen Erweitern

.mini_schema.media-list .cover

mit

Code Auswählen Erweitern

.media-list-mini .cover

erreicht man nicht, dass diese Definition gewinnt und am Ende benutzt wird (siehe CSS Hierarchie Definition)

[Standarduser]

Hi setstate,

danke, dass Du mich in die richtige Richtung geschubst hast. Hab es hinbekommen.

HTML

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


/* 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.