diff --git a/Add-Ons.md b/Add-Ons.md index 2e429cd..fe83020 100644 --- a/Add-Ons.md +++ b/Add-Ons.md @@ -5,12 +5,91 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
-### 🖼️ Preview +### 🖼️ Presets
- Click here to reveal - - + This is how the covers look without this add-on. + +![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6) + +
+ +
+ This is how they look with this add-on, by default. + +![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-nightly-min.css"); +``` + +
+ +
+ You can also change these covers. + +![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79) + +
+ +
+ You can achieve a minimal design too. + +![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-nightly-min.css"); + +:root{ + --colorOverlayMoviesCover: transparent; + --colorOverlayTvshowsCover: transparent; + --colorOverlayLivetvCover: transparent; + --colorOverlayPlaylistsCover: transparent; + --colorOverlayBoxsetsCover: transparent; + --colorOverlayMusicCover: transparent; + --colorOverlayHomevideosCover: transparent; + --colorOverlayBooksCover: transparent; + --colorOverlayFoldersCover: transparent; + --urlMoviesCover: transparent; + --urlTvshowsCover: transparent; + --urlLivetvCover: transparent; + --urlPlaylistsCover: transparent; + --urlBoxsetsCover: transparent; + --urlMusicCover: transparent; + --urlHomevideosCover: transparent; + --urlBooksCover: transparent; + --urlFoldersCover: transparent; +} +``` + +
+ +![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-nightly-min.css"); + +:root{ + --colorOverlayMoviesCover: transparent; + --colorOverlayTvshowsCover: transparent; + --colorOverlayLivetvCover: transparent; + --colorOverlayPlaylistsCover: transparent; + --colorOverlayBoxsetsCover: transparent; + --colorOverlayMusicCover: transparent; + --colorOverlayHomevideosCover: transparent; + --colorOverlayBooksCover: transparent; + --colorOverlayFoldersCover: 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); +} +```
@@ -26,16 +105,23 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
-### ⚙️ How to modify this add-on? +### ⚙️ How to configure this add-on? +- Remember, you do not need to configure anything if you're happy with the default set of images. + + + +
+ Click here to reveal. + - 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 should 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: - - + ``` + :root{ @@ -63,6 +149,10 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This } ``` +
+ +
+ ### 🆗 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: