In "Dashboard> Allgemein" können Sie im Feld "Benutzerdefiniertes CSS" eine beliebige Überschreibung eingeben, die dann auf das Jellyfin-CSS-Stylesheet angewendet wird.
Benutzerdefiniertes CSS bietet Anpassungen der Benutzeroberfläche, z. B. Ändern von Farben, Layout, Elementgröße und Verhalten. Unten finden Sie eine Liste verschiedener Änderungen, die angewendet werden können. CSS-Änderungen funktionieren sowohl im Webclient als auch in der Android-Anwendung. Der Code wird in der Reihenfolge angewendet, in der er geschrieben wurde, damit der Code das zuvor festgelegte benutzerdefinierte CSS überschreiben kann. Wichtig ist, dass alles überschrieben wird. Weitere Informationen finden Sie unter CSS-Spezifität. Um diese Änderungen zu implementieren, gehen Sie zu Dashboard> Allgemein> Benutzerdefiniertes CSS. Eine zusätzliche Quelle für Spezifität ist die Spezifität.

Wenn Sie wenig oder keine CSS-Erfahrung haben, finden Sie verschiedene Online-Ressourcen und Tutorials. Wenn Sie die folgenden Änderungen als Beispiele verwenden, können Sie ganz einfach eigene Änderungen an Ihrer Jellyfin-Instanz vornehmen.
CSS-Übersicht
Sie können mehr über CSS auf Websites wie w3school erfahren. Im Folgenden finden Sie einige sehr grundlegende Details, mit denen Sie die bereits vorgenommenen Änderungen ansatzweise bearbeiten können.
Farben
CSS unterstützt mehrere Farbformate, von denen die meisten normalerweise hexadezimal sind. Aber der Text funktioniert einfach auch. Um "gelb" zu erhalten, können Sie einfach "gelb" schreiben. Dabei wird eine voreingestellte gelbe Farbe verwendet. Um eine bestimmte Farbe zu erhalten, müssen genaue Farbdaten wie die folgenden Hexadezimalcodes verwendet werden.
Einige Beispiele für Hex-Farbcodes:
#5dd000 Grün
#0000d0 Blau
#d00000 Rot
#00000058 Transparent schwarz
Hier finden Sie eine Hex-Farbkarte, um einen Code für jede Farbe zu erhalten.
Ein Code- oder Textabschnitt zwischen / * und * / zeigt einen Kommentar an und wird ignoriert. Auf diese Weise können Sie Beschreibungen der Funktionen eines bestimmten Codeabschnitts hinzufügen, damit dieser leicht identifiziert werden kann. Es kann auch verwendet werden, um den Code zu deaktivieren, ohne ihn zu löschen. Zum Beispiel
/ * Dies könnte über dem Code hinzugefügt werden, um Ihnen zu sagen, was es tut * /
CSS-Verkettung
CSS kann verkettet werden, um verschiedene Abschnitte miteinander zu ändern. Ein Beispiel hierfür ist der Mod "Border Color". Es listet die zu ändernden Elemente auf und nimmt eine Änderung vor, die für alle gilt.
Liste der Änderungen
Um diese anzuwenden, kopieren Sie den CSS-Code und fügen Sie ihn in das Feld "Benutzerdefiniertes CSS" ein. Um mehrere Änderungen zu verwenden, fügen Sie sie einfach nacheinander in das Feld ein. Jeder angewendete Code bleibt im Feld. Um eine Änderung zu löschen, löschen oder kommentieren Sie den entsprechenden Code im Feld. Änderungen werden sofort wirksam, wenn die Konfigurationsseite gespeichert wird und nicht neu gestartet werden muss.
Indikator reproduziert
Dies wirkt sich auf die Wiedergabe- / Beobachtungsanzeige aus. Ersetzen Sie das farbige Sechseck durch den gewünschten Wert.
Ohne mod
Grün
.playedIndicator {i}: #5dd000; }}
Dunkel transparent mit hexadezimalem RGBA
/ * Machen Sie das beobachtete Symbol dunkel und transparent * /. PlayIndicator {Hintergrund: #00000058;}
Transparentes Hauptmenü
Selbsterklärend
/ * Transparenz des Hauptmenüs * /. SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-verschwommen {Hintergrund: keine; Hintergrundfarbe: rgba (0, 0, 0, 0);}. skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {Hintergrund: keine; Hintergrundfarbe: rgba (0, 0, 0, 0);}
Erweitern Sie die Registerkarten
Erweitern Sie Registerkarten, Hinweise, Genres usw. Standardmäßig sind sie sehr klein, insbesondere auf Mobiltelefonen.
/ * Passen Sie sowohl "Größenanpassung" als auch "Größe" an, um die Größe zu ändern * /. HeaderTabs.sectionTabs {Textgrößenanpassung: 110%; Schriftgröße: 110%;}. pageTitle {Rand oben: auto; Rand-unten: auto;}. emby-tab-button {padding: 1.75em 1.7em;}
Die Schaltflächen auf der erweiterten Registerkarte und im transparenten Menü sehen folgendermaßen aus:
Minimalistische Anmeldeseite
Dies sieht zusammen mit dem transparenten oberen Menü noch besser aus.
/ * Reduziere das Anmeldeformular * / #loginPage .readOnlyContent, #loginPage form {max-width: 22em;} / * Verstecke den Text "Bitte anmelden", der Rand soll verhindern, dass sich das Anmeldeformular zu weit nach oben bewegt * / #loginPage h1 {Anzeige: keine} #loginPage .padded-left. padded-right page.padded-bottom {Beispiel: 50px} / * Blenden Sie die Schaltflächen "Handbuch" und "Vergessen" aus .btnButtonPassword.emby vergessen.btn {Beispiel: keine}
Stilisierte Episodenvorschauen
Die Größe der Vorschau von Episoden in der Staffelansicht basiert auf der horizontalen Auflösung. Dadurch wird viel Platz in der Episodenzusammenfassung verschwendet, und die hohe vertikale Seite erfordert viel Scrollen zum Navigieren. Dieser Code reduziert die Höhe der Episodeneinträge, um die Notwendigkeit eines vertikalen Bildlaufs auf großen Bildschirmen zu verringern.
/ * Episodengröße Vorschau von Bildern kompakter * /. ListItemImage.listItemImage-large.itemAction.lazy {Höhe: 110px;}. ListItem-Inhalt {Höhe: 115px;}. Secondary.listItem-Übersicht.listItemBodyText {Höhe: 61px; Rand: 0;}
Informationen über die kleinste und stilvollste Besetzung
Dies wird den Stil der Broadcast-Informationen dramatisch in etwas ändern, das dem des Plex sehr ähnlich ist. Das Purple Haze-Thema enthält bereits abgerundete Besetzungsinformationen. Bei der gleichen Größe wie alles andere führt diese Überschreibung zu etwas kleineren Miniaturansichten und funktioniert auch mit allen anderen Themen.
/ * Verkleinere und projiziere die quadratischen (oder runden) Miniaturansichten * / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {width: 4.2cm! Important; Schriftgröße: 90%! wichtig;} #castContent .card.overflowPortraitCard. personaTarjeta.comocon Datennutzung {Breite: 4,2 cm! wichtig; Schriftgröße: 90%! Wichtig;} / * Korrigieren Sie das Verhalten des Bildseitenverhältnisses und setzen Sie den Kantenradius für quadratische Kacheln auf Null * / #castContent .cardContent-button.cardImageContainer.coveredImage. cardContento.cardContent-shadow.itemAction.lazy {Hintergrundgröße: Cover; ! wichtig; Kantenradius: 2,5 cm;} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground.DefaultCardBackground1.cardContent. cardSombra.itemAcción {Hintergrundgröße: Cover; ! wichtig; Kantenradius: 2,5 cm;} #castContento .cardBonton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content. itemAction {Fondsgröße: Deckung; ! wichtig; Kantenradius: 2,5 cm;} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {Hintergrundgröße: Abdeckung; ! wichtig Kantenradius: 2,5 cm;} #castContent.contentButton.of.content Container.Image Covered Standard imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {Hintergrundgröße: Abdeckung; ! wichtig; Kantenradius: 2,5 cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {Hintergrundgröße: Cover; ! wichtig; Kantenradius: 2,5 cm;} #castContento. cardScalable {Breite: 3,8 cm! wichtig; hoch: 3,8 cm! wichtig; Radiuskante: 2,5 cm;} #castContent .cardOverlayContainer.itemAction {Radiuskante: 2,5 cm;} / * Mauszeiger zentrieren * / #castContent .cardOverlayButton-br {unten: 4%; rechts: 15%; width: 70%;} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin: auto;}
Hintergrundfarbe
.backgroundContenedor, .dialog, html {Hintergrundfarbe: #0fd0d0; }}
Verdunkeln Sie den Hintergrund
Dies verdunkelt den Hintergrund von blauem Glitzer und violettem Dunst. Bearbeiten Sie den Prozentsatz je nachdem, wie dunkel Sie ihn möchten. Niedriger ist dunkler.
/ * Dunkler Hintergrund, funktioniert nur mit blauem Glühen * /. BackgroundContainer {Hintergrundfarbe: #000000; Filter: Helligkeit (50%);}
Rechter Header
Dadurch werden die Farben der Darstellungs-, Such- und Benutzerschaltflächen oben rechts geändert.
.headerRight {Farbe: gelb; }}
Konsolenbedienfeld
Ändern Sie die Farbe des Menüfelds links.
.mainDrawer-scrollContainer {Farbe: gelb; }}
Allgemeine Seite
Bedienfeld Allgemeine Form {Farbe: gelb; }}
Randfarbe
Dadurch wird die Rahmenfarbe der Textfelder und Dropdown-Menüs geändert.
.emby-input, .emby-textarea, .emby-select {Rahmenfarbe: #d00000; }}
Dies wirkt sich auf die Rahmenfarbe der ausgewählten Textfelder und Dropdown-Menüs aus.
.emby-input: focus, .emby-textarea: focus, .emby-select-withcolor {Rahmenfarbe: #ffffff! wichtig; }}
Vollständiger Header Mod
.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption-selected, .cardBox, .paperList {background: #ff9475; }}
Hotdogs und Catsup
Ein Beispiel für ein Farbthema.
.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption-selected, .cardBox, .paperList {Hintergrund: #ff9475;}. emby-input, .emby-textarea, .emby- Wählen Sie {border-color: #fdbe7d;}. backgroundContainer.withBackdrop, .backdropContainer, .backgroundContainer {background: #fdbe7d;} #myPreferencesMenuPage .listItemBodyText, .emby-tab-button [data-index = "0"] div> div> div> a: n-tes Kind (ungerade) ,. button-submit ,. mainAnimatedPage *: n-tes Kind (ungerade) ,. dashboardGeneralForm *: n-tes Kind (ungerade) ,. mainDrawer-scrollContainer *: n-tes Kind (ungerade) ,. headerRight *: n-tes Kind (ungerade) {Farbe: rot;} #miPreferencesMenuPage. listItemIcon, .emby-tab-button [data-index = "1"], #myPageMenuPreferences; div; div; div; div; a: n-tes Kind (gerade) ,. mainAnimatedPage *: n-tes Kind (gerade) ,. dashboardGeneralForm *: n-tes Kind (gerade) ,. mainDrawer-scrollContainer *: n-tes Kind (gerade) ,. headerRight *: n-tes Kind (gerade) .cancel {color: gelb;}
Floating Now Playing Controls
/ * feste Höhe für untere Zeile * /: root {--fixed-element-up: 95px;} / * Tippen Sie jetzt auf die Leiste in der Fußzeile * /. nowPlayingBar {width: 650px; Z-Index: 10; Position: fest; up: 300px; Höhe: 120px; Kantenstil: solide; Randfarbe: weiß; Hintergrundfarbe: schwarz; linker Rand: 50%;} / * einziges Kind von nowPlayingBar * /. nowPlayingBarTop {Höhe: 5px! wichtig; maximale Breite: 500px oben: 10px;} / * Suchleiste für den Song-Fortschritt * /. nowBar in usePositionContainer {Position: relativ; Oben: 1.0em! Important;} / * Container mit dem Album-Miniaturbild, dem Interpreten und dem Albumnamen * /. NowPlayingBarInfoContainer {position: fixed! Important; links: 12px; oben: 34px; Höhe: 60px; width: 1100px;} / * Behält die Elemente next, vorheriger Titel, Wiedergabe / Pause, next und time * /. nowPlayingBarCenter {Position: relativ! wichtig; links: 32px; oben: var (- festes Element oben); min-width: 500px;} / * Schweigen, Container mit Lautstärkeregler, Wiederholungstasten, Favoriten und Fernbedienung * /. nowPlayingBarRight {Breite: 402px! wichtig; links: -60px;} / * Stummschalttaste * /. muteButton {Position: relativ; up: var (- item-up);} / * Lautstärkeregler * /. nowPlayingBarVolumeSliderContainer {position: relative; links: -4px; top: var (- top-element);} / * Wiederholungstaste umschalten * /. toggleRepeatButton {Position: relativ! wichtig; links: -20px; top: var (- top-element);} / * Favorit * /. nowPlayingBarUserDataButtons {position: relative; links: -4px; top: var (- top-element);} / * Fernbedienung * /. remoteControlButton {left: -110px; top: var (- top-element);}
Community-Links
Einige Links zu Orten, an denen benutzerdefiniertes CSS besprochen und freigegeben wurde.
Benutzerdefiniertes CSS - aktualisiert für 10.5.0 von Geleeflossen
https://emby.media/community/index.php?/topic/18046-custom-css-with-emby-web-app/
Inhalt
- CSS-Übersicht
- Farben
- CSS-Verkettung
- Liste der Änderungen
- Indikator reproduziert
- Transparentes Hauptmenü
- Erweitern Sie die Registerkarten
- Minimalistische Anmeldeseite
- Stilisierte Episodenvorschauen
- Informationen über die kleinste und stilvollste Besetzung
- Hintergrundfarbe
- Verdunkeln Sie den Hintergrund
- Rechter Header
- Konsolenbedienfeld
- Allgemeine Seite
- Randfarbe
- Vollständiger Header Mod
- Hotdogs und Catsup
- Floating Now Playing Controls
- Community-Links