This commit is contained in:
lscambo13 committed 2026-06-06 23:39:55 +05:30
commit a2a05e1ab6
2 files changed
+41 -10

No files matched your search

+24 -5
View File
@@ -159,7 +159,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
</details> </details>
<details> <details>
<summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary> <summary><i>3. Enable or disable extra overlay buttons on cards on desktop</i></summary>
<img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" /> <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />
@@ -169,7 +169,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
--extraCardButtonsVisibility: block; --extraCardButtonsVisibility: block;
} }
``` ```
- To hide them again, simply remove this code block or replace `block` with `none`. - To hide the three-dot button that shows up next to these buttons, also include `--menuButtonVisibility: none;` in `:root{}`
- To undo these changes, simply remove this code block or switch between `block` and `none`.
</details> </details>
<details> <details>
@@ -260,6 +261,23 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
- You can also experiment and share your own take there if you wish. - You can also experiment and share your own take there if you wish.
</details> </details>
<details>
<summary><i>10. Increase the size of Continue Watching cards so that they stand out</i></summary>
<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/2222d5b1-00d8-4859-90fb-eeb14d488bbd" />
- You can adjust their scaling `--resumeCardScale`.
- Use any values over 1.0 to make them bigger.
```
:root{
--resumeCardScale: 1.25;
}
```
- To undo this change, simply remove this code block or set the value back to `1`.
</details>
<hr> <hr>
### 🆗 Tested on ### 🆗 Tested on
@@ -273,12 +291,13 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
### 🛠️ Troubleshooting ### 🛠️ Troubleshooting
<details> <details>
<summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary> <summary>1️⃣ - <i>How do I check which version of ElegantFin I am using?</i></summary>
- Check the version number at the bottom in the Settings screen. - Check the version number at the bottom in the Settings screen.
- It should be something like `ElegantFin v25.XX.XX`. - It should be something like `ElegantFin v26.YY.ZZ`.
<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/c697f508-16db-4b1a-bfac-123decd943fa" />
<img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
</details> </details>
+17 -5
View File
@@ -1,4 +1,4 @@
# 🧩 Add-on: Custom media covers for ElegantFin # 🧩 Add-on: Custom Media Covers for ElegantFin
This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided. This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided.
@@ -54,6 +54,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--colorOverlayMixedCover: transparent; --colorOverlayMixedCover: transparent;
--colorOverlayRecordedmoviesCover: transparent; --colorOverlayRecordedmoviesCover: transparent;
--colorOverlayRecordedtvCover: transparent; --colorOverlayRecordedtvCover: transparent;
--colorOverlayAnimeCover: transparent;
--colorOverlaySportsCover: transparent;
--urlMoviesCover: transparent; --urlMoviesCover: transparent;
--urlTvshowsCover: transparent; --urlTvshowsCover: transparent;
--urlLivetvCover: transparent; --urlLivetvCover: transparent;
@@ -66,6 +68,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--urlMixedCover: transparent; --urlMixedCover: transparent;
--urlRecordedmoviesCover: transparent; --urlRecordedmoviesCover: transparent;
--urlRecordedtvCover: transparent; --urlRecordedtvCover: transparent;
--urlAnimeCover: transparent;
--urlSportsCover: transparent;
} }
``` ```
@@ -89,6 +93,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--colorOverlayMixedCover: transparent; --colorOverlayMixedCover: transparent;
--colorOverlayRecordedmoviesCover: transparent; --colorOverlayRecordedmoviesCover: transparent;
--colorOverlayRecordedtvCover: transparent; --colorOverlayRecordedtvCover: transparent;
--colorOverlayAnimeCover: transparent;
--colorOverlaySportsCover: transparent;
--urlMoviesCover: var(--cardBackgroundGradient); --urlMoviesCover: var(--cardBackgroundGradient);
--urlTvshowsCover: var(--cardBackgroundGradient); --urlTvshowsCover: var(--cardBackgroundGradient);
--urlLivetvCover: var(--cardBackgroundGradient); --urlLivetvCover: var(--cardBackgroundGradient);
@@ -101,6 +107,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--urlMixedCover: var(--cardBackgroundGradient); --urlMixedCover: var(--cardBackgroundGradient);
--urlRecordedmoviesCover: var(--cardBackgroundGradient); --urlRecordedmoviesCover: var(--cardBackgroundGradient);
--urlRecordedtvCover: var(--cardBackgroundGradient); --urlRecordedtvCover: var(--cardBackgroundGradient);
--urlAnimeCover: var(--cardBackgroundGradient);
--urlSportsCover: var(--cardBackgroundGradient);
} }
``` ```
@@ -127,6 +135,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--colorOverlayMixedCover: rgb(194, 58, 58); --colorOverlayMixedCover: rgb(194, 58, 58);
--colorOverlayRecordedmoviesCover: rgb(52, 52, 52); --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
--colorOverlayRecordedtvCover: rgb(120, 100, 28); --colorOverlayRecordedtvCover: rgb(120, 100, 28);
--colorOverlayAnimeCover: rgb(189, 203, 99);
--colorOverlaySportsCover: rgb(233, 126, 60);
--urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%); --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
--urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%); --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
--urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%); --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
@@ -139,6 +149,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--urlMixedCover: linear-gradient(0deg, #313131, #585858 25%); --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
--urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%); --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%);
--urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%); --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%);
--urlAnimeCover: linear-gradient(0deg, #313131, #585858 25%);
--urlSportsCover: linear-gradient(0deg, #313131, #585858 25%);
} }
``` ```
@@ -187,6 +199,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--colorOverlayMixedCover: rgb(); --colorOverlayMixedCover: rgb();
--colorOverlayRecordedmoviesCover: rgb(); --colorOverlayRecordedmoviesCover: rgb();
--colorOverlayRecordedtvCover: rgb(); --colorOverlayRecordedtvCover: rgb();
--colorOverlayAnimeCover: rgb();
--colorOverlaySportsCover: rgb();
<!-- cover images; input the url pointing to an image. --> <!-- cover images; input the url pointing to an image. -->
@@ -201,6 +215,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
--urlMixedCover: url(); --urlMixedCover: url();
--urlRecordedmoviesCover: url(); --urlRecordedmoviesCover: url();
--urlRecordedtvCover: url(); --urlRecordedtvCover: url();
--urlAnimeCover: url();
--urlSportsCover: url();
} }
@@ -245,7 +261,3 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
4. Click save. 4. Click save.
</details> </details>
<hr>
```