+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Some help with CSS (/t-some-help-with-css)
Some help with CSS - luckey - 2025-01-05
Hello everyone! After a while I updated my custom css theme that is a zombie from the Scyfin theme and some personal customizations, but I need help with some things!
First, I'm using this theme for the Details page, but it looks broken on Jellyfin Media Player and it doesn't show banner in the background and I can also see ghosting on it. I'm using a custom background image.
It was supposed to look like this:
How can I fix this?
Another questions are:
- JMP is not showing the correct custom Progress Bar edits. Why?
- How can I remove the three dots in the cast pictures?
- How can I make the right click menu background blur? I can't find it in the code...
- Is it possible to make the TV Series show Thumbs instead of Posters in the homepage? And increase the number of Series that show there?
- Why is it showing a white border on firefox (it doesn't on JMP)?
Here is my Css: https://rentry.co/2idbpk27
Thank you so much!
RE: Some help with CSS - Efficient_Good_5784 - 2025-01-06
(2025-01-05, 11:16 PM)luckey Wrote: Another questions are:You'll probably have to mess around with this as it won't be the exact colors and blur you want.
- JMP is not showing the correct custom Progress Bar edits. Why?
Don't know if it's compatible with the current CSS you use, but this works to change the color for the in-progress overlay on both browser's and JMP's webUI.
Code:
.itemProgressBarForeground {
background: rgba(255,255,255,1);
}
.itemProgressBar {
background: rgba(50,50,50,.3);
backdrop-filter: blur(5px);
}(2025-01-05, 11:16 PM)luckey Wrote: - How can I make the right click menu background blur? I can't find it in the code...This will work, but you'll want to modify the rgb values to get a color you want:
Code:
/*Right-click (3-dot) & Cast button context menus*/
.focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.centeredDialog.opened {
color: rgba(255,255,255,1);
background: rgba(0,0,0,.25);
backdrop-filter: blur(12px);
border-radius: 15px !important;
}
/*Buttons for all context menus*/
button.listItem.listItem-button.actionSheetMenuItem.emby-button:hover {
color: rgba(255,255,255,1);
background: rgba(150,35,45,1);
border-radius: 25px;
}I changed the colors for you to match what I think your current CSS is doing with white accents:
Code:
/*Right-click (3-dot) & Cast button context menus*/
.focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.centeredDialog.opened {
color: rgba(0,0,0,1);
background: rgba(255,255,255,.35);
backdrop-filter: blur(12px);
border-radius: 15px !important;
}
/*Buttons for all context menus*/
button.listItem.listItem-button.actionSheetMenuItem.emby-button:hover {
color: rgba(0,0,0,1);
background: rgba(255,255,255,1);
border-radius: 25px;
}(2025-01-05, 11:16 PM)luckey Wrote: - Is it possible to make the TV Series show Thumbs instead of Posters in the homepage? And increase the number of Series that show there?Not that I'm aware of.
The number of series that show in the home page is limited.
If you want to see more, you need to open its library view.