This remove the frosted glass like effect from every place.

```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance/removeBackdropFilter.css");
```

This remove the faded scroll view

```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance/removeFadingScroll.css");
```

Want to use compact posters instead of normal cards, add this to your custom css:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/compactPosters.css");

Example:

Warning : Compact posters might not look as expected for some screen sizes

Brings back the horizontal section for My Media

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/horizontalMyMedia.css");

If you want want to change the default jellyfin gradient accent to some other preset gradient use:

Note : Remember to put gradient css files below the main.css file import. Also this won't affect the login mesh background's colors.

• Mauve

  @import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/mauve.css");

  Example:
  

• NightSky

  @import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/nightSky.css");

  Example:
  

• Sea

  @import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/sea.css");

  Example:
  

• Custom

  If you need to add your own gradient use:

  :root {
    --accent1-light: YOUR ACCENT COLOR 1(LIGHTER SHADE);
    --accent1-dark: YOUR ACCENT COLOR 1(DARKER SHADE);
    --accent1-light-opacity1: YOUR ACCENT COLOR 1(WITH OPACITY 0.4);
    --accent2-light: YOUR ACCENT COLOR 2(LIGHTER SHADE);
    --accent2-dark: YOUR ACCENT COLOR 2(DARKER SHADE);
  }

Deaktiviert From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config

• Get Fanart Plugin, Dashboard -> Plugin -> Catalog
• Enable Fanart as a metadata provider for your libraries in the library settings, Dashboard -> Library -> Click on 3 dots on your Library -> Manage Library -> Scroll to find Metadata provider and enable Fanart in all of them.
• Rescan your drive and also enable Replace Metadata and scan

• Go to Settings -> Display -> and enable Backdrops option

When using the Nginx Reverse proxy config from the Jellyfin docs the theme will probably not work by default. (If you are using the subpath config, you can ignore all this.)

This config includes an CSP (Content Security Policy) with headers that don't allow for loading in external content that are not defined there.

In the nginx config you should add the URLs of all the CSS files you've imported through the "Custom CSS" box. this:

add_header Content-Security-Policy "default-src https: data: blob: https://image.tmdb.org; style-src 'self' 'unsafe-inline'; 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'";

becomes (with only adding the default style):

add_header Content-Security-Policy "default-src https: data: blob: https://image.tmdb.org; style-src 'self' 'unsafe-inline'https://cdn.jsdelivr.net/npm/jellyskin@latest/main.css; 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'";

If you don't do this the theme will simply not load (reverts back to default theme) and the browser console will spit out an error. Even if you paste in all the CSS, the font will still not load since it is loaded from a disallowed external source.

• Go to https://github.com/prayag17/JellySkin/issues
• Click on New Issue button
• Select the appropriate template

• Fork this repository.
• Add your patch/feature
• Create a pull request and thats it