Skip to main content

Design Tweaks

1. Custom Theme/Skin

You can either install the SkinManager Plugin to try out a new look for Jellyfin, or directly edit CSS in the Custom CSS section under the General settings. I experienced the SkinManager as pretty unstable, so I chose to use the second option.

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin@latest/default.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin/default.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin@latest/addons/Logo.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Logo.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/imp-per.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/progress-bar.css");

.btnForgotPassword,
.btnQuick {
  display: none !important;
}

You can find the theme here: https://github.com/prayag17/JellySkin

2. Enable Backdrops for all users

Sadly, you cannot enable backdrops for all users from the settings. However, you can do this, by editing the bundle.js file. To locate the file, run

find / -name *.bundle.js | grep jellyfin
=> /usr/share/jellyfin/web/main.jellyfin.bundle.js

Next, edit the file (here /usr/share/jellyfin/web/main.jellyfin.bundle.js) and replace this line

enableBackdrops:function(){return P}

with the following one:

enableBackdrops:function(){return x}

After that, restart Jellyfin and clear it's cache.