finality

768p :heavy_check_mark: 1080p :heavy_check_mark: 1440p :heavy_check_mark: 4k :heavy_check_mark: Mobile :heavy_check_mark: TV Mode :soon:

Jellyfin Theme CSS (Finishing TV mode, just waiting for logo support)

For the black & white version, paste this into your Custom CSS Box

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/finality.css");

or, import the colour version with


@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/Finality-Coloured.css");

Ultrawide users, import a version above, and also this fix:


@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/UltrawideFix.css");

Player

Mobile

mobile

Under "Display" make sure you enable backdrops and use the Dark theme

darkbackdrops

Optional Mods & Customization

Featured Content Bar by BobHasNoSoul and SethBacon

featured

Download spotlight.html
Enter your UserId into line 63 of spotlight.html (Get your UserID by going to the Jellyfin Dashboard, go to the Users tab, click your username. Your UserId is the last string in the address bar after the = sign)
Enter your API key into line 63 of spotlight.html (Go to Dashboard, API Keys tab, click the + and create a key for Spotlight)
Go to your jellyfin-web folder (C:\Program Files\Jellyfin\Server\jellyfin-web) and create a folder named avatars and drop spotlight.html in that folder
(Important: Open Notepad with Administrator rights, or use Notepad++ for this) In the jellyfin-web folder, open the file home-html.RANDOMSTRINGHERE.chunk.js
Ctrl+F and search for data-backdroptype="movie,series,book">
Paste this after the >

<style>.featurediframe { width: 93vw; height: 350px; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 40px}</style><iframe class="featurediframe" src="https://github.com/tedhinklater/finality/raw/main/web/avatars/spotlight.html"></iframe>

Save the file.
Empty your browser's cached web content (Ctrl+F5 or empty it from your browser's Cookies and Site Data settings section)
That's it. If you update your Jellyfin Server, just repeat steps 5 - 9.

Changing your Jellyfin logo -->

Go into your Jellyfin server's Custom CSS and insert this (changing the obvious part):

/*Use your own header logo*/
.pageTitleWithDefaultLogo {
  background-image: url(LOGO-URL-HERE);
}

Scrolling Backdrop

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/scrolling%20backdrop.css");

tedhinklater / finality