# JellySkin
### Vibrant, minimal, and sprinkled with tons of animations
CSS theme for Jellyfin
  \
# ℹ️ Usage :
- 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. NOTE: Theme may not work when using Nginx Reverse Proxy. Scroll down below to learn how to fix this.
```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");
```
- To enable Logos add this to custom css:
```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");
```
- You can also use Jellyfin-Skin-Manager-Plugin : https://github.com/danieladov/jellyfin-plugin-skin-manager
> **Note** : Jellyfin Skin Manager has not been updated for some time and doesn't have the latest JellySkin css available.
# 🧩 Addons :
- ## Improve Performance:
If you fix performace issues like stutter while normally browsing jellyfin while use JellySkin, try adding this to custom css to fix the issue:
```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance.css")
```
> **Warning** : This removes the background blur from dialogs, gradient scroll in and out "bars" and animated mesh gradient from login page (replaced by linear gradient animation)
- ## Compact Poster:
Want to use compact posters instead of normal cards, add this to your custom css:
```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
- ## Horizontal My Media:
Brings back the horizontal section for My Media
```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/horizontalMyMedia.css");
```
- ## Using/Changing default gradient accent:
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
```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/mauve.css");
```
Example:\
- ### NightSky
```css
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/nightSky.css");
```
Example:\
- ### Sea
```css
@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:
```css
: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);
}
```
# 💻 Screenshots :
- ### Login Page:
- ### Home Screen:
- ### Library View:
- ### Title Screen:
- ### Episode View:
- ### Settings:
- ### Dashboard:
- ### Dialog:
# ❓ Common Problem Fixes :
- ### Unable to see blured background 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
- ### Logos are not visible even with `logo.css`:
- 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
- ### Background not visible:
- Go to Settings -> Display -> and enable `Backdrops` option
- ### How to report a Bug or request a Feature?
- Go to https://github.com/prayag17/JellySkin/issues
- Click on `New Issue` button
- Select the appropriate template
- ### How to contribute:
- Fork this repository.
- Add your patch/feature
- Create a pull request and thats it