JellySkin

Use 67% or 70% zoom in web browser for better experience

Note:To take full experience of this CSS on fire fox click here.

This is JellySkin: To use just copy this :

@import url("https://prayag17.github.io/JellySkin/default.css");

To use Logos like the images given below use:

@import url("https://prayag17.github.io/JellySkin/Logo.css");

If you want to display your posters to be compact use the following line with default css

@import url("https://prayag17.github.io/JellySkin/compact-poster.css")

To use different gradient for your buttons I have added few different gradients you can choose or you can create your own (check the steps given bellow), the default gradient used is jellyfin's default logo gradient,using this alone will only skin the button colors and I know the names for this are very funny:

@import url("https://prayag17.github.io/JellySkin/seaGradient.css");
@import url("https://prayag17.github.io/JellySkin/sunsetGradient.css");
@import url("https://prayag17.github.io/JellySkin/mauveGradient.css");
@import url("https://prayag17.github.io/JellySkin/nightSkyGradient.css");

and past it in custom css text box and click save. To open Custom CSS settings go to Dashboard>General>Custom CSS.
Using custom own Gradient or color Create your gradient or solid color and past it in --accent and gradient in opposite angle in --accent-selected :

:root {--accent: your gradient;}
:root {--accent-selected: your gradient in opposite angle;}

Now, to use your own Gradient (to get great button or any gradient go to https://cssgradient.io/gradient-backgrounds or https://cssgradient.io) or solid color:

:root {--accent: your gradient;}
:root {--accent-selected: your gradient in opposite angle;}

Don't like the progress bar

Add the follwing line to custom CSS with the default css file-

@import url("https://prayag17.github.io/JellySkin/progress-bar.css");

Here are some images:

Login Page

Home screen:

Library View

Title screen:

TV Shows Season Episode list:

Settings

Dashboard

Plugins

Dialogs

Wanna Contribute?

• Fork this Repo
• Add your features
• Create a Pull Request
• Wait for it to be merged.

Enabling backdrop-filter in firefox

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.

If you have blocked google fonts then Icons won't load so here is a fix for is

Note: Icons will load slowly as compared to before

@import url("https://prayag17.github.io/Jellyfin-Icons/github-hosted/Outline.css");