boris/ElegantFin
1
0 Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2026-10-26 17:39:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

dev: updated formatting

Browse Source
This commit is contained in:
lscambo13 committed 2026-07-19 16:36:14 +05:30
1 parent 50e5ec40b0
commit d325f4ed63
5 files changed
+402 -398
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

custom-media-covers.md
+178 -183
View File
@@ -11,148 +11,149 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
<details>
<summary><i>This is how the covers look without this add-on.</i></summary>
![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
> ![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
</details>
<details>
<summary><i>This is how they look with this add-on, by default.</i></summary>
![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06)
```
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
```
> ![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06)
>
> ```css
> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
> ```
</details>
<details>
<summary><i>You can also change these covers.</i></summary>
![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79)
> ![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79)
>
</details>
<details>
<summary><i>You can achieve a minimal design too.</i></summary>
![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372)
```
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
:root{
--colorOverlayMoviesCover: transparent;
--colorOverlayTvshowsCover: transparent;
--colorOverlayLivetvCover: transparent;
--colorOverlayPlaylistsCover: transparent;
--colorOverlayBoxsetsCover: transparent;
--colorOverlayMusicCover: transparent;
--colorOverlayHomevideosCover: transparent;
--colorOverlayBooksCover: transparent;
--colorOverlayFoldersCover: transparent;
--colorOverlayMixedCover: transparent;
--colorOverlayRecordedmoviesCover: transparent;
--colorOverlayRecordedtvCover: transparent;
--colorOverlayAnimeCover: transparent;
--colorOverlaySportsCover: transparent;
--urlMoviesCover: transparent;
--urlTvshowsCover: transparent;
--urlLivetvCover: transparent;
--urlPlaylistsCover: transparent;
--urlBoxsetsCover: transparent;
--urlMusicCover: transparent;
--urlHomevideosCover: transparent;
--urlBooksCover: transparent;
--urlFoldersCover: transparent;
--urlMixedCover: transparent;
--urlRecordedmoviesCover: transparent;
--urlRecordedtvCover: transparent;
--urlAnimeCover: transparent;
--urlSportsCover: transparent;
}
```
<hr>
![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174)
```
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
:root{
--colorOverlayMoviesCover: transparent;
--colorOverlayTvshowsCover: transparent;
--colorOverlayLivetvCover: transparent;
--colorOverlayPlaylistsCover: transparent;
--colorOverlayBoxsetsCover: transparent;
--colorOverlayMusicCover: transparent;
--colorOverlayHomevideosCover: transparent;
--colorOverlayBooksCover: transparent;
--colorOverlayFoldersCover: transparent;
--colorOverlayMixedCover: transparent;
--colorOverlayRecordedmoviesCover: transparent;
--colorOverlayRecordedtvCover: transparent;
--colorOverlayAnimeCover: transparent;
--colorOverlaySportsCover: transparent;
--urlMoviesCover: var(--cardBackgroundGradient);
--urlTvshowsCover: var(--cardBackgroundGradient);
--urlLivetvCover: var(--cardBackgroundGradient);
--urlPlaylistsCover: var(--cardBackgroundGradient);
--urlBoxsetsCover: var(--cardBackgroundGradient);
--urlMusicCover: var(--cardBackgroundGradient);
--urlHomevideosCover: var(--cardBackgroundGradient);
--urlBooksCover: var(--cardBackgroundGradient);
--urlFoldersCover: var(--cardBackgroundGradient);
--urlMixedCover: var(--cardBackgroundGradient);
--urlRecordedmoviesCover: var(--cardBackgroundGradient);
--urlRecordedtvCover: var(--cardBackgroundGradient);
--urlAnimeCover: var(--cardBackgroundGradient);
--urlSportsCover: var(--cardBackgroundGradient);
}
```
> ![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372)
>
> ```css
> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
>
> :root {
> --colorOverlayMoviesCover: transparent;
> --colorOverlayTvshowsCover: transparent;
> --colorOverlayLivetvCover: transparent;
> --colorOverlayPlaylistsCover: transparent;
> --colorOverlayBoxsetsCover: transparent;
> --colorOverlayMusicCover: transparent;
> --colorOverlayHomevideosCover: transparent;
> --colorOverlayBooksCover: transparent;
> --colorOverlayFoldersCover: transparent;
> --colorOverlayMixedCover: transparent;
> --colorOverlayRecordedmoviesCover: transparent;
> --colorOverlayRecordedtvCover: transparent;
> --colorOverlayAnimeCover: transparent;
> --colorOverlaySportsCover: transparent;
> --urlMoviesCover: transparent;
> --urlTvshowsCover: transparent;
> --urlLivetvCover: transparent;
> --urlPlaylistsCover: transparent;
> --urlBoxsetsCover: transparent;
> --urlMusicCover: transparent;
> --urlHomevideosCover: transparent;
> --urlBooksCover: transparent;
> --urlFoldersCover: transparent;
> --urlMixedCover: transparent;
> --urlRecordedmoviesCover: transparent;
> --urlRecordedtvCover: transparent;
> --urlAnimeCover: transparent;
> --urlSportsCover: transparent;
> }
> ```
>
> <hr>
>
> ![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174)
>
> ```css
> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
>
> :root {
> --colorOverlayMoviesCover: transparent;
> --colorOverlayTvshowsCover: transparent;
> --colorOverlayLivetvCover: transparent;
> --colorOverlayPlaylistsCover: transparent;
> --colorOverlayBoxsetsCover: transparent;
> --colorOverlayMusicCover: transparent;
> --colorOverlayHomevideosCover: transparent;
> --colorOverlayBooksCover: transparent;
> --colorOverlayFoldersCover: transparent;
> --colorOverlayMixedCover: transparent;
> --colorOverlayRecordedmoviesCover: transparent;
> --colorOverlayRecordedtvCover: transparent;
> --colorOverlayAnimeCover: transparent;
> --colorOverlaySportsCover: transparent;
> --urlMoviesCover: var(--cardBackgroundGradient);
> --urlTvshowsCover: var(--cardBackgroundGradient);
> --urlLivetvCover: var(--cardBackgroundGradient);
> --urlPlaylistsCover: var(--cardBackgroundGradient);
> --urlBoxsetsCover: var(--cardBackgroundGradient);
> --urlMusicCover: var(--cardBackgroundGradient);
> --urlHomevideosCover: var(--cardBackgroundGradient);
> --urlBooksCover: var(--cardBackgroundGradient);
> --urlFoldersCover: var(--cardBackgroundGradient);
> --urlMixedCover: var(--cardBackgroundGradient);
> --urlRecordedmoviesCover: var(--cardBackgroundGradient);
> --urlRecordedtvCover: var(--cardBackgroundGradient);
> --urlAnimeCover: var(--cardBackgroundGradient);
> --urlSportsCover: var(--cardBackgroundGradient);
> }
> ```
</details>
<details>
<summary><i>Need something in between?</i></summary>
![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
```
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
:root{
--colorOverlayMoviesCover: rgb(193, 103, 104);
--colorOverlayTvshowsCover: rgb(140, 149, 43);
--colorOverlayLivetvCover: rgb(17, 98, 159);
--colorOverlayPlaylistsCover: rgb(118, 61, 216);
--colorOverlayBoxsetsCover: rgb(219, 180, 53);
--colorOverlayMusicCover: rgb(11, 93, 72);
--colorOverlayHomevideosCover: rgb(39, 90, 185);
--colorOverlayBooksCover: rgb(166, 68, 70);
--colorOverlayFoldersCover: rgb(173, 60, 113);
--colorOverlayMixedCover: rgb(194, 58, 58);
--colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
--colorOverlayRecordedtvCover: rgb(120, 100, 28);
--colorOverlayAnimeCover: rgb(189, 203, 99);
--colorOverlaySportsCover: rgb(233, 126, 60);
--urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
--urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
--urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
--urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%);
--urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%);
--urlMusicCover: linear-gradient(0deg, #313131, #585858 25%);
--urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
--urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
--urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
--urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
--urlRecordedmoviesCover: 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%);
}
```
> ![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
>
> ```css
> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
>
> :root {
> --colorOverlayMoviesCover: rgb(193, 103, 104);
> --colorOverlayTvshowsCover: rgb(140, 149, 43);
> --colorOverlayLivetvCover: rgb(17, 98, 159);
> --colorOverlayPlaylistsCover: rgb(118, 61, 216);
> --colorOverlayBoxsetsCover: rgb(219, 180, 53);
> --colorOverlayMusicCover: rgb(11, 93, 72);
> --colorOverlayHomevideosCover: rgb(39, 90, 185);
> --colorOverlayBooksCover: rgb(166, 68, 70);
> --colorOverlayFoldersCover: rgb(173, 60, 113);
> --colorOverlayMixedCover: rgb(194, 58, 58);
> --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
> --colorOverlayRecordedtvCover: rgb(120, 100, 28);
> --colorOverlayAnimeCover: rgb(189, 203, 99);
> --colorOverlaySportsCover: rgb(233, 126, 60);
> --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlMusicCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
> --urlRecordedmoviesCover: 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%);
> }
> ```
</details>
@@ -160,9 +161,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
### 👇 How to enable this add-on?
- Paste the following right after the main ElegantFin import in the Custom CSS code box:
- Paste the following right after the main ElegantFin import in the Custom CSS code box:
```
```css
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
```
@@ -170,74 +171,67 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
### ⚙️ How to configure this add-on?
- Remember, you do not need to configure anything if you're happy with the default set of images.
- Remember, you do not need to configure anything if you're happy with the default set of images.
<details>
<summary><i>Click here to reveal.</i></summary>
- To configure your theme to use the custom images, you'll need to input a URL pointing to an image in variables starting with '--url' and an overlay color in variables starting with '--color'.
- The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`.
- Below are all the configurable variables, but you should remove the entries you do not intend to modify:
```
> - To configure your theme to use the custom images, you'll need to input a URL pointing to an image in variables starting with '--url' and an overlay color in variables starting with '--color'.
>
> - The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`.
>
> - Below are all the configurable variables, but you should remove the entries you do not intend to modify:
>
> ```css
> :root{
> <!-- overlay colors; change according to your image. -->
> --colorOverlayMoviesCover: rgb();
> --colorOverlayTvshowsCover: rgb();
> --colorOverlayLivetvCover: rgb();
> --colorOverlayPlaylistsCover: rgb();
> --colorOverlayBoxsetsCover: rgb();
> --colorOverlayMusicCover: rgb();
> --colorOverlayHomevideosCover: rgb();
> --colorOverlayBooksCover: rgb();
> --colorOverlayFoldersCover: rgb();
> --colorOverlayMixedCover: rgb();
> --colorOverlayRecordedmoviesCover: rgb();
> --colorOverlayRecordedtvCover: rgb();
> --colorOverlayAnimeCover: rgb();
> --colorOverlaySportsCover: rgb();
>
> <!-- cover images; input the url pointing to an image. -->
> --urlMoviesCover: url();
> --urlTvshowsCover: url();
> --urlLivetvCover: url();
> --urlBoxsetsCover: url();
> --urlMusicCover: url();
> --urlHomevideosCover: url();
> --urlBooksCover: url();
> --urlFoldersCover: url();
> --urlMixedCover: url();
> --urlRecordedmoviesCover: url();
> --urlRecordedtvCover: url();
> --urlAnimeCover: url();
> --urlSportsCover: url();
> }
> ```
:root{
<!-- overlay colors; change according to your image. -->
--colorOverlayMoviesCover: rgb();
--colorOverlayTvshowsCover: rgb();
--colorOverlayLivetvCover: rgb();
--colorOverlayPlaylistsCover: rgb();
--colorOverlayBoxsetsCover: rgb();
--colorOverlayMusicCover: rgb();
--colorOverlayHomevideosCover: rgb();
--colorOverlayBooksCover: rgb();
--colorOverlayFoldersCover: rgb();
--colorOverlayMixedCover: rgb();
--colorOverlayRecordedmoviesCover: rgb();
--colorOverlayRecordedtvCover: rgb();
--colorOverlayAnimeCover: rgb();
--colorOverlaySportsCover: rgb();
<!-- cover images; input the url pointing to an image. -->
--urlMoviesCover: url();
--urlTvshowsCover: url();
--urlLivetvCover: url();
--urlBoxsetsCover: url();
--urlMusicCover: url();
--urlHomevideosCover: url();
--urlBooksCover: url();
--urlFoldersCover: url();
--urlMixedCover: url();
--urlRecordedmoviesCover: url();
--urlRecordedtvCover: url();
--urlAnimeCover: url();
--urlSportsCover: url();
}
```
</details>
<hr>
### 🆗 Read this example:
Suppose you want to modify the Live TV cover art. You'll have to modify the variables named `--colorOverlayLivetvCover` and `--urlLivetvCover`, so that your final configuration will look something like this:
```
```css
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
:root{
--colorOverlayLivetvCover: rgb(39, 68, 185);
--urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
:root {
--colorOverlayLivetvCover: rgb(39, 68, 185);
--urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
}
```
<hr>
@@ -245,19 +239,20 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
<details>
<summary><i>Detailed steps for server-side implementation</i></summary>
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
> 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
</details>
<details>
<summary><i>Detailed steps for client-side implementation</i></summary>
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.
</details>
> 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.
</details>