Zum Inhalt springen

CSS-Anpassung

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.

<figcaption class=CSS-Anpassung"width =" 832 "height =" 451 "/>CSS-Anpassung

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

Easy Jellyfin benutzerdefiniertes CSS von Geleeflossen

https://emby.media/community/index.php?/topic/18046-custom-css-with-emby-web-app/

de_DEDeutsch