Jellyfin CSS Theme
Hint of Colors was a fork of Hint of green, however, V2 revamps hint of colors with a whole new look and feel inspired from my own modifications, css found on reddit and hint of colors v1.
- Chrome, Firefox, Safari and common Jellyfin applications
- Jellyfin 10.6 - 10.9.0
- Mobile item detail page
- Colours are based on a pastel palatte
- A whole new look and feel
- Netflix inspired item detail page
- Selection of different colors(Lavender, blue, orange, red, etc; WIP).
This theme should be considered as heavy but it is not as heavy as the original hint of colors. It is also not as light as the original hint of colors. It is in between.
There will be SEPERATE links for each colors. Currently only lavender is available. The v1 color selection will be back soon.
Required Go to Settings > Home > Home screen section 1: > select My Media (small)
This step is necessary for the theme to be applied to library buttons by default.
HOWEVER, if you choose to have large icons instead uncomment the following code in the CSS:
@media (max-width: 62.5em) {
.section0 .cardText.cardTextCentered.cardText-first {
height: 2.5em;
}
}
.section0 button.itemAction.textActionButton {
background: rgba(0, 0, 0, 0);
border-radius: var(--rounding);
height: 3.5em;
}
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
max-width: 90vw;
}
.section0 .emby-scroller {
margin-right: 0;
}Copy this code into Dashboard > General > Custom CSS
@import url("https://fallenbagel.github.io/Hint-of-Colors/lavender.css");The CSS is now optimised and the colors are now stored at the top of each CSS. You could create your own colors by copying all of it and then either pasting it in a place where you can host or in the custom CSS itself and replacing the colors with your own.
In addition, even some parts like the looks of the theme can be changed in from those parts. There are comments next to each.
- You can also replace the
YOUR LOGO URL.PNG/jpgwith your own server logo hosted on any photo hosting website of your choice/or you can place the logo in your web-dir and writeurl(../../YOURLOGO.png)
.adminDrawerLogo img {
content: url(YOUR LOGO URL.png/jpg) !important;
}
imgLogoIcon {
content: url(YOUR LOGO URL.png/jpg) !important;
}
.pageTitleWithLogo {
background-image: url(YOUR LOGO URL.png/jpg) !important;
}If you are using nginx as a reverse proxy for Jellyfin, replace the "add_header Content-Security-Policy" in your nginx config with this line below
add_header Content-Security-Policy "default-src https: data: blob: http://image.tmdb.org; style-src 'self' 'unsafe-inline' https://fallenbagel.github.io ; script-src 'self' 'unsafe-inline' https://www.gstatic.com/cv/js/sender/v1/cast_sender.js https://www.youtube.com blob:; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'";
Add this Custom CSS into Dashboard > General > Custom CSS.
#loginPage {
background: url('/Branding/Splashscreen?format=jpg&foregroundLayer=0.35') !important;
}You can also customize the opacity of foreground layer of the splash screen by adjusting the value in the url.
- Install the Fanart plugin first
- Go to Dashboard > Library
- For each library you have, go to Manage Library
- Enable Fanart for image fetcher
- Then go to Fetcher Settings and select "Logo"
- Manually scan media library
- Refresh the page once done
- Install the Intro Skipper plugin
- Either use Jellyfin Media Player (Intro Skipper should be enabled in Client Settings as it's disabled by default) and/or Jellyfin Web (
index.htmlof Jellyfin Web should have correct permissions) - Only then would my css apply to the skip button
Skipintrobutton.mp4
hover.on.video.webm
