Personnalisation CSS

Dans "Tableau de bord> Général", le champ "CSS personnalisé" peut être utilisé pour saisir n'importe quel remplacement, qui sera ensuite appliqué à la feuille de style Jellyfin CSS.

Le CSS personnalisé offre une personnalisation de l'interface telle que la modification des couleurs, de la mise en page, de la taille des éléments et du comportement. Vous trouverez ci-dessous une liste des diverses modifications pouvant être appliquées. Les modifications CSS fonctionnent à la fois dans le client Web et dans l'application Android. Le code sera appliqué dans l'ordre dans lequel il est écrit afin que le code puisse remplacer le CSS personnalisé précédemment défini,! Important remplacera tout. Pour en savoir plus, voir Spécificité CSS. Pour implémenter ces modifications, accédez à Dashboard> General> Custom CSS. Une spécificité supplémentaire est une source de spécificité.

Si vous avez peu ou pas d'expérience CSS, vous pouvez trouver diverses ressources et tutoriels en ligne, en utilisant les modifications suivantes comme exemples, il est assez facile de commencer à apporter vos propres modifications à votre instance Jellyfin.

Présentation CSS

Vous pouvez en savoir plus sur CSS en utilisant des sites comme w3school. Voici quelques détails très basiques qui vous permettront de faire des modifications rudimentaires des modifications déjà apportées.

Les couleurs

CSS prend en charge plusieurs formats de couleurs, dont la plupart sont généralement hexadécimaux. Mais simplement le texte fonctionne aussi. Pour obtenir "jaune", vous pouvez simplement écrire "jaune", cela utilisera une couleur jaune prédéfinie. Pour obtenir une couleur spécifique, des données de couleur exactes telles que les codes hexadécimaux ci-dessous doivent être utilisées.

Quelques exemples de codes couleurs hexadécimaux:

#5dd000 Green
#0000d0 Blue
#d00000 Red
#00000058 Noir transparent

Allez ici pour un tableau de couleurs hexadécimal pour obtenir un code pour n'importe quelle couleur.

Une section de code ou de texte entre / * et * / indique un commentaire et sera ignorée. Cela vous permet d'ajouter des descriptions de ce que fait une section particulière de code afin qu'elle soit facilement identifiable. Il peut également être utilisé pour désactiver le code sans le supprimer. Par exemple

/ * Cela pourrait être ajouté au-dessus du code pour vous dire ce qu'il fait * /

Chaînage CSS

CSS peut être enchaîné pour modifier différentes sections ensemble. Un exemple en est le mod «Border color». Il répertorie les éléments à modifier et apporte une modification qui s'applique à tous.

Liste des modifications

Pour appliquer l'un de ces éléments, copiez et collez le code CSS dans le champ "CSS personnalisé". Pour utiliser plusieurs modifications, ajoutez-les simplement l'une après l'autre dans le champ. Tout code appliqué restera dans le champ. Pour supprimer une modification, supprimez ou commentez le code correspondant dans le champ. Les modifications prennent effet immédiatement lorsque la page de configuration est enregistrée et n'a pas besoin d'être redémarrée.

Indicateur reproduit

Cela affectera l'indicateur de lecture / observation. Remplacez l'hexagone coloré par la valeur souhaitée.

Sans mod

Vert

.playedIndicator {i}: #5dd000; }

Transparent foncé en utilisant la valeur hexadécimale RGBA

/ * Rendre l'icône observée sombre et transparente * /. PlayIndicator {background: #00000058;}

Menu supérieur transparent

Explicite

