Custom theme for Jellyfin WebUI
Go to file
2023-12-30 15:38:00 -05:00
CSS Fix for non-rounded selection menu 2023-12-30 14:49:50 -05:00
images Updated README.md 2023-12-30 15:28:24 -05:00
LICENSE Initial commit 2022-11-09 06:23:40 -05:00
README.md Updated README 2023-12-30 15:38:00 -05:00

scyfin logo

Custom CSS theme for Jellyfin (plus a backdrops supported version)


Go to installation


Scyfin Complete Theme

scyfin1 scyfin2 scyfin3 scyfin4 scyfin5

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.11/CSS/css-scyfin/scyfin-theme.css');

Options (Add these below the full theme)

  • Disable static left drawer
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.10/CSS/css-scyfin/disable-static-drawer.css');
  • Disable static left drawer (BACKDROP VERSION)
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.10/CSS/css-scyfin/disable-static-drawer-backdrop.css');

Scyfin Complete Theme - Backdrops Supported

Note -

  • Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
  • Backdrops need to be enabled in Jellyfin (Settings > Display > Backdrops) for backdrop supported version to display properly
scyfin-backdrop1 scyfin-backdrop2 scyfin-backdrop3

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.11/CSS/css-scyfin/scyfin-theme-backdrop.css');

Options (Add these below the full theme)

  • Disable static left drawer
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.10/CSS/css-scyfin/disable-static-drawer.css');
  • Disable static left drawer (BACKDROP VERSION)
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.10/CSS/css-scyfin/disable-static-drawer-backdrop.css');

Installation:


Server-wide install:

  • Click the hamburger icon (Top left)
  • Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account)
  • Navigate to "General"
  • Near the bottom, under "Custom CSS code", paste the @import url for the theme you want
    • Note -
      • Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
    • Example:
    • install
  • Optional - Paste the @import url for any options you want
    • Example:
    • install2
  • Click "Save"

Single client install:

  • Click the hamburger icon (Top left)
  • Navigate to "Settings"
  • Navigate to "Display"
  • Near the middle, under "Custom CSS code", paste the @import url for the theme you want
    • Note -
      • Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
      • If there is any server-wide custom CSS, you may want to enable "Disable server-provided custom CSS code", as the two themes WILL interfere with each other
    • Example:
    • install3
  • Optional - Paste the @import url for any options you want
    • Example:
    • install4
  • Click "Save"