Fix: Center align the custom media covers

Fix: Do not hide labels on specific cards Fix: Border radius was getting reset on click on list items dev: Allow users to customise the My Media cover images
2025-09-18 12:40:16 +00:00 · 2025-01-19 16:41:43 +05:30
parent 8ec68237f0
commit c29351cb09
3 changed files with 219 additions and 18 deletions
--- a/Add-Ons.md
+++ b/Add-Ons.md
@@ -0,0 +1,91 @@
+# 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.
+
+
+#### **Author:** [lscambo13](https://github.com/lscambo13)
+
+<hr>
+
+
+### 🖼️ Previews
+
+<details>
+  <summary><i>Click here to reveal</i></summary>
+  
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:360px;height:auto;"></img>
+
+</details>
+
+<hr>
+
+### 👇 How to setup this theme? 
+
+<b>
+- 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'.
+- Default Jellyfin cover sizes are 960px x 540px.
+- The colors should be in rgb format i.e. rbg(128, 128, 128).
+- You should remove the entries you do not intend to modify.
+- paste the following at the end in Custom CSS code box after making the necessary changes:</b>
+
+'''
+
+	@import 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();
+
+    <!-- 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();
+}
+
+'''
+
+Suppose you want to modify the Live TV cover art. You'll have to modify the variables --colorOverlayLivetvCover and --urlLivetvCover, so that your configuration will look something like this:
+'
+	@import url("");
+
+  :root{
+    --colorOverlayLivetvCover: rgb(39, 68, 185);
+    --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
+}
+
+'
+<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>
+
+
+<hr>
+
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -1,5 +1,8 @@
 /* ElegantFin Theme for Jellyfin by lscambo13 */

+/* Add-ons: Uncomment to enable */
+/* @import url(""); */
+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
@@ -39,8 +42,12 @@
    --smallRadius: .5em;
    --smallerRadius: .375em;
    --borderWidth: 0.075em;
+
+    /* login page customizations */
    --loginPageBgUrl: url("");
    --loginPageText: "Sign in to continue";
+
+    /* my media library default covers customizations */
    --colorOverlayMoviesCover: rgb(193, 103, 104);
    --colorOverlayTvshowsCover: rgb(140, 149, 43);
    --colorOverlayLivetvCover: rgb(17, 98, 159);
@@ -61,6 +68,19 @@
    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
 }

+/* :root{
+    --urlMoviesCover: url(https://artworks.thetvdb.com/banners/v4/movie/159/backgrounds/6328557507dd4.jpg);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
+    --urlPlaylistsCover: url(https://m.media-amazon.com/images/M/MV5BMzRjMjgwMTUtMjNiOS00ZWJlLWJkODktZTU5NmQ5Y2UxZDA3XkEyXkFqcGc@._V1_QL75_UX820_.jpg);
+    --urlBoxsetsCover: url(https://artworks.thetvdb.com/banners/v4/movie/155/backgrounds/671ae49f9c44f.jpg);
+    --urlMusicCover: url(https://artworks.thetvdb.com/banners/v4/movie/223419/backgrounds/614203ff892f8.jpg);
+    --urlHomevideosCover: url(https://artworks.thetvdb.com/banners/v4/movie/132448/backgrounds/646b4c94e9b29.jpg);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+} */
+
+
 html {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
@@ -1170,6 +1190,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 .listItem:hover,
 .navMenuOption:hover {
    background: unset;
+    border-radius: var(--smallRadius);
 }

 .listItem:active,
@@ -1757,28 +1778,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
    text-align: left;
 }

-div[data-isfolder="true"] .cardPadder-overflowBackdrop {
+.card-withuserdata[data-isfolder="true"] .cardPadder-overflowBackdrop {
    padding-bottom: 50%;
 }

-div[data-isfolder="true"] .cardText-first {
-    display: none;
-}
-
-div[data-isfolder="true"] .cardImageIcon.material-icons::before {
-    display: none;
-}
-
-/* To override images on all, use .cardContent instead of .defaultCardBackground */
-/* Default Jellyfin cover sizes are 960px x 540px */
-
-div[data-isfolder="true"] .cardImageContainer.defaultCardBackground::before {
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent::before {
    position: absolute;
    font-size: 3.5vh;
    margin-bottom: .175em;
    font-weight: 800;
    color: white;
    font-family: 'Noto Sans';
+    text-align: center;
+}
+
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardText-first,
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardText.cardTextCentered,
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before {
+    display: none;
+}
+
+.padded-right-withalphapicker .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) {
+    margin-bottom: -1.5em;
 }

 div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
@@ -1826,10 +1847,10 @@ div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
    background-image: var(--urlPlaylistsCover) !important;
 }

-div[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
    filter: contrast(0.85);
    background-size: cover !important;
-    background-position-y: 50% !important;
+    background-position: 50% !important;
    background-blend-mode: multiply;
 }

@@ -1869,7 +1890,7 @@ div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground::
    content: "Playlists";
 }

-div[data-collectiontype="movies"] .cardImageContainer,
+/* div[data-collectiontype="movies"] .cardImageContainer,
 div[data-collectiontype="tvshows"] .cardImageContainer,
 div[data-collectiontype="livetv"] .cardImageContainer,
 div[data-collectiontype="boxsets"] .cardImageContainer,
@@ -1878,5 +1899,5 @@ div[data-collectiontype="folders"] .cardImageContainer,
 div[data-collectiontype="books"] .cardImageContainer,
 div[data-collectiontype="homevideos"] .cardImageContainer,
 div[data-collectiontype="music"] .cardImageContainer {
-    /* mix-blend-mode: color-dodge; */
-}
+    mix-blend-mode: color-dodge;
+} */
--- a/Theme/assets/add-ons/custom-media-covers-nightly.css
+++ b/Theme/assets/add-ons/custom-media-covers-nightly.css
@@ -0,0 +1,89 @@
+/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+    content: "Movies";
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+    content: "TV Shows";
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
+    content: "Live TV";
+}
+
+div[data-collectiontype="music"] .cardImageContainer.cardContent::before {
+    content: "Music";
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before {
+    content: "Home Videos";
+}
+
+div[data-collectiontype="books"] .cardImageContainer.cardContent::before {
+    content: "Books";
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before {
+    content: "Collections";
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.cardContent::before {
+    content: "Folders";
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before {
+    content: "Playlists";
+}