⭐ ElegantFin Theme

This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.

Author: lscambo13

---

✨ Key Features

• modern layouts and color tones
• new and improved animations on most elements
• rounded corners and even spacing everywhere
• stylish borders, hover effects and shadows
• neat layout that puts important stuff up front
• reduced unnecessary clutter
• various fixes to improve the user experience
• same clean design across phone, desktop, and TV

---

🖼️ Theme Showcase

Captured on ElegantFin v25.08.02

💻 Desktop and 📱 Mobile Screenshots

Desktop	Mobile
Login Page
Homepage
Movies Library
Movie Page
Movie Details
TV Show Page
TV Episode Page
TV Show Seasons
Web Player
Cast Page
Artist Page
Music Player
Book Page
Sidebar
Extra Dialog
Settings Page
Metadata Menu
Dashboard Settings
Live TV Page
Live TV Guide

📺 TV Screenshots

TV View
Login Page
Homepage
Movies Library
Movie Page
Extra Dialog
Settings Page
Web Player
TV Show Page
Movie Details
Book Page
Artist Page
Music Player
TV Show Seasons
Cast Page
TV Episode Page
Live TV Page
Live TV Guide

ElegantFin.v25.08.02.Video.Demo.mp4

---

👇 How to install/setup this theme?

Paste the following in Custom CSS code box:

@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");

Detailed steps for server-side implementation

1. Open Dashboard from Administration tab in Settings.
2. Select General tab from the side bar.
3. Scroll down to find Custom CSS code box under Branding section.
4. Paste the custom css in Custom CSS code box.
5. Click save

Detailed steps for client-side implementation

1. Open Display tab in Settings.
2. Scroll down to find Custom CSS code box.
3. Paste the custom css in Custom CSS code box.
4. Click save.

---

🧩 How to customise this theme?

1. Custom media covers for user media libraries

• Previews
• Read more about this experimental add-on here

2. Custom background image for the login page

• Preview
• To enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
• Second, copy and paste the following code at the end in Custom CSS box but don't save yet.

  :root{
    --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
  }
  

• Third, replace <YOUR-JELLYFIN-SERVER-ADDRESS> with your Jellyfin server address, for example, http://192.168.0.1:8097.
• Don't forget the correct http or https in your domain.
• You can also modify the parameters, for example blur size or the resolution, according to your liking.
• Once done, save and refresh your apps and webpages.

3. Enable extra overlay buttons on cards on desktop

• To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.

  :root{
    --extraCardButtonsVisibility: block;
  }
  

• To hide them again, simply remove this code block or replace block with none.

4. Place the overlay play button at the center of cards on desktop

• To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.

  :root{
    --overlayPlayButtonPosition: 50%;
  }
  

• To undo this change, simply remove this code block or replace 50% with 2.8em.

5. Disable the card hover effect on desktop

• To disable the reflection on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.

  :root{
    --cardHoverEffect: none;
  }

• To undo this change, simply remove this code block or replace none with "".

6. Enable labels below library cards

• To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.

  :root{
    --libraryLabelVisibility: block;
  }

• To undo this change, simply remove this code block or replace block with none.

7. Enable experimental support for the Media Bar plugin

• ElegantFin does not support any plugins by default, so to to add external support for this plugin, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.

	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");

• To undo this change, simply remove this code block.

---

🆗 Tested on

• Jellyfin Server v10.10.6
• Jellyfin Android App v2.6.2

---

🛠️ Troubleshooting

1️⃣ - How do I check if I am using the latest version of ElegantFin?

• To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen.
• It should be something like ElegantFin v25.07.XX

2️⃣ - I see that a newer version is available, but I have not received it yet. Why?

• If Dashboard footer shows an old version, it means that your app is still using an old cache.
• Once that cache is updated, the new version will be loaded.
• To get the latest version, you will need to clear cache. There are multiple ways to do it.
• On web version, force a hard refresh of the page using CTRL + F5.
• On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.

3️⃣ - Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?

• As of version 1.12.0, JMP is based on Qt 5.x which uses a very outdated web engine, so it does not support many new CSS features. Once a new version based on Qt 6.x is released, most issues should automatically be resolved. Until then, JMP is unsupported and I recommend using the web app instead.

4️⃣ - Does it work on the AndroidTV version of the Jellyfin app?

• As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.

5️⃣ - All the icons on my LG TV seem to be broken. How to fix them?

• It seems that modern Material Icons which this theme uses are not compatible on some WebOS TVs. There is a huge similar thread about this.

• This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.

• Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:

  :root{
    --iconPack: 'Material Icons';
  }
  

6️⃣ - How do I report bugs/issues?

• First check here whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
• Alternatively, create a new issue here.

7️⃣ - When can I expect another update?

• 🤷

---

📌 Contributing

Please read the Contributor Guidelines before opening pull requests.

🙏 Feedback Appreciated

Please use the right template when creating an issue to report bugs or provide suggestions.