Show your theme/style

[_Mayhem_]

https://github.com/SalvaChiLlo/JellyfinTheme with library icons I stole from somewhere online.

I have a custom logo and the library wrap too

Custom logo at the top:

.adminDrawerLogo img { content: url(https:// MY PNG HERE ) !important; } imgLogoIcon { content: url(https:// MY PNG HERE ) !important; } .pageTitleWithLogo { background-image: url(https:// MY PNG HERE) !important; }

Followed by the wrap:

.section0 .itemsContainer {
  flex-wrap: wrap;
}

[M0RPH3US]

https://github.com/SalvaChiLlo/JellyfinTheme with library icons I stole from somewhere online.

I have a custom logo and the library wrap too

Custom logo at the top:

.adminDrawerLogo img { content: url(https:// MY PNG HERE ) !important; } imgLogoIcon { content: url(https:// MY PNG HERE ) !important; } .pageTitleWithLogo { background-image: url(https:// MY PNG HERE) !important; }

Followed by the wrap:

.section0 .itemsContainer {
  flex-wrap: wrap;
}

Those library thumbnails look dope. Can I request you to please share them.?

[JellyHunter]

https://github.com/SalvaChiLlo/JellyfinTheme with library icons I stole from somewhere online.

I have a custom logo and the library wrap too

Custom logo at the top:

.adminDrawerLogo img { content: url(https:// MY PNG HERE ) !important; } imgLogoIcon { content: url(https:// MY PNG HERE ) !important; } .pageTitleWithLogo { background-image: url(https:// MY PNG HERE) !important; }

Followed by the wrap:

.section0 .itemsContainer {
  flex-wrap: wrap;
}

Indeed, that would be really helpful, thank you!
Those library thumbnails look dope. Can I request you to please share them.?

[Ted Hinklater]

https://github.com/SalvaChiLlo/JellyfinTheme with library icons I stole from somewhere online.

I have a custom logo and the library wrap too

Custom logo at the top:

.adminDrawerLogo img { content: url(https:// MY PNG HERE ) !important; } imgLogoIcon { content: url(https:// MY PNG HERE ) !important; } .pageTitleWithLogo { background-image: url(https:// MY PNG HERE) !important; }

Followed by the wrap:

.section0 .itemsContainer {
  flex-wrap: wrap;
}

Those library thumbnails look dope. Can I request you to please share them.?

you can kinda do it with css

Code:

#homeTab .section0 .cardImageContainer::before {
  content: attr(aria-label);
  position: absolute;
  bottom: 0em;
  left: 0;
  font-size: 1.5em;
  font-weight: 400;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  padding: 0.2em 0.5em;
    padding-bottom: 0.2em;
  border-radius: 0em;
  z-index: 10;
  width: 93%;
  height: 7em;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(90deg, rgb(0% 0% 0%) 0%, rgb(0% 0% 0% / 0.9998779296875) 6.25%, rgb(0% 0% 0% / 0.998046875) 12.5%, rgba(0, 0, 0, 0.99) 18.75%, rgba(0, 0, 0, 0.97) 25%, rgba(0, 0, 0, 0.93) 31.25%, rgba(0, 0, 0, 0.84) 37.5%, rgba(0, 0, 0, 0.71) 43.75%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.29) 56.25%, rgba(0, 0, 0, 0.16) 62.5%, rgba(0, 0, 0, 0.08) 68.75%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.01) 81.25%, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 93.75%, rgba(0, 0, 0, 0) 100% );
  padding-bottom: 3.5em;
}

.verticalSection.section0 .textActionButton {
  display: none;
}

[Ted Hinklater]

[frankieknuckles]

Omg! I love you guys. Found this and had to create a user to reply. This thread really helped me find a style I actually love. 

Now, I hope I don't come off as a spoiled brat having others do it for me, but I'd really appreciate someone helping me on improving my personal experience with the jellyfin app. I'm mainly using the web interface since I do not have a smart tv or the like of it, so I wouldn't know or care how it looks in an actual "app". 

I've modified it slightly, but have some problems with a couple of stuff.... I have basically 0 knowledge of CSS and would love to get some help? I will do my best to illustrate what I mean with screenshots/images, since I don't really think I have the vocabulary to make myself understood in terms of coding.

Since this is quite a heavy post, I'm not sure if I should create my own thread for this? But here goes nothing:

This is how my homepage currently looks like: 
   

First thing I noticed was that the menu bars are not symmetric in the sides for some reason? The left side has no padding(?) between the border of the screen and the menu, while the right side looks right. 
   

Since I added my logo in the menu instead of jellyfin, it has empty space on the right side. I assume this is because the logo is added by CSS and therefor the jellyfin logo is still "underneath it. I was thinking that by removing the menu's background might make this easier on the eye? Though I like that when scrolling the menu goes blurry so that the menu is still visible. Any ideas?
       

On the "My Media" tab, the borders from the gradient doesnt go all the way, so there's some white showing in the rounded corner? Also, when hovering, the corners to the left gets straight edges, which I suppose is on purpose? Is it possible to remove all rounded corners instead? I like the black gradient. 
       

When I open the user page, it's kinda centered which feels a bit weird, is it possible to move it more to the left like the "hamburger" menu? So it feels a bit more synchronized. 
   

I feel the movie "header/logo" is superfluous along with the movie poster, is it possible to remove the header/logo part above? So it's not needed to scroll down so much. I dunno what a good solution for it to look neat along with the menus, maybe a black bar instead? I'm confused with myself. In case this is a settings issue; I can't really find an option for this, maybe I don't know the right term for it?
   

My login page is really weird. The menu is still there when logged out, just nothing in it when pushing the hamburger. It looks like this and I would like it to look like the second example.
       

And my last issue is basically the only coloring there is. The play button is a weak green on hover, and I'd prefer it just be inverted from the unhovered playbutton and be black/darkgrey like the background. 
       
The "mark played" hover seems right, but when it's flagged as played it goes red, which seems weird, and should be green instead, to keep it consistent with jellyfin's "watched" logo in the upper right corner of the movie. 
       


This is the "modified" code I'm using:

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');



/* Custom Google Font with more variety */

@import url(https://db.onlinewebfonts.com/c/42f9da2abdd3c2f1457f73eb85d2d6f6?family=IntervogueSoftAlt-Bold);



/* Root Variables for Custom Color Scheme */

:root {

    --custom-primary-color: #3498db;

    --custom-secondary-color: #2ecc71;

    --custom-accent-color: #e74c3c;

    --custom-background-dark: #1a1a2e;

    --custom-background-light: #16213e;

}


.adminDrawerLogo img { content: url(https://i.postimg.cc/VNwW5DJp/loggo.png) !important; } imgLogoIcon { content: url(https://i.postimg.cc/VNwW5DJp/loggo.png) !important; } .pageTitleWithLogo { background-image: url(https://i.postimg.cc/VNwW5DJp/loggo.png) !important; }


#homeTab .section0 .cardImageContainer::before {

  content: attr(aria-label);

  position: absolute;

  bottom: 0em;

  left: 0;

  font-size: 1.5em;

  font-weight: 400;

  color: white;

  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);

  padding: 0.2em 0.5em;

    padding-bottom: 0.2em;

 

  z-index: 10;

  width: 93%;

  height: 7em;

  display: flex;

  align-items: flex-end;

  background: linear-gradient(90deg, rgb(0% 0% 0%) 0%, rgb(0% 0% 0% / 0.9998779296875) 6.25%, rgb(0% 0% 0% / 0.998046875) 12.5%, rgba(0, 0, 0, 0.99) 18.75%, rgba(0, 0, 0, 0.97) 25%, rgba(0, 0, 0, 0.93) 31.25%, rgba(0, 0, 0, 0.84) 37.5%, rgba(0, 0, 0, 0.71) 43.75%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.29) 56.25%, rgba(0, 0, 0, 0.16) 62.5%, rgba(0, 0, 0, 0.08) 68.75%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.01) 81.25%, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 93.75%, rgba(0, 0, 0, 0) 100% );

  padding-bottom: 3.5em;

}



.verticalSection.section0 .textActionButton {

  display: none;

}


/* Enhanced Global Styling */

body, h1, h2, h3, h4 {

    font-family: 'Quicksand', sans-serif;

    letter-spacing: 0.5px;

    text-rendering: optimizeLegibility;

}



.emby-textarea {

    font-family: monospace;

    font-size: 10pt;

}



/* Unique Hover and Interaction Effects */

@media (hover: hover) and (pointer: fine) {

    .paper-icon-button-light:hover:not(:disabled) {

        color: var(--custom-secondary-color) !important;

        transform: scale(1.2) rotate(5deg);

        transition: all 0.3s ease;

    }

}



/* Enhanced Button Styles */

.emby-button {

    transition: all 0.3s ease;

   

    font-weight: 600;

}



#skipIntro {

    &.upNextContainer {

        background-color: transparent !important;

        backdrop-filter: none !important;

    }



    .emby-button {

       

        background-color: rgba(0, 0, 0, 0.7) !important;



        &:hover, &:focus {

            background-color: rgba(151, 151, 151, 0.7) !important;

        }

    }

}



#skipIntro .emby-button:hover {

    background: rgb(var(--accent));

    box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);

    filter: brightness(1.2);

    transform: translateY(-3px);

}



#skipIntro .emby-button:focus {

    background: rgb(var(--accent));

    box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);

}






.backdropContainer:hover {

    filter: brightness(1);

}



.detailRibbon {

    background: linear-gradient(to top, var(--custom-background-dark), transparent) !important;

}



.layout-desktop .detailPageContent {

    padding-left: 3.3% !important;

    padding-right: 3.3% !important;

}






@keyframes gradientBG {

    0% {background-position: 0% 50%;}

    50% {background-position: 100% 50%;}

    100% {background-position: 0% 50%;}

}



/* Card and Item Styling */

.listItemImage-large {

   

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: transform 0.3s ease;

}



.listItemImage-large:hover {

    transform: scale(1.05);

}



/* Slider and Progress Enhancements */

.mdl-slider::-webkit-slider-thumb {

    background: #fff;

}



.mdl-slider-background-flex {

    height: 9px !important;

    background: hsla(0,0%,100%,.15) !important;

    backdrop-filter: blur(15px);

}



/* Responsive Adjustments */

@media (max-width: 1599px) {

    .playlistContainer {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

        gap: 15px;

    }

}



/* Additional Unique Touches */

.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {

    background: #fff;

    font-family: 'Orbitron', sans-serif;

}



.layout-desktop .mainDetailButtons .btnPlay::after {

    content: "Play" !important;

}



/* Hide Unnecessary Elements */

.trackSelections,

.itemTags,

.itemExternalLinks,

.btnPlayTrailer,

.btnPlaystate,

.btnPreviousChapter,

.btnNextChapter,

.iconOsd,

.videoOsdBottom .buttons .mediaInfoCriticRating,

.videoOsdBottom .buttons .mediaInfoItem,

.mediaInfoCriticRatingFresh,

.mediaInfoCriticRatingRotten,

.alphaPicker {

    display: none;

}



/* Additional Mobile and Responsive Styles */

.layout-mobile .itemBackdrop {

    margin-top: 0px;

}



.layout-mobile .detailSectionContent {

    padding: 0px 20px !important;

}



.headerTabs {

    backdrop-filter: blur !important;

}



/* Other existing styles from the original theme */

.mainDetailButtons {

    margin-right: 3.3%;

}



.emby-scroller {

    margin-right: 0% !important;

}



/* Additional specific styles */

.selectionCommandsPanel {

    background-color: rgb(21, 21, 21) !important;

}



.sectionTabs {

    background: transparent !important;

}

/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
  max-width: 22em;
}

/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
  display: none;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
  margin-top: 50px;
}

/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
  display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  display: none;
}

If someone actually wants to help this poor boy with these changes, would it be much to ask for an updated code? I don't think I would be able to navigate myself through all these changes/fixes...

Thanks a bunch and the biggest of hugs from Sweden. 

F

[M0RPH3US]

Hello,

Could you share how you have your Jellyfin configured visually and in style ?
I am asking this because I realized that I am looking for a good theme on the internet, that is nice, minimalist and user friendly, however, there are themes that have 3 good things and 1 bad, there are others that have one good and 3 bad and so on, I have not found one that has everything good.

What imports do you use with your Jellyfin ? Is there a possibility that you show images and/or links to the Custom CSS section to get some ideas ?

Thanks in advance

Here is mine

HomeScreen


Movie Details 

TV Episodes

[Hunter]

Here's my theming/styling, can't promise it will look correct as I only used it on a single laptop using the web version, let me know if there are any issues. I got a lot of the code either through finding online posts by other people or through using inspect element and trying to figure stuff out randomly, then asking chatgpt for help if needed. I think I used code snippets from zombie css and scyfin plus a couple others so their hard work really helped me reach the final visual view I wanted. There's also a couple fixes for what I think are issues, like with ZestyTheme having the transparent taskbar still interfere with interactions so I fixed that through inspect element to determine what was causing it then asking chatgpt for some help on how to write code to fix it. Same issue with text shadows that cause text to look blurry when using ZestyTheme, I fixed that too. Its amazing the hard work put into ZestyTheme though because its already near perfect for what I wanted it to do, so massive thanks to ZestyJelly for their hard work and everyone else whose snippets I might have used or learned from


@import url('https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/theme.css');
@import url('https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/colorschemes/cyan.css');

/*removes the star ratings from page*/
div.starRatingContainer {
display: none;
}
/*removes the tomatometer ratings from page*/
.mediaInfoItem.mediaInfoCriticRating.mediaInfoCriticRatingFresh {
display: none;
}
.mediaInfoItem.mediaInfoCriticRating.mediaInfoCriticRatingRotten {
display: none;
}
/*Removes the date shown in the episode details page: */
.itemMiscInfo .mediaInfoItem:first-child {
display: none;
}

/* (DISABLES the following: Removes glow around text on AppleTV-esque bar (this fixes that blurry text and icon issue (caused by the text shadow in the buttons) */
body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground {
text-shadow: none !important;
}

/*fixes the prominent play button margin padding being too big imo*/
/* Prominent play button */
.layout-desktop .btnPlay {
background-color: rgb(var(--white));
color: rgb(var(--darkest)) !important;
margin-right: 1vw !important; /*this is the fix*/
border-radius: 14px !important;
}
.layout-desktop .btnPlay.detailButton {
flex-direction: row;
width: 20%; /*Enlarges the width of the big play button, looks better imo*/
}

/* White border and hover highlight */
.cardOverlayContainer:hover,
.dialog,
.toast,
.raised.homeLibraryButton:hover {
box-shadow: 0px 0px 5px #fff9; /* Subtle white glow */ /*note this box shadow subtle white glow is inconsistent across the edges, the left side of the card container has no white glow, only the top, bottom, and right side do*/
border: solid 1px #fff; /* White border */
}

/*fixes the possibility of cursor being so close to edge of container that hover above doesn’t apply and the container stops highlighting white even though cursor is still on the very edge of the container*/
.cardOverlayContainer {
border: solid 1px #fff !important; /* Persistent white border */
}

/* when opening the hamburger menu it gives white edgelight and white border to right edge of menu */
.drawer-open {
box-shadow: 0px 0px 5px #fff !important; /* White edge highlight to hamburger menu */
border-right: solid 1px #fff !important; /* Right white border */
}

/* Hover zoom effects for cards and library buttons */
.layout-desktop .homeLibraryButton:hover,
.layout-tv .homeLibraryButton:hover,
.layout-desktop .homeLibraryButton:focus,
.layout-tv .homeLibraryButton:focus,
.layout-desktop .card:hover,
.layout-tv .card:focus {
transform: scale(1.02); /* Zoom in slightly */
transition: transform 1s ease; /* Smooth transition */
}

/* mobile-specific fix */
@media all and (max-width: 70em) {
.cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, 0) !important; /* Transparent button backgrounds */
}
}




/* Ensure 3 buttons (favorite, mark played, etc) to the side of the episode are visible and functional. this aligns those buttons to the left*/ /*the buttons can be aligned to right if wanted but it overlaps the number of episodes value shown in the season container card*/

.cardOverlayButton-br {
position: absolute;
top: 0; /* Positions the buttons at the top */
left: 0; /* Aligns the buttons to the left */
display: flex;
flex-direction: column; /* Stack buttons vertically */
align-items: flex-start; /* Align buttons to the left inside the column */ /* to align to right replace with: align-items: flex-end; */
width: auto;
padding: 0em;
gap: 1em; /* Space between buttons */
border-radius: 10px; /* Rounded button edges */
}


/* The card overlay 3 buttons (heart, checkmark, 3 dots icon size and more */
.cardOverlayButtonIcon {
font-size: 1.4em !important; /* Icon size */
width: 2em !important; /* Icon width */
height: 2em !important; /* Icon height */
display: flex;
justify-content: center; /* Center icons */
align-items: center;
}

/*Hides the heart/favorite button (so now its 2 buttons not 3) as its not really that necessary to select imo*/
.cardOverlayButton-br .cardOverlayButton:nth-child(2) {
display: none;
}

/* Swap the order of the buttons so three dots is middle left and add to watched is top left of overlay */
.cardOverlayButton-br .cardOverlayButton:nth-child(1) { order: 2; /* Move the first button to the second position */ }
/* Ensure the 'add to watched' button is aligned in the top left */
.cardOverlayButton-br .cardOverlayButton:nth-child(3) { position: absolute; top: 0; left: 0; } /* Make sure the three dots button is at the middle left for the other containers */ .cardOverlayButton-br .cardOverlayButton:nth-child(1) { position: absolute; top: 50%; left: 0; transform: translateY(-50%); /* Center it properly */ }

/* Responsive fixes for hiding unnecessary elements on mobile */
.layout-mobile .cardOverlayButtonIcon {
display: none !important; /* Hide overlay button icons on mobile */
}


/* Hover effects for desktop and TV */
.layout-desktop .card:hover,
.layout-tv .card:hover {
transform: scale(1.02); /* Slight zoom */
transition: transform 1s ease; /* Smooth zoom effect */
}


/* adds a dark blur to media cover/thumbs on hover, set accent to zero so the tinting when hovering over a card container no longer occurs */
.cardOverlayContainer {
background: rgba(var(--accent-off),.0);
}


/*FIX FOR the top bar being transparent for jellyfin but stuff behind it not being clickable, found with help from chatgpt and me manually getting the button classes and stuff to be able to reenable pointers for them specifically: */

.skinHeader {
pointer-events: none; /* Disable pointer events for the entire top bar */
}

/* Re-enable pointer events for all interactive elements */
.skinHeader .headerButton,
.skinHeader .material-icons,
.skinHeader .pageTitle,
.skinHeader .headerRight,
.skinHeader [class*="emby-"] {
pointer-events: auto; /* Allow pointer events for buttons, icons, and Emby-specific elements */
}

/*Give a cool white outline border around the right header (with the cast, search, etc) and around the tab header (the home and favorites button), used from zombie theme*/

.headerRight,
.headerTabs {
background-color: rgba(var(--white-off), 0.35);
border-radius: var(--rounding-circle);
color: rgba(var(--darkest));
backdrop-filter: blur(50px);
border-width: 2px;
border-style: solid;
border-color: #fff;
}

/*Make the home and favorites to be inline with the header right (the cast button, etc) so that way they are all aligned as a straight line*/
.layout-desktop .sectionTabs {
margin-top: -4.6em;
}
/* Following changes the button orders for the header right container, so search icon is first*/
/*change the button orders for the header right: */
.headerSearchButton {
order: 1; /* First button (leftmost) */
}
.headerCastButton {
order: 2; /* Second button (2nd leftmost) */
}
.headerSyncButton {
order: 3; /* Third button */
}
.headerUserButton {
order: 4; /* Last button (rightmost) */
}

/*Make the header right have more padding from the edge of the webpage: */
.headerRight {
transform: translateX(-10px); /* Shifts left by 10 pixels */
}

/* decrease header bar padding from top of webpage */
.layout-desktop .headerTop {
padding: 0em 0;
}

/*Fixes the hover and white border and white glow effect having its edge cut off at the first episode hover, also resizes the card containers so that it will still fit properly even with the padding left offset */
.card {
padding-left: 4px;
}
.overflowBackdropCard, .overflowSmallBackdropCard {
width: 22.7vw;
}

---

However there is still one last thing I've been trying to get working but I just cannot seem to get it to format around the elements properly, which is re-enabling cast and crew/season pictures removed by ZestyTheme. I've tried a number of different setups but they all don't resize properly or specific crew members who have longer names breaks the alignment, so if anyone happens to know how to rewrite the following code to fix all those issues please do let me know. The following code doesn't handle resizing well and only looks good on my computer sizing only because of that:
/*Below restore/fix the cast pics and season pictures when clicking into their detail pages*/
/*Reverses the blocking of URL pics for the cast and crew and guest stars, and season pages, etc */
.detailImageContainer .card .cardBox {
display: block !important; /* Force override */
}
.layout-desktop .detailImageContainer .card,
.layout-desktop .itemTags {
display: block !important; /* Force override */
}

/*Changes the URL cast pic alignment so that its not overtop of or blocking anything*/
.layout-desktop .detailImageContainer .card.portraitCard {
position: relative;
width: 25vw;
max-height: none;
margin-left: 42.4em;
top: 4%; /* can also make it -14 percent if you want it to be directly aligned with header right element instead of right below it, note that you will need to change next up player margin too */
}

/* Changes the next up player location so that the URL pic of the season doesn’t overlap on top of the next up player*/
.layout-desktop .nextUpSection {
margin-top: 35vh;
}
.layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
padding-top: 0.5em;
}

[_Mayhem_]

https://github.com/SalvaChiLlo/JellyfinTheme with library icons I stole from somewhere online.

I have a custom logo and the library wrap too

Custom logo at the top:

.adminDrawerLogo img { content: url(https:// MY PNG HERE ) !important; } imgLogoIcon { content: url(https:// MY PNG HERE ) !important; } .pageTitleWithLogo { background-image: url(https:// MY PNG HERE) !important; }

Followed by the wrap:

.section0 .itemsContainer {
  flex-wrap: wrap;
}

Those library thumbnails look dope. Can I request you to please share them.?

I actually found them via an Emby forum post: https://emby.media/community/index.php?/...ary-icons/

[zer0entity]

   

Happy with my set up