CSS定制

在“控制台>常规”中，“自定义CSS”字段可用于输入任何替代，然后将其应用于Jellyfin CSS样式表。

自定义CSS提供了界面自定义功能，例如更改颜色，布局，元素大小和行为。下面列出了可以应用的各种修改。 CSS修改可在Web客户端和android应用程序中使用。将按照编写的顺序应用代码，以便代码可以覆盖先前设置的自定义CSS，重要的将覆盖所有内容。要了解更多信息，请参阅CSS特异性。要实现这些更改，请转至仪表板>常规>自定义CSS。特异性的另一个来源是特殊性。

如果您几乎没有CSS经验，则可以找到各种在线资源和教程，并以以下修改为例，开始对Jellyfin实例进行自己的更改非常容易。

CSS概述

您可以使用w3school之类的网站来了解有关CSS的更多信息。以下是一些非常基本的细节，使您可以对已经进行的修改进行基本的编辑。

色彩

CSS支持多种颜色格式，其中大多数通常为十六进制。但是文字也可以。要获得“黄色”，您可以只写“黄色”，这将使用预设的黄色。为了获得特定的颜色，必须使用精确的颜色数据，例如下面的十六进制代码。

十六进制颜色代码的一些示例：

#5dd000绿色
#0000d0蓝色
#d00000红色
#00000058透明黑色

转到此处获取十六进制颜色图表，以获取任何颜色的代码。

/ *和* /之间的一段代码或文本表示注释，将被忽略。这使您可以添加对代码的任何特定部分所做的描述，以便易于识别。它也可以用来禁用代码而不删除它。举个例子

/ *这可以添加到代码上方以告诉您它的功能* /

CSS链接

CSS可以链接在一起以一起修改不同的部分。一个例子就是“边框颜色” mod。它列出了要修改的元素，并进行了适用于所有元素的更改。

修改清单

要应用其中任何一种，请将CSS代码复制并粘贴到“自定义CSS”字段中。要使用多个修改，只需在字段中一个接一个地添加它们即可。任何应用的代码将保留在该字段中。要删除修改，请在字段中删除或注释相应的代码。保存配置页面且不需要重新启动时，更改将立即生效。

指标转载

这将影响播放/观察指示。用所需的值替换彩色的六边形。

没有国防部

绿色的

.playedIndicator {i}：#5dd000； }

使用十六进制RGBA的深色透明

/ *使观察到的图标变黑透明* /。PlayIndicator {background：#00000058;}

透明顶部菜单

不言自明

/ *顶部菜单透明度* /。SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-blurred {background：none;背景颜色：rgba（0，0，0，0）;}。 skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background：none;背景颜色：rgba（0，0，0，0）;}

展开标签按钮

展开标签按钮，提示，流派等。默认情况下，它们很小，尤其是在手机上。

/ *调整“大小调整”和“大小”以修改大小* /。HeaderTabs.sectionTabs {text-size-adjust：110%; fontTitle：110%;}。pageTitle {margin-top：auto; margin-bottom：auto;}。emby-tab-button {padding：1.75em 1.7em;}

展开的标签和透明菜单上的按钮如下所示：

极简登录页面

透明的顶部菜单看起来更好。

/ *减少登录表单* / #loginPage .readOnlyContent，#loginPage form {max-width：22em;} / *隐藏文本“ please login”，其边距是防止登录表单移得太远* / #loginPage h1 {显示：无} #loginPage .padded-left。右侧填充页面。底部填充{sample：50px} / *隐藏“手动”和“忘记”按钮* / #loginPage .raised.cancel.block.btnManual.emby按钮{sample：无} #loginPage .raised.cancel.block .btnButtonPassword.emby forgotten.btn {样本：无}

风格化的剧集预览

Season View中情节的预览是根据水平分辨率确定大小的，这会导致在情节摘要中浪费大量空间，而较高的垂直页面需要大量滚动才能导航。此代码减少了剧集条目的高度，从而减少了在大屏幕上垂直滚动的需要。

/ *情节大小更紧凑地预览图像* /。ListItemImage.listItemImage-large.itemAction.lazy {height：110px;}。ListItem-content {height：115px;}。Secondary.listItem-overview.listItemBodyText {高度：61像素；边距：0；}

有关最小和最时尚的演员表的信息

这将大大改变广播信息的样式，使其与plex的工作方式非常相似。 Purple Haze主题已经具有四舍五入的演员表信息，但是与其他所有内容一样，此替代将导致缩略图略微缩小，并且也适用于所有其他主题。

/ *缩小并投影方形（或圆形）缩略图* / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {宽度：4.2厘米！字体大小：90%！重要；} #castContent .card.overflowPortraitCard。 personaTarjeta.comocon数据使用情况{宽度：4.2厘米！重要；字体大小：90%！重要；} / *纠正图像长宽比行为，将正方形瓷砖的边缘半径设置为零* / #castContent .cardContent-button.cardImageContainer.coveredImage。 cardContento.cardContent-shadow.itemAction.lazy {背景尺寸：封面；重要！边缘半径：2.5厘米；} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground.defaultCardBackground1.cardContent。 cardSombra.itemAcción{背景尺寸：封面；重要！边缘半径：2.5厘米；} #castContento .cardBoton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content。 itemAction {资金规模：封面；重要！边缘半径：2.5厘米；} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {背景尺寸：封面； ！重要的edge-radius：2.5cm;} #castContent.contentButton.of.content覆盖的容器默认图像imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {背景尺寸：封面；重要！ edge-radius：2.5cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {背景尺寸：封面；重要！边缘半径：2.5厘米；} #castContento。 cardScalable {宽度：3.8cm！重要；高：3.8厘米！ radius-edge：2.5cm;} #castContent .cardOverlayContainer.itemAction {radius-edge：2.5cm;} / *鼠标悬停中键* / #castContent .cardOverlayButton-br {底部：4%;右：15%；宽度：70%；} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin：auto;}

背景色

.backgroundContenedor，.dialog，html {背景颜色：#0fd0d0; }

调暗背景

这会使蓝色闪光和紫色雾气的背景变暗，根据您想要的黑暗程度来编辑百分比。越低越暗。

/ *深色背景，仅适用于蓝色发光* /。BackgroundContainer {背景色：#000000;过滤器：亮度（50%）；}

右页眉

这将修改右上方的投射，搜索和用户按钮的颜色。

.headerRight {颜色：黄色； }

控制台面板

修改左侧菜单面板的颜色。

.mainDrawer-scrollContainer {颜色：黄色； }

一般页面

。控制面板常规格式{颜色：黄色； }

边框颜色

这将更改文本字段的边框颜色和下拉菜单。

.emby-input，.emby-textarea，.emby-select {border-color：#d00000; }

这将影响所选文本字段和下拉菜单的边框颜色。

.emby-input：焦点，.emby-textarea：焦点，.emby-select-withcolor {border-color：#ffffff！重要； }

全头模组

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

热狗和猫

颜色主题的示例。

.skinHeader，.mainDrawer，.emby-input，.emby-textarea，.emby-select，.navMenuOption-selected，.cardBox，.paperList {background：#ff9475;}。emby-input，.emby-textarea，.emby-选择{border-color：#fdbe7d;}。backgroundContainer.withBackdrop，.backdropContainer，.backgroundContainer {background：#fdbe7d;} #myPreferencesMenuPage .listItemBodyText，.emby-tab-button [数据索引=“ 0”]，1TP3 div> div> div> a：第n个子元素（奇数），.按钮提交，。 mainAnimatedPage *：第n个子项（奇数），. dashboardGeneralForm *：第n个子项（奇数），. mainDrawer-scrollContainer *：nth个子项（奇数），. headerRight *：第n个子项（奇数）{颜色：红色；} #miPreferencesMenuPage。 listItemIcon，.emby-tab-button [数据索引=“ 1”]，#myPageMenuPreferences; div; div; div; div; a：nth-child（even），。mainAnimatedPage *：nth-child（even），。 dashboardGeneralForm *：nth-child（偶数），. mainDrawer-scrollContainer *：nth-child（偶数），. headerRight *：nth-child（偶数）。cancel{颜色：黄色；}

浮动正在播放的控件

/ *底行的固定高度* /：根{--fixed-up-up：95px;} / *现在点击页脚中的bar * /。nowPlayingBar {width：650px; z索引：10；位置：固定上：300px；高度：120像素；边缘样式：实心；边框颜色：白色；背景颜色：黑色；左边距：50%;} / * nowPlayingBar的唯一子对象* /。nowPlayingBarTop {高度：5像素！重要；最大宽度：500像素顶部：10像素；} / *歌曲进度搜索栏* /。nowBar in usePositionContainer {position：relative;上图：1.0em！Important;} / *包含专辑缩略图，艺术家和专辑名称的容器* /。nowPlayingBarInfoContainer {位置：固定！重要；左：12px；顶部：34px；高度：60px； width：1100px;} / *保留下一个，上一个曲目，播放/暂停，下一个和时间元素* /。nowPlayingBarCenter {位置：相对！重要！左：32px;上面：var（-固定元素以上）; min-width：500px；} / *保持静音，带有音量滑块，重复按钮，收藏夹和遥控器的容器* /。 nowPlayingBarRight {width：402px！Important;左：-60px;} / *静音按钮* /。MutantButton {位置：相对；上：var（-item-up）;} / *音量滑块* /。 nowPlayingBarVolumeSliderContainer {position：relative;左：-4px; top：var（-top-element）;} / *切换重复按钮* /。toggleRepeatButton {位置：相对！重要；左：-20px； top：var（-top-element）;} / *最喜欢的* /。 nowPlayingBarUserDataButtons {position：relative;左：-4px; top：var（-top-element）;} / *远程控制* /。remoteControlButton {左：-110px; top：var（-top-element）;}

社区链接

一些讨论和共享自定义CSS的地方的链接。

自定义CSS-已针对10.5.0更新 来自 果冻

简易Jellyfin自定义CSS 来自 果冻

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