Jellyfin Forum
Scyfin CSS Theme (10.9.x Support) - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Scyfin CSS Theme (10.9.x Support) (/t-scyfin-css-theme-10-9-x-support)

Pages: 1 2

Scyfin CSS Theme (10.9.x Support) - Loof27 - 2024-06-10

Repository: https://github.com/loof2736/scyfin

[Image: Fmvm6at.png]


Custom CSS theme for Jellyfin with support for backdrops


Scyfin Base Theme

[Image: homepage.png?raw=true]
[Image: details.png?raw=true]
[Image: details-backdrops.png?raw=true]
[Image: movies.png?raw=true]
[Image: dashboard.png?raw=true]
[Image: login.png?raw=true]

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

Options (Add these below the base theme)

Disable static left drawer 
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
     

OLED
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');

Seafoam
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');
  • [Image: seafoam.png?raw=true]

Coral
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
  • [Image: coral.png?raw=true]

Snow
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
  • [Image: snow.png?raw=true]


RE: Scyfin CSS Theme (10.9.x Support) - Hooleyhill - 2024-06-10

Nice update.

RE: Scyfin CSS Theme (10.9.x Support) - xiNe - 2024-08-18

is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it Confused-face

RE: Scyfin CSS Theme (10.9.x Support) - Ted Hinklater - 2024-08-18

(2024-08-18, 12:35 PM)xiNe Wrote: is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it Confused-face

You can add this to your CSS box after your @import line(s)

Code:
.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #626262 !important;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}


RE: Scyfin CSS Theme (10.9.x Support) - xiNe - 2024-08-19

(2024-08-18, 12:52 PM)Ted Hinklater Wrote:
(2024-08-18, 12:35 PM)xiNe Wrote: is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it Confused-face

You can add this to your CSS box after your @import line(s)

Code:
.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #626262 !important;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

thanks. finally I found below way to hide it;

.detailPageSecondaryContainer {
  background-clip: text
}

RE: Scyfin CSS Theme (10.9.x Support) - luckey - 2025-02-06

Hello! Thank you so much for your theme! I've been using it for a long time, with some modifications I made. But after recent updates, it's showing me a "dark box" on the left side.

   

This only happens in the Jellyfin Media Player... It looks normal on the web.

Also, can you help me show images in the Details Page background instead of my custom background image?

It should look like this:

   

RE: Scyfin CSS Theme (10.9.x Support) - Kiekan - 2025-11-08

(2024-08-19, 03:45 AM)xiNe Wrote:
(2024-08-18, 12:52 PM)Ted Hinklater Wrote:
(2024-08-18, 12:35 PM)xiNe Wrote: is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it Confused-face

You can add this to your CSS box after your @import line(s)

Code:
.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #626262 !important;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

thanks. finally I found below way to hide it;

.detailPageSecondaryContainer {
  background-clip: text
}

It looks like this is no longer working on Jellyfin 10.11.X.

For reference, I have the import CSS formatted as such:

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.detailPageSecondaryContainer {
  background-clip: text
}

Is there any other way to only show the backdrops on the movie/show detail pages?

RE: Scyfin CSS Theme (10.9.x Support) - Ted Hinklater - 2025-11-08

Wait I just realised, if you click your profile icon, go to Settings > Display, and disable Backdrops, it'll only show backdrops on the item detail page

RE: Scyfin CSS Theme (10.9.x Support) - Ted Hinklater - 2025-11-08

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.detailPageSecondaryContainer {
  background-clip: text
}

.page.libraryPage.backdropPage::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  background-attachment: fixed;
  pointer-events: none;
}


Wait I just realised, if you click your profile icon, go to Settings > Display, and disable Backdrops, it'll only show backdrops on the item detail page

RE: Scyfin CSS Theme (10.9.x Support) - Kiekan - 2025-11-08

(2025-11-08, 05:55 PM)Ted Hinklater Wrote: Wait I just realised, if you click your profile icon, go to Settings > Display, and disable Backdrops, it'll only show backdrops on the item detail page

True. But you lose the transparency element that show the backdrop completely when you disable this function in the user settings.

With backdrops disabled in the user settings:
[Image: Screenshot-2025-11-08-142428.png]

With backdrops enabled in user settings:
[Image: Screenshot-2025-11-08-142516.png]

I guess ultimately, I'm just looking for a way to remove that grey box that covers up the backdrop in the show/movie details page.