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
Files
2f9c727a5bbaff2f9732ff7825b9eabdfbd17e25
ElegantFin/custom-media-covers.md
T
lscambo13 d325f4ed63 dev: updated formatting
2026-07-19 16:36:14 +05:30

259 lines
9.4 KiB
Markdown
Raw Blame History

# 🧩 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.
#### **Author:** [lscambo13](https://github.com/lscambo13)
<hr>
### 🖼️ Presets with previews: Modify these styles according to your own liking
<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)
</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)
>
> ```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)
>
</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)
>
> ```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)
>
> ```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>
<hr>
### 👇 How to enable this add-on?
- 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");
```
<hr>
### ⚙️ How to configure this add-on?
- 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:
>
> ```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();
> }
> ```
</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);
}
```
<hr>
<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
</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>
Reference in new issue View Git Blame Copy Permalink