Changes:
- redesigned the side indicator dots
- tweaked the layout specifically for phones and TVs
- improved responsiveness on TV layout
- made parental rating font consistent with its siblings
- positioned it correctly for the experimental layout
- positioned the pause button in the top-right corner
- updated colors of dot separators
- tweaked its distance from the header on small screens
- Prevented header tabs from shifting up too early on TVs
- Updated the page padding-top to adjust in sync with header tabs position
- Made the page top padding aware of the header height to prevent overlaps
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">
# ⭐ 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.
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.
- Note: this customisation is not needed on Jellyfin 10.11.X anymore
- Note: this customisation is not needed on Jellyfin 10.11.X anymore
- On older Jellyfin versions, 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.
- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
- 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.
- On older Jellyfin versions, 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.
- 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`.
- 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`.
- 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`.
- 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`.
- 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.
- 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 `""`.
- To undo this change, simply remove this code block or replace `none` with `""`.
- 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.
- 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`.
- To undo this change, simply remove this code block or replace `block` with `none`.
- ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
- ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
<summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
- If the Settings footer shows an old version, it means that you are still using an old cache.
- Once that cache is updated, the new version will be loaded automatically.
- There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
- On the web version, you can 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.
- If the Settings footer shows an old version, it means that you are still using an old cache.
- Once that cache is updated, the new version will be loaded automatically.
- There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
- On the web version, you can 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.
</details>
<details>
<summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
- 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.
- 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.
</details>
<details>
<summary>4️⃣ - <i>Does it work on the AndroidTV version of the Jellyfin app?</i></summary>
- 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.
- 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.
</details>
<details>
<summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) 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';
}
```
</details>
- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) 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';
}
```
</details>
<details>
<summary>6️⃣ - <i>How do I report bugs/issues?</i></summary>
- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) 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](https://github.com/lscambo13/ElegantFin/issues/new/choose).
- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) 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](https://github.com/lscambo13/ElegantFin/issues/new/choose).
</details>
<details>
<summary>7️⃣ - <i>When can I expect another update?</i></summary>
Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.
### 🙏 Feedback Appreciated
Please use the right template when creating an [issue](https://github.com/lscambo13/ElegantFin/issues/new/choose) to [report bugs](https://github.com/lscambo13/ElegantFin/issues/new?template=bug_report.md) or [provide suggestions](https://github.com/lscambo13/ElegantFin/issues/new?template=feature_request.md).
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
