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)

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: