Doorgaan naar hoofdinhoud
Onofficiële Beta-vertaling

Deze pagina is vertaald door PageTurner AI (beta). Niet officieel goedgekeurd door het project. Een fout gevonden? Probleem melden →

CSS-aanpassingen

In Dashboard > General kan het veld "Aangepaste CSS" worden gebruikt om bestaande CSS in Jellyfin's stylesheet te overschrijven.

Aangepaste CSS biedt mogelijkheden zoals kleuren wijzigen, lay-outs aanpassen, en itemgrootte en gedrag veranderen. Hieronder vind je een lijst met verschillende aanpassingen die toegepast kunnen worden. Deze CSS-aanpassingen werken zowel in de webclient als in de Android-app. De code wordt toegepast in de volgorde waarin deze is geschreven, maar !important overschrijft alles. Lees meer over !important op CSS Specificity of specifishity. Ga naar Dashboard > General > Custom CSS om te beginnen.

Als je weinig of geen ervaring hebt met CSS, vind je online diverse bronnen en tutorials. Met de onderstaande aanpassingen en voorbeelden kun je gemakkelijk zelf wijzigingen aanbrengen in je Jellyfin-installatie.

Schermafbeelding van de instelling 'Aangepaste CSS' in het beheerdersdashboard van de webclient

Algemene informatie over CSS​

Meer over CSS leren kan via sites als w3schools en MDN. Hieronder vind je basiskennis waarmee je de voorbeeldaanpassingen kunt bewerken.

Kleuren​

CSS ondersteunt meerdere kleurformaten, maar meestal worden hexadecimale kleurcodes gebruikt voor specifieke kleuren. Voor een exacte kleur moet je precieze kleurdata zoals de onderstaande hex-codes gebruiken.

Voorbeelden van hexadecimale kleurcodes:

  • Groen: #5dd000

  • Blauw: #0000d0

  • Rood: #d00000

  • Transparant zwart: #00000058

Gebruik de HTML Color Picker om de hex-code voor elke gewenste kleur te vinden.

Voor standaardkleuren zonder specifieke tint kun je direct de kleurnaam intypen. Voor de kleur "geel" typ je bijvoorbeeld gewoon "yellow", waarna een vooraf ingestelde gele kleur wordt gebruikt.

yellow Geel
red Rood
aquamarine Aquamarijn
lightseagreen Licht zeegroen

Een lijst met ondersteunde kleurnamen vind je in de W3Schools Color Names-referentie.

Opmerkingen​

Code of tekst tussen /* en */ is een opmerking en wordt genegeerd. Hiermee kun je beschrijvingen toevoegen voor specifieke codeonderdelen. Ook kun je hiermee code tijdelijk uitschakelen zonder deze te verwijderen.

/* This might be added above code to tell you what it does */

CSS-ketens​

CSS kan worden "geketend" om verschillende secties tegelijkertijd aan te passen. Een voorbeeld hiervan is de "Randkleur"-aanpassing. Hierbij worden de te wijzigen elementen opgesomd en wordt een wijziging toegepast op alle elementen.

Voorbeeld "Randkleur"-aanpassing:

.emby-input,
.emby-textarea,
.emby-select {
  border-color: #d00000;
}

Lijst met aanpassingen​

Om een van deze aanpassingen toe te passen, kopieer en plak de CSS-code uit het voorbeeld in het veld "Aangepaste CSS". Voor meerdere aanpassingen voegt u ze eenvoudig achter elkaar toe in het veld. Toegepaste code blijft in het veld staan. Verwijder of zet de betreffende code in commentaar om een aanpassing ongedaan te maken. Wijzigingen worden direct toegepast bij het opslaan van de instellingenpagina, zonder dat uw Jellyfin-server opnieuw opgestart hoeft te worden.

Afspeelindicator​

Dit beïnvloedt de afspeel/bekeken indicator. Vervang de hex-kleur door elke gewenste waarde.

Indicators zonder aanpassing​

Screenshot van standaard bekekenindicatoren

Groene indicators​

/* Make watched icon green */
.playedIndicator {
  background: #5dd000;
}

Screenshot van bekekenindicatoren met aangepaste groene kleur

Transparante en donkere indicators​

/* Make watched icon dark and transparent */
.playedIndicator {
  background: #00000058 !important;
}

Screenshot van bekekenindicatoren met aangepaste transparante kleur

Transparante tellerindicatoren (bijv. Series)​

/* Make count indicator icon dark and transparent */
.countIndicator {
  background: #00000058;
}

De mobiele app schakelt standaard de weergave van externe links naar IMDb, TheMovieDB, Trakt, enz. uit. Om de externe links weer in te schakelen, voeg je het volgende codefragment toe:

.layout-mobile .itemExternalLinks {
  display: block !important;
}

Homepictogram verbergen in koptekst​

.headerHomeButton {
  display: none;
}

.headerButton.headerButtonRight.headerUserButton.paper-icon-button-light {
  display: none;
}

Castpictogram verbergen in koptekst​

.headerCastButton {
  display: none;
}

Synchronisatiepictogram verbergen in koptekst​

.headerSyncButton {
  display: none;
}

Gebruikersinstellingen verbergen in koptekst​

.material-icons.person {
  display: none;
}

Live TV-kanaallijsten verbergen​

.guideChannelNumber {
  display: none;
}

Breedte Live TV-kanalen verkleinen​

.channelsContainer {
  max-width: 8em;
}

Cast & Crew verbergen​

#castCollapsible {
  display: none;
}

Meer zoals dit verbergen​

#similarCollapsible {
  display: none;
}

Volgende verbergen​

div.nextUpSection {
  display: none;
}

Sterbeoordelingen verbergen​

div.starRatingContainer {
  display: none;
}

Vervang "Nieuwste films" door aangepaste tekst zoals "Recent toegevoegde films"​

#homeTab
  > div
  > div.section2
  > div:nth-child(1)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a
  > h2 {
  display: none;
}
#homeTab
  > div
  > div.section2
  > div:nth-child(1)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a
  > span {
  display: none;
}
#homeTab
  > div
  > div.section2
  > div:nth-child(1)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a:after {
  content: 'Recently Added Movies ›';
  font-size: 24px;
  font-weight: normal;
}

Vervang "Nieuwste tv-series" door aangepaste tekst zoals "Recent toegevoegde tv-series"​

#homeTab
  > div
  > div.section2
  > div:nth-child(2)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a
  > h2 {
  display: none;
}
#homeTab
  > div
  > div.section2
  > div:nth-child(2)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a
  > span {
  display: none;
}
#homeTab
  > div
  > div.section2
  > div:nth-child(2)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a:after {
  content: 'Recently Added TV Shows ›';
  font-size: 24px;
  font-weight: normal;
}

Achtergrondafbeelding op inlogpagina​

#loginPage {
  background: url('https://i.ytimg.com/vi/avCWDDox1nE/maxresdefault.jpg');
  background-size: cover;
}

Achtergrondafbeelding op startpagina​

.backdropImage {
  display: none;
}

.backgroundContainer {
  background-color: rgba(0, 0, 0, 0);
  background-image: url('https://i.ytimg.com/vi/avCWDDox1nE/maxresdefault.jpg');
  filter: blur(10px);
  background-size: cover;
}

Aanvullende MDN-documentatie

Transparant bovenmenu​

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
  background: none;
  background-color: rgba(0, 0, 0, 0);
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
  background: none;
  background-color: rgba(0, 0, 0, 0);
}

Afbeeldingen met ronde hoeken​

.cardContent-button,
.itemDetailImage {
  border-radius: 0.25em;
}

Tabbladen vergroten​

Vergroot de tabbladen (suggesties, genres, etc.). Standaard zijn ze erg klein, vooral op mobiel.

/* Adjust both "size-adjust" and "size" to modify size */
.headerTabs.sectionTabs {
  text-size-adjust: 110%;
  font-size: 110%;
}
.pageTitle {
  margin-top: auto;
  margin-bottom: auto;
}
.emby-tab-button {
  padding: 1.75em 1.7em;
}

De vergrote tabknoppen en transparante menu zien er zo uit:

Screenshot van vergrote tabknoppen en transparant menu

Minimalistische inlogpagina​

Dit ziet er nog beter uit in combinatie met het transparante bovenmenu!

/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
  max-width: 22em;
}

/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
  display: none;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
  margin-top: 50px;
}

/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
  display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  display: none;
}

Screenshot van de minimalistische inlogpagina

Gestileerde Afleveringsoverzichten​

De voorvertoningen van afleveringen in seizoensweergave worden geschaald op basis van horizontale resolutie. Dit leidt tot veel verspilde ruimte bij de afleveringssamenvatting en een lange verticale pagina die veel scrollen vereist. Deze code verkleint de hoogte van afleveringvermeldingen, waardoor beide problemen worden opgelost.

/* Size episode preview images in a more compact way */
.listItemImage.listItemImage-large.itemAction.lazy {
  height: 110px;
}
.listItem-content {
  height: 115px;
}
.secondary.listItem-overview.listItemBodyText {
  height: 61px;
  margin: 0;
}

Screenshot van een TV-programmapagina met gestileerde afleveringvoorbeelden

Gestileerde en kleinere Cast & Crew-info​

Dit verandert de stijl van cast-informatie drastisch naar iets dat sterk lijkt op de aanpak van Plex. Deze overschrijving resulteert in iets kleinere miniaturen en werkt ook met alle thema's.

/* Shrink and square (or round) cast thumbnails */
#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata {width: 4.2cm !important; font-size: 90% !important;}
#castContent .card.overflowPortraitCard.personCard.card-withuserdata {width: 4.2cm !important; font-size: 90% !important;}

/* Correct image aspect ratio behavior, set border-radius to zero for square tiles */
#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy {background-size: cover; !important; border-radius: 2.5cm;}
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
#castContent .cardScalable {width: 3.8cm !important; height: 3.8cm !important; border-radius: 2.5cm;}
#castContent .cardOverlayContainer.itemAction {border-radius: 2.5cm;}

/* Center the mouseover buttons */
#castContent .cardOverlayButton-br {bottom: 4%; right: 15%; width: 70%;}
#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin:auto;}

Screenshot van gestileerde en kleinere Cast & Crew info

Cast & Crew zonder afbeeldingen​

#castContent .card.overflowPortraitCard {
  width: 4.2cm;
  font-size: 90%;
}

#castContent .personCard {
  width: auto;
}

#castContent .personCard .cardBox {
  margin-bottom: 0px;
  margin-right: 0px;
}

#castContent {
  flex-wrap: wrap;
  max-height: 9.75em;
}

div.personCard > :first-child > :first-child {
  display: none;
}

.itemDetailPage .cardText {
  text-align: left;
}

.itemDetailPage .textActionButton {
  text-align: left;
}

Schermafbeelding van cast & crew-informatie zonder afbeeldingen

Aangepaste achtergrondkleur​

.backgroundContainer,
.dialog,
html {
  background-color: #0fd0d0;
}

Achtergrond donkerder maken​

Dit maakt de achtergrond donkerder bij Blue Radiance en Purple Haze. Pas het percentage aan afhankelijk van hoe donker je hem wilt hebben. Lager is donkerder.

/* Darken background, only works with blue radiance */
.backgroundContainer {
  background-color: #000000;
  filter: brightness(50%);
}

Kleur rechter koptekst​

Dit wijzigt de kleuren van de cast-, zoek- en gebruikersknoppen rechtsboven.

.headerRight {
  color: yellow;
}

Schermafbeelding van een aangepaste gele kleur voor de pictogramknoppen rechtsboven

Aangepaste kleur consolepaneel​

Wijzigt de kleur van het linkermenupaneel.

.mainDrawer-scrollContainer {
  color: yellow;
}

Schermafbeelding van een aangepaste gele kleur op het linkermenupaneel

Aangepaste kleur algemene pagina​

.dashboardGeneralForm {
  color: yellow;
}

Schermafbeelding van een aangepaste gele kleur op de algemene pagina

Aangepaste randkleur​

Dit verandert de randkleur voor tekstvelden en dropdownmenu's.

.emby-input,
.emby-textarea,
.emby-select {
  border-color: #d00000;
}

Dit beïnvloedt de randkleur van gemarkeerde (geselecteerde) tekstvelden en dropdownmenu's.

.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor {
  border-color: #ffffff !important;
}

Schermafbeelding van een aangepaste rode randkleur

Volledige koptekst-aanpassing​

.skinHeader,
.mainDrawer,
.emby-input,
.emby-textarea,
.emby-select,
.navMenuOption-selected,
.cardBox,
.paperList {
  background: #ff9475;
}

Schermafbeelding van de volledige koptekst-aanpassing

Afbeeldingcarrousel uitschakelen voor bibliotheken​

Dit zorgt ervoor dat bibliotheken en media netjes op de startpagina passen zonder dat horizontaal scrollen nodig is.

@media all and (min-width: 50em) {
  .homePage .emby-scroller {
    margin-right: 0;
  }
  .homePage .emby-scrollbuttons {
    display: none;
  }
  .homePage .itemsContainer {
    flex-wrap: wrap;
  }
}

Schuifknoppen verplaatsen​

.emby-scrollbuttons {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  justify-content: space-between;
  pointer-events: none;
}

.emby-scrollbuttons-button {
  pointer-events: initial;
}

"Hotdogs and Catsup" kleurenthema-voorbeeld​

Een voorbeeld van een kleurenthema.

Schermafbeelding van het "Hotdogs and Catsup" kleurenthema

.skinHeader,
.mainDrawer,
.emby-input,
.emby-textarea,
.emby-select,
.navMenuOption-selected,
.cardBox,
.paperList {
  background: #ff9475;
}

.emby-input,
.emby-textarea,
.emby-select {
  border-color: #fdbe7d;
}

.backgroundContainer.withBackdrop,
.backdropContainer,
.backgroundContainer {
  background: #fdbe7d;
}

#myPreferencesMenuPage .listItemBodyText,
.emby-tab-button[data-index='0'],
#myPreferencesMenuPage > div > div > div > a:nth-child(odd),
.button-submit,
.mainAnimatedPage *:nth-child(odd),
.dashboardGeneralForm *:nth-child(odd),
.mainDrawer-scrollContainer *:nth-child(odd),
.headerRight *:nth-child(odd) {
  color: red;
}

#myPreferencesMenuPage .listItemIcon,
.emby-tab-button[data-index='1'],
#myPreferencesMenuPage > div > div > div > a:nth-child(even),
.mainAnimatedPage *:nth-child(even),
.dashboardGeneralForm *:nth-child(even),
.mainDrawer-scrollContainer *:nth-child(even),
.headerRight *:nth-child(even) .cancel {
  color: yellow;
}

Zwevende "Nu afspelen"-bediening​

Schermafbeelding van de zwevende "Nu afspelen"-bediening

/* fixed height for the bottom row */
:root {
  --element-fixed-top: 95px;
}

/* Now playing bar in the footer */
.nowPlayingBar {
       width: 650px;
       z-index: 10;
       position: fixed;
       top: 300px;
       height: 120px;
      border-style: solid;
      border-color: white;
      background-color: black;
      margin-left: 50%;
}

/* Only child of nowPlayingBar */
.nowPlayingBarTop {
     height: 5px !important;
     max-width: 500px
     top: 10px;
}

/* Song progress seekbar */
.nowPlayingBarPositionContainer {
     position: relative;
     top: 1.0em !important;
}

/* Container that holds album thumbnail, artist and album name */
.nowPlayingBarInfoContainer {
     position: fixed !important;
     left: 12px;
     top: 34px;
     height: 60px;
     width: 1100px;
}

/* Holds the next, previous track, play/pause, next and time elements */
.nowPlayingBarCenter {
     position: relative !important;
     left: 32px;
     top: var(--element-fixed-top);
     min-width: 500px;
}

/* Hold mute, volume slider container, repeat, favorite and remote control buttons */
.nowPlayingBarRight {
     width: 402px !important;
     left: -60px;
}

/* Mute button */
.muteButton {
    position: relative;
    top: var(--element-fixed-top);
}

/* Volume slider */
.nowPlayingBarVolumeSliderContainer {
     position: relative;
     left: -4px;
     top: var(--element-fixed-top);
}

/* Toggle repeat */
.toggleRepeatButton {
     position: relative !important;
     left: -20px;
     top: var(--element-fixed-top);
}

/* Favorite */
.nowPlayingBarUserDataButtons {
     position: relative;
     left: -4px;
     top: var(--element-fixed-top);
}

/* Remote control */
.remoteControlButton {
     left: -110px;
     top: var(--element-fixed-top);
}

Pictogrampakket wijzigen​

Je kunt kiezen tussen Material Icons (door Jellyfin gebruikt) en Fontawesome-pictogrammen. Material Icons:

  • Outlined (omlijnd):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Outline.css');

  • Rounded (afgerond):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css');

  • Sharp (scherp):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Sharp.css');

Fontawesome-pictogrammen:

  • Solid (vol):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/solid.css');

  • Regular (standaard):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/regular.css');

  • Light (licht):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/light.css');

  • Duotone (tweekleuren):

    @import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/duotone.css');

Enkele links naar plaatsen waar aangepaste CSS is besproken en gedeeld!

Communityberichten​

Houd er rekening mee dat deze berichten mogelijk onder eerdere versies van Jellyfin zijn gemaakt. Sommige aanpassingen in deze handleidingen werken mogelijk niet meer!

Communitythema's​