Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ShiniGandhi/JellyTheme

A heavily modified theme for Jellyfin
https://github.com/ShiniGandhi/JellyTheme

Last synced: 6 days ago
JSON representation

A heavily modified theme for Jellyfin

Awesome Lists containing this project

README 

        
# JellyTheme

### A heavily modified theme for Jellyfin with a very original name /s.



This is a theme based on [JellyFlix](https://github.com/prayag17/JellyFlix), which is a Netflix-style theme for Jellyfin, so obviously credit to **prayag17** for providing the base for this theme. Most changes can be made by just importing my CSS files, but things like moving the cast to be before the season list requires modification to some JavaScript files.



The theme is optimized for 1080p, but it should work well on 720p, 768p, 1440p and 4K. 

1440p might be okay, but for best results zoom 125% should be used.

4K is needs to be at 125% or 150% zoom. 

I'm still looking into solutions for that.



#### Known Issues

* Video does not show on Jellyfin Desktop.



## Installation Instuctions - Basic

#### NOTE - BEFORE INSTALLING

Any `@import` line that you add to your CSS **must** be at the very top of your custom CSS. otherwise the file will not be imported.



#### Theme Versions

Since this is my personal theme, it might change however I see fit. If you don't want these changes to affect you, please use the CSS files in the `static` directory, rather than `latest`. All fixes will be applied to both, but changes to how the interface looks will only be made to the files under `latest`.



### Required

Put these at the top of your custom CSS:

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/JellyTheme.css");

:root {

--accent:!important;

}

```

**Change `` to an actual color before pasting, otherwise you'll have no accent color.**

If you want a slightly cleaner UI, with no backdrop in the main menu and a few more things, use `JellyTheme-Cleaner.css` rather than `JellyTheme.css`.



If you don't use video backdrops, add this line to display a poster on mobile:

```css

.layout-mobile .primaryImageWrapper > img {

display:block!important;

}

```



### Optional

These must be added **before** the `:root {` line to work. 



#### Cleaner UI

If you want to have a cleaner UI, add this:

The following is removed: 

 - Play trailer button 

 - Rotten tomatoes rating 

 - User icon 

 - Cast button (still displayed on mobile) 

 - Display and Home Preferences in User Settings

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Cleaner-UI.css");

```



#### Resize Some Elements



If you want Continue Watching, Next Up and the list of seasons to be smaller, as shown in my screenshots, import this:

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Resize-Cards.css");

```

**Keep in mind that for this to work your home screen order must be as follow:**

* Section 1: My Media

* Section 2: Continue Watching

* Section 3 and under: Irrelevant



#### Right-to-Left Support



If your server's metadata is in Hebrew, Arabic (or any other language that is written right-to-left, import this:

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/RTL-Fix.css");

```



#### Revamped video player



If you want the revamped video player, optimized for most screen resolutions and scales, (screenshot below), import this:

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/PlayerRevamp.css");

```

![](/screenshots/PlayerRevamp.png)



#### Trimmed Quality Section



If you want to have a slightly less overwhelming quality menu (screenshot below), import this:

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/TrimmedQualitySection.css");

```

![](/screenshots/TrimmedQualitySection.png)

NOTE: This removes bitrates over 40Mbps (as well as 450kbps) and changes the names of everything as shown in the screenshot.Also, 720kbps was renamed to 0.5Mbps for simplicity's sake). Use this only if you're sure that's what you want.Also, the pop-up menu itself is positioned a little wonky atm, I'm looking into it.



#### Slim Active Devices



If you want slimmer Active Devices entries like here (At the moment this ~~only looks good in 1080p~~ looks great in 4K and 1440p, but not perfect in 1080p (how the turntables huh), still working on scaling it), Import this: 

![ ](/screenshots/Slim-ActiveDevices.png)

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Slim-ActiveDevices.css");

``` 



NOTE: The logo will be pretty low resolution because it's generating a low resolution image to begin with. If you want better quality logos, perform the following:



1. Open your `dashboard-dashboard.********************.bundle.js` file (asterisks are replaced with something specific to your instance, but this never changes after initial setup).

2. Find `tag:a.ParentLogoImageTag` and set the values of `maxHeight` and `maxWidth` to `500`.

3. Clear browser cache.



#### Modern Libraries



![ ](/screenshots/MainPageTabs.png)

![ ](/screenshots/LibraryTabs.png)

If you want to have a more modern look to the library list (more AppleTV-esque), import this:

```css

@import url("https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/New-Libraries.css");

```

Also, you may have noticed that in the screenshot I provided the search button was moved to the menu bar.

To do this, add the following to your `main.*******.bundle.js` file, right after `name: d.ZP.translate("Favorites")`:

```js

, { name: d.ZP.translate("Search"), href: 'search.html' }

```



## Installation Instuctions - Advanced Extras

These require modifying some of the JavaScript files that Jellyfin generates. They will be different for every instance, and probably with different names, so make sure you back up these files before making any changes. 

These work best if you're running Jellyfin inside a Docker container, so you can make sure the files won't get overwritten (which can cause issues if something major changes in Jellyfin). 

All files related to this section are located in `/usr/share/jellyfin/web/` if using a Docker container. I'm not sure where they are if using other types of installations.



**NOTE: If using a Docker container, you must copy these files to your filesystem and then add them as "read-only volumes" in your container configuration**

Example in a docker-compose file:

```

    volumes:

      - ./custom/main.********************.bundle.js:/usr/share/jellyfin/web/main.********************.bundle.js:ro

      - ./custom/itemDetails-index-html.********************.bundle.js:/usr/share/jellyfin/web/itemDetails-index-html.********************.bundle.js:ro

```

Keep in mind that if the file is not read-only Jellyfin might overwrite it at some point, which is why I suggest using Docker.



#### Force Backdrops

1. Open your `main.********************.bundle.js` file (asterisks are replaced with something specific to your instance, but this never changes after initial setup).

2. Find `enableBackdrops:function() {return _}` and change the `_` to `x`.

3. Clear browser cahce.



#### Force Video Backdrops

Before you do this, you **must** have a directory called `backdrops` with a video file in every movie or show you want to have a backdrop, otherwise Jellyfin won't know what to play.

1. Open your `main.********************.bundle.js` file (asterisks are replaced with something specific to your instance, but this never changes after initial setup).

2. Find `enableThemeVideos:function(){return _}` and change the `_` to 'x'.

3. Clear browser cache.



#### Cast List Position

1. Open your `itemDetails-index-html.********************.bundle.js` file (asterisks are replaced with something specific to your instance, but this never changes after initial setup).

2. Find the following line:

```

 
${HeaderCastAndCrew}
 
 
 
 


```

4. Cut it from the file and paste it before `