This is a theme based on JellyFlix, which is a Netflix-style theme for Jellyfin, so obviously credit to prayag17 for providing the base for this theme.
Most changes can be made by just importing my CSS files, but things like moving the cast to be before the season list requires modification to some JavaScript files.
The theme is optimized for 1080p, but it should work well on 720p, 768p, 1440p and 4K.
1440p might be okay, but for best results zoom 125% should be used.
4K is needs to be at 125% or 150% zoom.
I'm still looking into solutions for that.
Any @import line that you add to your CSS must be at the very top of your custom CSS. otherwise the file will not be imported.
Since this is my personal theme, it might change however I see fit. If you don't want these changes to affect you, please use the CSS files in the static directory, rather than latest.
All fixes will be applied to both, but changes to how the interface looks will only be made to the files under latest.
Put these at the top of your custom CSS:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/JellyTheme.css");
:root {
--accent:<COLOR>!important;
}
Change <COLOR> to an actual color before pasting, otherwise you'll have no accent color.
If you want a slightly cleaner UI, with no backdrop in the main menu and a few more things, use JellyTheme-Cleaner.css rather than JellyTheme.css.
If you don't use video backdrops, add this line to display a poster on mobile:
.layout-mobile .primaryImageWrapper > img {
display:block!important;
}
These must be added before the :root { line to work.
If you want to have a cleaner UI, add this:
The following is removed:
- Play trailer button
- Rotten tomatoes rating
- User icon
- Cast button (still displayed on mobile)
- Display and Home Preferences in User Settings
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Cleaner-UI.css");
If you want Continue Watching, Next Up and the list of seasons to be smaller, as shown in my screenshots, import this:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Resize-Cards.css");
Keep in mind that for this to work your home screen order must be as follow:
- Section 1: My Media
- Section 2: Continue Watching
- Section 3 and under: Irrelevant
If your server's metadata is in Hebrew, Arabic (or any other language that is written right-to-left, import this:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/RTL-Fix.css");
If you want the revamped video player, optimized for most screen resolutions and scales, (screenshot below), import this:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/PlayerRevamp.css");
If you want to have a slightly less overwhelming quality menu (screenshot below), import this:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/TrimmedQualitySection.css");
NOTE: This removes bitrates over 40Mbps (as well as 450kbps) and changes the names of everything as shown in the screenshot.
Also, 720kbps was renamed to 0.5Mbps for simplicity's sake)
. Use this only if you're sure that's what you want.
Also, the pop-up menu itself is positioned a little wonky atm, I'm looking into it.
If you want slimmer Active Devices entries like here (At the moment this only looks good in 1080p looks great in 4K and 1440p, but not perfect in 1080p (how the turntables huh), still working on scaling it), Import this:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Slim-ActiveDevices.css");
NOTE: The logo will be pretty low resolution because it's generating a low resolution image to begin with. If you want better quality logos, perform the following:
- Open your
dashboard-dashboard.********************.bundle.jsfile (asterisks are replaced with something specific to your instance, but this never changes after initial setup). - Find
tag:a.ParentLogoImageTagand set the values ofmaxHeightandmaxWidthto500. - Clear browser cache.
These require modifying some of the JavaScript files that Jellyfin generates. They will be different for every instance, and probably with different names, so make sure you back up these files before making any changes.
These work best if you're running Jellyfin inside a Docker container, so you can make sure the files won't get overwritten (which can cause issues if something major changes in Jellyfin).
All files related to this section are located in /usr/share/jellyfin/web/ if using a Docker container. I'm not sure where they are if using other types of installations.
NOTE: If using a Docker container, you must copy these files to your filesystem and then add them as "read-only volumes" in your container configuration
Example in a docker-compose file:
volumes:
- ./custom/main.********************.bundle.js:/usr/share/jellyfin/web/main.********************.bundle.js:ro
- ./custom/itemDetails-index-html.********************.bundle.js:/usr/share/jellyfin/web/itemDetails-index-html.********************.bundle.js:ro
Keep in mind that if the file is not read-only Jellyfin might overwrite it at some point, which is why I suggest using Docker.
- Open your
main.********************.bundle.jsfile (asterisks are replaced with something specific to your instance, but this never changes after initial setup). - Find
enableBackdrops:function() {return _}and change the_tox. - Clear browser cahce.
Before you do this, you must have a directory called backdrops with a video file in every movie or show you want to have a backdrop, otherwise Jellyfin won't know what to play.
- Open your
main.********************.bundle.jsfile (asterisks are replaced with something specific to your instance, but this never changes after initial setup). - Find
enableThemeVideos:function(){return _}and change the_to 'x'. - Clear browser cache.
- Open your
itemDetails-index-html.********************.bundle.jsfile (asterisks are replaced with something specific to your instance, but this never changes after initial setup). - Find the following line:
<div id="castCollapsible" class="verticalSection detailVerticalSection hide"> <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> </div> </div>
- Cut it from the file and paste it before
<div id="childrenCollapsible" class="hide verticalSection. - Add the following code to your CSS:
.layout-desktop div#castCollapsible {
margin-bottom:6em;
margin-top:-22vh;
width:68vw;
}
.layout-desktop div#childrenCollapsible {
margin-top:4em;
}
.layout-tv div#castCollapsible {
margin-top:-22vh;
width:68vw;
}
- Clear browser cache.
If you want item details to hide after a certain amount of time while watching a video backdrop as shown below, do the following:
- Open your
itemDetails-index-html.********************.bundle.jsfile (asterisks are replaced with something specific to your instance, but this never changes after initial setup). - Add the code from lines 10 to 21 located in IdleHIde.css
- Set
idleto your preferred time in milliseconds (20 seconds by default) - import the following to your custom CSS:
@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/IdleHide.css");
- Clear browser cache.
