Jellyfin Forum
Flow for Jellyfin - 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: Flow for Jellyfin (/t-flow-for-jellyfin)

Flow for Jellyfin - LitCast - 2025-07-16

Flow, A Plex-inspired theme for Jellyfin WebUI
[Image: logo.png]
- Built on Scyfin, Ultrachromic

(Also available as a Userstyle)


- Outline Cards on hover
[Image: outline_hover.gif]

- Backdrop Support
[Image: backdrop_setting.gif]

Base Theme
Code:
@import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-main.css');


Extras (smaller cast/crew, etc)
Code:
@import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-Extras.css');
  •  
  • B/W Logo
     
  • Smaller Cast/Crew section
     
  • Hide "Upcoming on TV" and "Next Up" section in Season View

Options (Add these after/under the base theme)
  •      
  • Larger logo (for High DPI/Jellyfn Media Player)
    •      
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-HighDPIExtras.css');
      [Image: highdpi.png]   
         
  • Episode Grid (from Ultrachromic)
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-EpisodeGrid.css');
      [Image: episodegrid_uc.png]    
         
  • Round Cast/Crew/Guests
    •      
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFLow-RoundCastCrew.css');
      [Image: roundcastcrew.png]    
         
Themes:
  •      
  • Orange
    •          
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/ScyFlow-Orange.css');
               
    • [Image: orange.png]       
                       
                 
  • Rainbow
    •          
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/ScyFlow-Rainbow.css');
               
    • [Image: rainbow.gif]      
             
  • Darker icons/OLED accents (Add this after everything else):
    •          
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/ScyFlow-Dark.css');
        
    - (Also Compatible with Scyfin/Ultrachromic themes)   
Experimental (Works in progress)
  •                           
  • Horizontal-Scroll Episodes
    •          
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-Scrollable-Episodes-WIP.css');
               
    • [Image: sidescroll-episodes-wip.gif]         
                              
  • Nyan Progress Bar
    •          
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/NyanProgress.css');
               
    • [Image: nyanprogress.gif]
        
Installation:
  • Easy install (one-liner) 
  • Code:
    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-oneliner.css');
     
  • (Mobile/Android one-liner):
    Code:
    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-oneliner-mobile.css');
      
     
  • Mobile/App fixes: if the logo is too big or doesn't apply (iOS, Android), append this line as well (per client)
    •    
    • Code:
      @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-mobilefixes.css');
       
  • Smaller Screen/Android fixes: (if the indicators are too big)
       
  • Code:
    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-smallscreen-fixes.css');
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
    Code:
    @import url
    for the base theme    
  • Optional - Paste the code/@import url for any options / themes you may want
  • 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 code/@import url for the base theme
  • Note -
    •          
    • 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
       
  • Optional - Paste the code/@import url for any options/themes you may want     
  • Click "Save"


RE: Flow for Jellyfin - SethBacon - 2025-07-16

I love the circular cast cutouts & Nyan Progress Bar is joy