New: Updated README.md with a banner

Fix: Revised the readme.md content and added a missing screenshot
This commit is contained in:
lscambo13
2025-07-27 20:39:13 +05:30
parent 3c3273d766
commit f15ad0d2cd
4 changed files with 50 additions and 22 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 340 KiB

View File

@@ -1,5 +1,8 @@
# ElegantFin Theme <!-- Banner Image -->
This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. <img src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/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 TV, desktop, and mobile, with just one import.
#### **Author:** [lscambo13](https://github.com/lscambo13) #### **Author:** [lscambo13](https://github.com/lscambo13)
@@ -7,11 +10,13 @@ This is a Jellyfin theme inspired from Jellyseerr to improve the overall look an
<hr> <hr>
### ✨ Key Features ### ✨ Key Features
- modern layouts and colors - modern layouts and color tones
- new animations on some elements - same clean design across phone, desktop, and TV
- reduced clutter by hiding unimportant buttons and elements - new and improved animations on most elements
- overall rounded design - rounded corners and even spacing everywhere
- stylish borders, hover effects and shadows - stylish borders, hover effects and shadows
- neat layout that puts important stuff up front
- reduced unnecessary clutter
- various fixes to the user experience - various fixes to the user experience
<hr> <hr>
@@ -20,7 +25,7 @@ This is a Jellyfin theme inspired from Jellyseerr to improve the overall look an
Captured on ElegantFin v25.07.27 Captured on ElegantFin v25.07.27
<details> <details>
<summary> 💻 📱<i>Click here to reveal desktop and mobile previews</i></summary> <summary> 💻 <i>Desktop and </i>📱 <i>Mobile previews</i></summary>
| Desktop | Mobile | | Desktop | Mobile |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
@@ -48,7 +53,7 @@ Captured on ElegantFin v25.07.27
</details> </details>
<details> <details>
<summary> 📺 <i>Click here to reveal TV previews</i></summary> <summary> 📺 <i>TV previews</i></summary>
| TV View | | TV View |
| ------------------------------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------------------------------------------- |
@@ -131,14 +136,7 @@ Captured on ElegantFin v25.07.27
</details> </details>
<details> <details>
<summary><i>3. Bring back the home button in the app header</i></summary> <summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary>
- Read more about steps [here](https://github.com/lscambo13/ElegantFin/issues/51)
</details>
<details>
<summary><i>4. Enable extra overlay buttons on cards on desktop</i></summary>
- 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. - 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.
``` ```
@@ -150,7 +148,7 @@ Captured on ElegantFin v25.07.27
</details> </details>
<details> <details>
<summary><i>5. Place the overlay play button at the center of cards on desktop</i></summary> <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>
- 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. - 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.
``` ```
@@ -161,6 +159,30 @@ Captured on ElegantFin v25.07.27
- To undo this change, simply remove this code block or replace `50%` with `2.8em`. - To undo this change, simply remove this code block or replace `50%` with `2.8em`.
</details> </details>
<details>
<summary><i>5. Disable the card hover effect on desktop</i></summary>
- 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 `""`.
</details>
<details>
<summary><i>6. Enable labels below library cards</i></summary>
- 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`.
</details>
<hr> <hr>
### 🆗 Tested on ### 🆗 Tested on
@@ -171,7 +193,7 @@ Captured on ElegantFin v25.07.27
### 🛠️ Troubleshooting ### 🛠️ Troubleshooting
<details> <details>
<summary>1⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary> <summary>1⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. - 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 - It should be something like ElegantFin v25.07.XX
@@ -194,7 +216,13 @@ Captured on ElegantFin v25.07.27
</details> </details>
<details> <details>
<summary>4⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary> <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.
</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. - 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. - This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
@@ -208,7 +236,7 @@ Captured on ElegantFin v25.07.27
</details> </details>
<details> <details>
<summary>5️⃣ - <i>How do I report bugs/issues?</i></summary> <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. - 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). - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
@@ -216,7 +244,7 @@ Captured on ElegantFin v25.07.27
</details> </details>
<details> <details>
<summary>6️⃣ - <i>When can I expect another update?</i></summary> <summary>7️⃣ - <i>When can I expect another update?</i></summary>
- 🤷 - 🤷
</details> </details>
@@ -228,4 +256,4 @@ Captured on ElegantFin v25.07.27
Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests. Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.
## 🙏 FEEDBACK APPRECIATED ### 🙏 Feedback Appreciated

BIN
Theme/assets/img/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB