1024mb / JellySkin

Vibrante/minimal Jellyfin CSS using custom Icons and more!!, created for Jellyfin web, can be used by just one line.

Home Page:http://prayag17.github.io/JellySkin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This fork is just a simple modification so it can be used locally in its entirety. There is no resource downloaded form the Internet, everything is included here, all the import calls have been replaced with local ones. The old theme hasn't been touched.
The Jellyfin Icons repo is included here and has also been modified.

You need three directories from Font Awesome Pro v5.15.3+ not included in this repo because of... legalities:

  • metadata
  • svgs
  • webfonts

These 3 directories should be copied to:

\Jellyfin-Icons\Font Awesome\

To use this locally you should download the repo and extract it to a JellySkin folder inside the jellyfin-web directory, that way you can import it using the lines below.
Unfortunately I haven't been able to make it work with Jellyfin Media Player unless the theme files are copied to the jellyfin-web of JMP.

Original readme with some modifications:

JellySkin



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

Note: To take full experience of this CSS on FireFox scroll down below to find the necessary settings.


How to use

To use the JellySkin theme copy the line below into "Dashboard -> General -> Custom CSS" and click save, it will apply immediately server-wide to all users on top of any theme they may be using. To remove the theme, clear the "Custom CSS" field and then click save.
  @import url("JellySkin/default.css");

To use Logos like the images given below use:

  @import url("JellySkin/addons/Logo.css");

Fix Performance

In JellySkin 11 it has been added a transparency gradient like CTalvio's Themes and just like his skin it has a performance issue on some devices, because of this it has been created a fix that remove all the transparency gradient in the skin.
@import url("JellySkin/addons/imp-per.css");

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

@import url("JellySkin/addons/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("JellySkin/addons/Gradients/seaGradient.css");
@import url("JellySkin/addons/Gradients/sunsetGradient.css");
@import url("JellySkin/addons/Gradients/mauveGradient.css");
@import url("JellySkin/addons/Gradients/nightSkyGradient.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;
  --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;
  --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("JellySkin/addons/progress-bar.css");

Here are some images:

Login Page

Home screen:

Library View

Title screen:

TV Shows Season Episode list:

Settings

Dashboard

Plugins

Dialogs



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.

How to get Logo

  • 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 by selecting Replace Metadata and scan
  • Done!

Background not working?

Many of you are facing issues that backdrop is not visible by default....this is not a JellySkin issue but rather Jellyfin issue, in Jellyfin Version 10.7.X backgrounds are disabled by defualt but you can enable them individually on you devices/client by going to:

SETTINGS --> DISPLAY --> ENABLE BACKDROPS/BACKGROUND.

Wanna Contribute?

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

About

Vibrante/minimal Jellyfin CSS using custom Icons and more!!, created for Jellyfin web, can be used by just one line.

http://prayag17.github.io/JellySkin


Languages

Language:CSS 100.0%