Medialist: eigenes CSS-File nutzen?

Standarduser · 02 April 2017, 15:47:02

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?

drhirn · 03 April 2017, 11:44:43

Die CSS-Eigenschaften einfach in der user.css überschreiben geht nicht?

Standarduser · 03 April 2017, 12:20:30

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?

drhirn · 03 April 2017, 12:35:07

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.

Standarduser · 03 April 2017, 13:04:46

Naja, weiß nicht. Da vertraue ich mal vorsichtig auf setstate, dass er sich da etwas überlegt

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

Standarduser · 03 April 2017, 17:09:30

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.

Code Auswählen


/* 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;
	}

moonsorrox · 03 April 2017, 19:32:26

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

Standarduser · 03 April 2017, 20:04:23

Spartanisch ist gut - ist doch alles noch im Aufbau

Bei mir läuft auch ein LMS - also ja

moonsorrox · 03 April 2017, 22:00:12

Zitat von: Standarduser am 03 April 2017, 20:04:23
Spartanisch ist gut - ist doch alles noch im Aufbau

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.

Standarduser · 04 April 2017, 22:08:10

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

moonsorrox · 05 April 2017, 12:02:07

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

Standarduser · 12 Juni 2017, 19:18:51

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?

Standarduser · 23 Juni 2017, 17:05:50

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?

setstate · 24 Juni 2017, 10:35:36

In der CSS Ergänzung brauchen nur die Abweichungen vom Standard drin sein.
In dieser Form

Code Auswählen


.<SCHEMA_NAME>.media-list .cover {
	width: 26px;
	height: 26px;
	}

Wenn das Cover auch 46px sein soll, kann man .<SCHEMA_NAME>.media-list .cover weglassen.