/ * Transparence du menu supérieur * /. SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-blurred {background: none; couleur d'arrière-plan: rgba (0, 0, 0, 0);}. skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background: none; couleur de fond: rgba (0, 0, 0, 0);}

Développez les boutons d'onglet

Développez les boutons d'onglet, les astuces, les genres, etc. Par défaut, ils sont très petits, en particulier sur les mobiles.

/ * Ajustez "taille-ajustement" et "taille" pour modifier la taille * /. HeaderTabs.sectionTabs {text-size-adjust: 110%; taille de police: 110%;}. pageTitle {margin-top: auto; margin-bottom: auto;}. emby-tab-button {padding: 1.75em 1.7em;}

Les boutons de l'onglet développé et du menu transparent ressemblent à ceci:

Page de connexion minimaliste

Cela semble encore mieux avec le menu supérieur transparent.

/ * Réduire le formulaire de connexion * / #loginPage .readOnlyContent, #loginPage formulaire {max-width: 22em;} / * Masquer le texte "veuillez vous connecter", la marge est d'empêcher le formulaire de connexion de remonter trop haut * / #loginPage h1 {affichage: aucun} #loginPage .padded-left. padded-right page.padded-bottom {sample: 50px} / * Masquer les boutons "manuel" et "oublié" * / #loginPage .raised.cancel.block.btnManual.emby bouton {sample: none} #loginPage .raised.cancel.block .btnButtonPassword.emby oublié.btn {échantillon: aucun}

Aperçus stylisés des épisodes

Les aperçus des épisodes dans Season View sont dimensionnés en fonction de la résolution horizontale, ce qui entraîne un gaspillage d'espace important dans le résumé de l'épisode et la haute page verticale nécessite beaucoup de défilement pour naviguer. Ce code réduit la hauteur des entrées d'épisode pour réduire le besoin de défilement vertical sur les grands écrans.

/ * Taille de l'épisode Aperçu plus compact des images * /. ListItemImage.listItemImage-large.itemAction.lazy {height: 110px;}. ListItem-content {height: 115px;}. Secondary.listItem-overview.listItemBodyText {hauteur: 61px; marge: 0;}

Informations sur la distribution la plus petite et la plus élégante

Cela changera radicalement le style des informations diffusées en quelque chose de très similaire à la façon dont fonctionne le plex. Le thème Purple Haze a déjà des informations de distribution arrondies, mais à la même taille que tout le reste, ce remplacement entraînera des vignettes légèrement plus petites et fonctionne également avec tous les autres thèmes.

/ * Réduisez et projetez les vignettes carrées (ou rondes) * / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {largeur: 4,2 cm! Important; taille de police: 90%! important;} #castContent .card.overflowPortraitCard. personne de la carte avec les données d'utilisation {largeur: 4,2 cm! important; taille de police: 90%! Important;} / * Comportement de rapport d'aspect d'image correct, définissez le rayon du bord à zéro pour les tuiles carrées * / #castContent .cardContent-button.cardImageContainer.coveredImage. cardContento.cardContent-shadow.itemAction.lazy {taille d'arrière-plan: couverture; ! important; rayon du bord: 2,5 cm;} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground. defaultCardBackground1.cardContent. cardSombra.itemAcción {taille d'arrière-plan: couverture; ! important; rayon du bord: 2,5 cm;} #castContent .cardButton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardShadow.content. itemAction {taille du fonds: couverture; ! important; rayon du bord: 2,5 cm;} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {taille d'arrière-plan: couverture; ! important rayon du bord: 2,5 cm;} #castContent.content.Button.of.content Container.Cover Image Default.CardBackground.DefaultCardBack4.CardContent.card Shade.content.Action {taille d'arrière-plan: couverture; ! important; rayon de bord: 2,5 cm;} #cast Content.Card.ContentButton.Container.Cover Image Default.CardBackground.DefaultCardBack5.CardContent.Card Shade.ContentAction {taille d'arrière-plan: couverture; ! important; rayon du bord: 2,5 cm;} #castContento. cardScalable {largeur: 3,8 cm! important; haut: 3,8 cm! important; rayon de bord: 2,5 cm;} #castContent .cardOverlayContainer.itemAction {rayon de bord: 2,5 cm;} / * Boutons centraux de la souris * / #castContent .cardOverlayButton-br {bas: 4%; à droite: 15%; largeur: 70%;} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin: auto;}

Couleur de fond

.backgroundContenedor, .dialog, html {couleur d'arrière-plan: #0fd0d0; }

Assombrir l'arrière-plan

Cela assombrit l'arrière-plan des paillettes bleues et de la brume violette, modifiez le pourcentage en fonction de la noirceur souhaitée. Plus bas est plus sombre.

/ * Fond sombre, ne fonctionne qu'avec une lueur bleue * /. BackgroundContainer {couleur de fond: #000000; filtre: luminosité (50%);}

En-tête droit

Cela modifie les couleurs des boutons de distribution, de recherche et d'utilisateur en haut à droite.

.headerRight {couleur: jaune; }

Panneau de console

Modifiez la couleur du panneau de menu à gauche.

.mainDrawer-scrollContainer {couleur: jaune; }

Page générale

Panneau de contrôle Forme générale {couleur: jaune; }

Couleur de bordure

Cela changera la couleur de la bordure des champs de texte et des menus déroulants.

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

Cela affectera la couleur de la bordure des champs de texte et des menus déroulants sélectionnés.

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

Mod en-tête complet

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

Hot-dogs et Catsup

Un exemple de thème de couleur.

.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption-selected, .cardBox, .paperList {background: #ff9475;}. emby-input, .emby-textarea, .emby- sélectionnez {border-color: #fdbe7d;}. backgroundContainer.withBackdrop, .backdropContainer, .backgroundContainer {background: #fdbe7d;} #myPreferencesMenuPage .listItemBodyText, .emby-tab-button [data-index =TP "" div> div> div> a: nième enfant (impair),. button-submit,. mainAnimatedPage *: nth-child (impair),. dashboardGeneralForm *: nth-child (impair),. mainDrawer-scrollContainer *: nth-child (impair),. headerRight *: nth-child (impair) {color: red;} #miPreferencesMenuPage. listItemIcon, .emby-tab-button [data-index = "1"], #myPageMenuPreferences; div; div; div; div; a: nième enfant (pair),. mainAnimatedPage *: nième enfant (pair),. dashboardGeneralForm *: nième enfant (pair),. mainDrawer-scrollContainer *: nième enfant (pair),. headerRight *: nième enfant (pair) .annuler {couleur: jaune;}

Commandes flottantes en cours de lecture

/ * hauteur fixe pour la ligne du bas * /: root {--fix-fixed-element-up: 95px;} / * Maintenant, appuyez sur la barre dans le pied de page * /. nowPlayingBar {width: 650px; indice z: 10; position: fixe; en haut: 300px; hauteur: 120px; Style de bord: solide; couleur de la bordure: blanc; couleur de fond: noir; marge gauche: 50%;} / * seul enfant de nowPlayingBar * /. nowPlayingBarTop {hauteur: 5px! important; largeur max: 500px haut: 10px;} / * Barre de recherche de progression du morceau * /. now Bar en cours d'utilisation Conteneur de position {position: relative; Ci-dessus: 1.0em! Important;} / * Conteneur contenant la miniature de l'album, l'artiste et le nom de l'album * /. NowPlayingBarInfoContainer {position: fixed! Important; gauche: 12px; haut: 34px; hauteur: 60px; width: 1100px;} / * Conserve la piste suivante, la piste précédente, la lecture / pause, les éléments suivants et temporels * /. nowPlayingBarCenter {position: relative! important; gauche: 32px; ci-dessus: var (- fixed-element-above); min-width: 500px;} / * Maintient le silence, conteneur avec curseur de volume, boutons de répétition, favoris et télécommande * /. nowPlayingBarRight {width: 402px! important; gauche: -60px;} / * bouton muet * /. muteButton {position: relative; up: var (- item-up);} / * Curseur de volume * /. nowPlayingBarVolumeSliderContainer {position: relative; gauche: -4px; top: var (- top-element);} / * Basculer le bouton de répétition * /. toggleRepeatButton {position: relative! important; gauche: -20px; top: var (- top-element);} / * Favorite * /. nowPlayingBarUserDataButtons {position: relative; gauche: -4px; top: var (- top-element);} / * Remote Control * /. remoteControlButton {left: -110px; top: var (- top-element);}

Liens communautaires

Quelques liens vers des endroits où le CSS personnalisé a été discuté et partagé.

CSS personnalisé - mis à jour pour 10.5.0 de jellyfin

CSS Jellyfin personnalisé facile de jellyfin

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