better-jellyfin-ui

KO | EN

gitlite — search

#python #ai #typescript #solidity #cli #react #web3 #golang #llm #smart-contracts #command-line #developer-tools

better-jellyfin-ui

★ 52 Open GitHub ↗

a better user interface for jellyfin.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![error logo not found path: https://github.com/tromoSM/better-jellyfin-ui/blob/main/Assets/fullbannergit.png?raw=true . DEV NOTE DO NOT CHANGE TO RELATIVE.PROJECT MANAGER WILL FAIL](https://github.com/tromoSM/better-jellyfin-ui/blob/main/Assets/fullbannergit.png?raw=true)
===
# Better Jellyfin UI

A modern UI enhancement theme for Jellyfin focused on cleaner layout, smoother animations, and ios like design.

---
[![](https://data.jsdelivr.com/v1/package/gh/tromoSM/better-jellyfin-ui/badge?style=rounded)](https://www.jsdelivr.com/package/gh/tromoSM/better-jellyfin-ui)
## Installation

Go to:

Dashboard → General → Branding → Custom CSS

Paste:

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/theme.css");
```
Click **Save** and refresh the page.

> [!TIP]
> ### For firefox users
> make sure to enable `layout.css.backdrop-filter.enabled` and `gfx.webrender.all` to true in `about:config` to be able to see the blur effect. [detailed tutorial on how to enable backdrop blur](https://shounak.hashnode.dev/how-to-enable-backdrop-filter-in-firefox)
 
---

# Optional Add-ons

All add-ons require the main theme to be installed first.

You can combine multiple add-ons together.

---
<details>
 <summary>Custom cover images</summary>
 <img width="1284" height="148" alt="plugin-isprimCov" src="https://github.com/user-attachments/assets/c5e3cf83-aace-4f67-8600-8d006ad063ee" />

<ul>
 <li>Go <a href="https://github.com/tromoSM/better-jellyfin-ui/tree/main/images">Images</a></li>
 <li>Download and Replace the jellyfin libraries primary cover images with the images in <a href="https://github.com/tromoSM/better-jellyfin-ui/tree/main/images">Images</a></li>
 </ul>
</details>
<details>
<summary> Floating Header</summary>

### Description
Makes the top navigation header float with improved spacing and cleaner visual separation.

### Preview
![Floating Header](https://github.com/tromoSM/better-jellyfin-ui/blob/main/options/screenshots/headr.png?raw=true)

### Installation

Add below the main theme import:

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Floating-header.css");
```

</details>

<details>
<summary> High Contrast Interface</summary>

### Description
Improves readability by increasing contrast across interface elements.

### Preview

https://github.com/user-attachments/assets/bb46422f-92ae-41e6-8535-e02880d1867a

### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/High-contrast-interface.css");
```

</details>

<details>
<summary> Scale Up Background Animation on Card Hover</summary>

### Description
Adds a subtle scale animation effect to card backgrounds on hover.

### Preview

https://github.com/user-attachments/assets/899687a8-5201-43ab-9ec6-7efa10e8d3a8

### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Scale-up-animation-on-hover-card.css");
```

</details>

<details>
<summary> Remove Liquid Glass Borders</summary>

### Description
Removes glass-style border effects for a flatter visual appearance.

### Preview

https://github.com/user-attachments/assets/56181924-8a25-4a21-b272-642b82cead16

### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/no-liquid-glass-borders.css");
```

</details>
<details>
 <summary>Alternative navigation bar</summary>

### Preview
  ![igv](https://github.com/tromoSM/better-jellyfin-ui/blob/main/options/screenshots/altrNav.png?raw=true)

### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/alternative-navigation-bar.css");
```
 
</details>
<details>
 <summary>Remove jellyfin logo from header</summary>

### Preview
 | before | after |
 |-|-|
 | ![better jellyfin ui plugin #7 : remove jellyfin logo from header](https://github.com/user-attachments/assets/704dda3e-baa1-4e03-aa67-d6794345d05f) | ![better jellyfin ui plugin #7 : remove jellyfin logo from header](https://github.com/user-attachments/assets/50b566cf-7b77-4777-8567-fe492fb11692) |

### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Remove-jellyfin-logo-from-header.css");
```

</details>
<details>
 <summary>Alternative detail logo</summary>

### Preview
  | before | after |
  |-|-|
  | ![better jellyfin ui plugin #7 : remove jellyfin logo from header](https://github.com/user-attachments/assets/02854392-10a5-475a-aa9a-4648e1e37de2) | ![better jellyfin ui plugin #7 : remove jellyfin logo from header](https://github.com/user-attachments/assets/a4820e12-8557-4dd8-ade1-412bdf39e3e9) |

### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/alternative-detail-logo.css");
```
 
</details>
<details>
 <summary>TrickPlay support</summary>
 
 ##### reported by [@0belous](https://github.com/0belous)
 ### Installation

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Trickplay-support.css");
```
 
</details>
 
<details id='manual'>
 <summary>Manual options</summary>
 
 Customize the variables below to suit your preferences. Once edited, paste the code after all existing imports in Dashboard → General → Branding → Custom CSS.
 
 ```css
:root{
 /*active card indicators*/
 --card-indicate-bg:rgba(255, 169, 184, 0.534);
 --card-indicate-liquid-glass:rgba(253, 185, 255, 0.39) ;
 --card-indicate-shadow:rgba(255, 154, 238, 0.329);
 --card-indicate-icon-fill:#ffb0d9;
 /*Backgound*/
 --background-glow-color:#240000;
 /*Backdrop image styling*/
 --backdrop-bg-color:rgba(0, 0, 0, 0.87);
 --backdrop-filter:blur(20px) saturate(120%) contrast(120%) brightness(110%);

/*Blur value - requested by @Aceman67*/
 --extra-frosted:50px; /*extra frosted ui: panels,headers etc*/
 --medium-frosted:20px;
 --largeui-frosted:15px;/*mostly used by large ui*/
 --smallui-frosted:10px;/*mostly used by smaller ui*/
 --lite-frosted:5px;/*also used by card animation*/
 --extrathin-frostlayer:2px;
}
 ```
</details>

# Example Combined Setup

```css
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/theme.css");
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Floating-header.css");
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Scale-up-animation-on-hover-card.css");
```

---

# Compatibility

• Designed for Jellyfin Web, desktop and mobile client
• Some animations might not work as expected on desktop(not web) client.
• TV client does not support custom css
• Add-ons can be combined freely

---

###### [send feedback or request features](https://tromosm.gt.tc/?feedback=true)
###### © 2026 - tromoSM. Licensed under Apache 2.0.

better-jellyfin-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README