From bd0d1cc34dc5db10a9f018f259ef187b61dda0fb Mon Sep 17 00:00:00 2001
From: lscambo13 <32175188+lscambo13@users.noreply.github.com>
Date: Sun, 19 Jan 2025 19:56:56 +0530
Subject: [PATCH] Update Add-Ons.md

---
 Add-Ons.md | 104 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 97 insertions(+), 7 deletions(-)

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
 
 <hr>
 
-### 🖼️ Preview
+### 🖼️ Presets
 
 <details>
-  <summary><i>Click here to reveal</i></summary>
-  
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/10.%20My%20Media%20Cover%20Arts.png" style="width:720px;height:auto;"></img>
+  <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)
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-nightly-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)
+
+```
+@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;
+}
+```
+
+<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-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);
+}
+```
 
 </details>
 
@@ -26,16 +105,23 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 <hr>
 
-### ⚙️ 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.
+
+
+
+<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 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{
 
     <!-- overlay colors; change according to your image. -->
@@ -63,6 +149,10 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 }
 ```
+</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: