• Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below
  • Forum
  • Website
  • GitHub
  • Status
  • Translation
  • Features
  • Team
  • Rules
  • Help
  • Feeds
User Links
  • Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below

    Useful Links Forum Website GitHub Status Translation Features Team Rules Help Feeds
    Jellyfin Forum Support Themes & Styles Scyfin CSS Theme (10.9.x Support)

     
    • 1 Vote(s) - 5 Average

    Scyfin CSS Theme (10.9.x Support)

    Loof27
    Offline

    Junior Member

    Posts: 2
    Threads: 2
    Joined: 2023 Aug
    Reputation: 0
    Country:United States
    #1
    2024-06-10, 04:25 AM
    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]
    2
    1
    1
    Hooleyhill
    Offline

    Junior Member

    Posts: 5
    Threads: 0
    Joined: 2023 Jul
    Reputation: 0
    Country:United Kingdom
    #2
    2024-06-10, 06:51 AM
    Nice update.
    xiNe
    Offline

    Junior Member

    Posts: 16
    Threads: 2
    Joined: 2023 Jun
    Reputation: 0
    Country:Canada
    #3
    2024-08-18, 12:35 PM
    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
    Ted Hinklater
    Offline

    Member

    Posts: 149
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #4
    2024-08-18, 12:52 PM (This post was last modified: 2024-08-18, 12:52 PM by Ted Hinklater.)
    (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;
    }
    1
    1
    xiNe
    Offline

    Junior Member

    Posts: 16
    Threads: 2
    Joined: 2023 Jun
    Reputation: 0
    Country:Canada
    #5
    2024-08-19, 03:45 AM
    (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
    }
    1
    luckey
    Offline

    Junior Member

    Posts: 6
    Threads: 1
    Joined: 2023 Sep
    Reputation: 0
    Country:Portugal
    #6
    2025-02-06, 01:21 AM
    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:

       
    « Next Oldest | Next Newest »

    Users browsing this thread: 1 Guest(s)


    • View a Printable Version
    • Subscribe to this thread
    Forum Jump:

    Home · Team · Help · Contact
    © Designed by D&D - Powered by MyBB
    L


    Jellyfin

    The Free Software Media System

    Linear Mode
    Threaded Mode