Ir al contenido principal
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Personalización CSS

En Dashboard > General, el campo "CSS personalizado" permite sobrescribir el CSS actual de la hoja de estilos de Jellyfin.

El CSS personalizado permite personalizaciones como cambiar colores, modificar diseños, y ajustar tamaño y comportamiento de elementos. A continuación se muestra una lista de diversos ajustes que pueden aplicarse. Estos ajustes CSS funcionan tanto en el cliente web como en la aplicación Android. El código se aplicará en el orden escrito, aunque !important tendrá prioridad absoluta. Para aprender más sobre !important, consulta Especificidad CSS o specifishity. Para implementar estos cambios, ve a Dashboard > General > Custom CSS.

Si tienes poca o ninguna experiencia con CSS, existen numerosos recursos y tutoriales en línea. Usar los ajustes y ejemplos siguientes facilita empezar a realizar tus propias modificaciones en tu instancia de Jellyfin.

Captura del ajuste 'CSS personalizado' en el panel de administración del cliente web

Información general sobre CSS​

Puedes aprender más sobre CSS usando sitios como w3schools y MDN. A continuación se presentan conceptos básicos que te permitirán editar aproximadamente los ajustes predefinidos.

Colores​

CSS admite múltiples formatos de color, pero típicamente se usan códigos hexadecimales para colores específicos. Para obtener un color exacto, deben usarse datos precisos como los códigos hexadecimales mostrados abajo.

Algunos ejemplos de códigos hexadecimales:

  • Verde: #5dd000

  • Azul: #0000d0

  • Rojo: #d00000

  • Negro transparente: #00000058

Usa el Selector de colores HTML para encontrar el código hexadecimal de cualquier color.

Si buscas colores más estándar y menos específicos, escribir el nombre literal del color cumple bien ese propósito. Por ejemplo, para obtener el color "amarillo" simplemente escribe "yellow", lo cual usará un amarillo predefinido.

yellow Amarillo
red Rojo
aquamarine Aguamarina
lightseagreen Verde mar claro

Puedes encontrar una lista de nombres de colores soportados en la referencia de W3Schools.

Comentarios​

Una sección de código o texto entre /* y */ indica un comentario y será ignorada. Esto permite agregar descripciones para cualquier sección de código. También puede usarse para desactivar código sin eliminarlo.

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

Encadenamiento CSS​

CSS puede "encadenarse" para modificar diferentes secciones simultáneamente. Un ejemplo es el ajuste "Color de borde". Enumera los elementos a modificar y aplica un cambio a todos ellos.

Ajuste "Color de borde":

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

Lista de ajustes​

Para aplicar cualquiera de estos ajustes, copia y pega el código CSS del ejemplo en el campo "CSS personalizado". Para usar múltiples ajustes, simplemente añádelos uno tras otro en el campo. El código aplicado permanecerá en el campo. Para eliminar un ajuste, borra o comenta su código en el campo. Los cambios se aplican inmediatamente al guardar la página de ajustes y no requieren reiniciar tu servidor Jellyfin.

Indicador de reproducción​

Esto afectará el indicador de contenido reproducido/visto. Reemplaza el color hexadecimal con cualquier valor que prefieras.

Indicadores sin modificar​

Captura de los indicadores de visualización predeterminados

Indicadores verdes​

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

Captura de indicadores de visualización con color verde personalizado aplicado

Indicadores transparentes y oscuros​

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

Captura de indicadores de visualización con color transparente personalizado aplicado

Indicadores de conteo transparentes (ej. series)​

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

Mostrar enlaces externos en diseño móvil​

La aplicación móvil desactiva por defecto la visualización de enlaces externos a IMDb, TheMovieDB, Trakt, etc. Para volver a habilitarlos, añade el siguiente fragmento:

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

Ocultar icono de Inicio del encabezado​

.headerHomeButton {
  display: none;
}

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

Ocultar icono de Reparto del encabezado​

.headerCastButton {
  display: none;
}

Ocultar icono de Sincronización del encabezado​

.headerSyncButton {
  display: none;
}

Ocultar Ajustes de usuario del encabezado​

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

Ocultar listados de canales de TV en vivo​

.guideChannelNumber {
  display: none;
}

Reducir ancho de canales de TV en vivo​

.channelsContainer {
  max-width: 8em;
}

Ocultar Reparto y equipo​

#castCollapsible {
  display: none;
}

Ocultar "Más como esto"​

#similarCollapsible {
  display: none;
}

Ocultar "Próximamente"​

div.nextUpSection {
  display: none;
}

Ocultar calificaciones por estrellas​

div.starRatingContainer {
  display: none;
}

Reemplazar texto "Últimas películas" por texto personalizado como "Películas añadidas recientemente"​

#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;
}

Reemplazar texto "Últimas series" por texto personalizado como "Series añadidas recientemente"​

#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;
}

Imagen de fondo en página de inicio de sesión​

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

Imagen de fondo en página de inicio​

.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;
}

Documentación adicional de MDN

Menú superior transparente​

.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);
}

Bordes redondeados en imágenes​

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

Agrandar botones de pestañas​

Agranda los botones de pestañas (sugeridos, géneros, etc). Por defecto son muy pequeños, especialmente en móviles.

/* 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;
}

Los botones de pestaña agrandados y el menú transparente se ven así:

Captura de botones de pestaña agrandados y menú transparente

Página de inicio de sesión minimalista​

¡Esto luce aún mejor junto con el menú superior transparente!

/* 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;
}

Captura de la página de inicio de sesión minimalista

Previsualizaciones de episodios estilizadas​

Las previsualizaciones de episodios en vista de temporada se dimensionan según la resolución horizontal. Esto genera mucho espacio desperdiciado en el resumen del episodio y páginas verticales largas que requieren mucho desplazamiento. Este código reduce la altura de las entradas de episodios, resolviendo ambos problemas.

/* 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;
}

Captura de página de serie TV con previsualizaciones de episodios estilizadas

Información de reparto y equipo estilizada y reducida​

Esto cambiará drásticamente el estilo de la información del reparto a algo similar al enfoque de Plex. Este ajuste generará miniaturas algo más pequeñas y funciona con todos los temas.

/* 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;}

Captura de información de reparto y equipo estilizada y reducida

Reparto y equipo sin imágenes​

#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;
}

Captura de pantalla de información de reparto y equipo sin imágenes

Color de fondo personalizado​

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

Oscurecer el fondo​

Esto oscurece el fondo en los temas Blue Radiance y Purple Haze. Edita el porcentaje según qué tan oscuro lo quieras. Un valor más bajo = más oscuro.

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

Color del encabezado derecho​

Modifica los colores de los botones de reparto, búsqueda y usuario en la esquina superior derecha.

.headerRight {
  color: yellow;
}

Captura de pantalla de un color amarillo personalizado para los botones de iconos en la esquina superior derecha

Color personalizado del panel de consola​

Modifica el color del panel del menú izquierdo.

.mainDrawer-scrollContainer {
  color: yellow;
}

Captura de pantalla de un color amarillo personalizado en el panel del menú izquierdo

Color personalizado de la página general​

.dashboardGeneralForm {
  color: yellow;
}

Captura de pantalla de un color amarillo personalizado en la página General

Color personalizado de bordes​

Cambia el color del borde para campos de texto y menús desplegables.

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

Afecta el color del borde de campos de texto y menús desplegables cuando están resaltados (seleccionados).

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

Captura de pantalla de un color rojo personalizado para bordes

Ajuste de encabezado completo​

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

Captura de pantalla del ajuste de encabezado completo

Desactivar carrusel de imágenes para bibliotecas​

Hace que las bibliotecas y medios encajen perfectamente en la página de inicio sin necesidad de desplazamiento horizontal.

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

Desplazar botones de scroll​

.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;
}

Ejemplo de tema de colores "Hotdogs and Catsup"​

Un ejemplo de combinación de colores.

Captura de pantalla del tema de colores "Hotdogs and Catsup"

.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;
}

Controles flotantes de "Reproduciendo ahora"​

Captura de pantalla de los controles flotantes de "Reproduciendo ahora"

/* 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);
}

Cambiar paquete de iconos​

Puedes elegir entre iconos Material (usados por Jellyfin) o iconos Fontawesome. Iconos Material:

  • Contorneados:

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

  • Redondeados:

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

  • Afilados:

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

Iconos Fontawesome:

  • Sólidos:

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

  • Regulares:

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

  • Ligeros:

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

  • Bicolor (duotone):

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

Enlaces de la comunidad​

¡Algunos enlaces donde se ha compartido y discutido CSS personalizado!

Publicaciones de la comunidad​

¡Ten en cuenta que estas publicaciones pueden haberse hecho en versiones anteriores de Jellyfin! Algunos de estos ajustes mencionados en las guías podrían no funcionar actualmente.

Temas de la comunidad​