Some help with CSS - Printable Version

Some help with CSS - Printable Version

+- 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:

- JMP is not showing the correct custom Progress Bar edits. Why?

You'll probably have to mess around with this as it won't be the exact colors and blur you want.
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.

RE: Some help with CSS - luckey - 2025-02-06

Hello! Thank you so much for your reply, and sorry for my late one!

For the Progress Bar fixed it:

Code:
.itemProgressBarForeground {

    border-radius: 100px !important;

    background: var(--primary-accent-color) !important;

}

It's showing the way I want on the JMP, but now, doesn't on the web... still have to check why.

For the context menus, I changed the code to match the theme colors, it looks like this and it works:

Code:
/*Right-click (3-dot) & Cast button context menus*/ 

.focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.centeredDialog.opened {

color: rgbargba(35, 35, 35, 0.5) !important;

background: rgba(35, 35, 35, 0.5) !important;

backdrop-filter: blur(12px);

border-radius: 15px !important;

}

/*Buttons for all context menus*/ 

button.listItem.listItem-button.actionSheetMenuItem.emby-button:hover {

color: rgbargba(35, 35, 35, 0.5) !important;

background: rgba(35, 35, 35, 0.5) !important;

backdrop-filter: blur(12px);

border-radius: 25px;

}

I also wanted to hide the '3 dots' button from the cast. How?

Quote: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.

Noted! Thank you, I added more TV Shows and now it looks better!

Still, I don't know why it shows a black bar on the left side in the details page or how to show the media background in the details page...

RE: Some help with CSS - Efficient_Good_5784 - 2025-02-06

(2025-02-06, 01:12 AM)luckey Wrote: I also wanted to hide the '3 dots' button from the cast. How?

This will remove the 3-dot button, but it will do so for all items on the server.
Shouldn't be an issue on the webUI with a mouse as you can right-click to bring up the same menu, but it may make it more difficult on a touch screen depending on how that works.

Code:
span.material-icons.cardOverlayButtonIcon.cardOverlayButtonIcon-hover.more_vert {

    display: none;

}

(2025-02-06, 01:12 AM)luckey Wrote: Still, I don't know why it shows a black bar on the left side in the details page or how to show the media background in the details page...

Did you enable the backdrop option in the client settings?
Click on your user profile on the top-right and then go to "Display".
Scroll down a bit and you will see settings for that.

Keep in mind that since these are client settings, they only apply to that single client (and you will need to redo them on new clients).
A browser counts as a single client.

RE: Some help with CSS - luckey - 2025-02-06

Quote:This will remove the 3-dot button, but it will do so for all items on the server.
Shouldn't be an issue on the webUI with a mouse as you can right-click to bring up the same menu, but it may make it more difficult on a touch screen depending on how that works.

Code:
span.material-icons.cardOverlayButtonIcon.cardOverlayButtonIcon-hover.more_vert { display: none; }

Thank you so much! Exactly what I needed!

Quote:Did you enable the backdrop option in the client settings?
Click on your user profile on the top-right and then go to "Display".
Scroll down a bit and you will see settings for that.

Keep in mind that since these are client settings, they only apply to that single client (and you will need to redo them on new clients).
A browser counts as a single client.

Yes I did, I think the problem is that I'm using a custom background:

Code:
.backdropImage {

  display: none;

}

.backgroundContainer {

  background-color: rgba(0, 0, 0, 0);

  background-image: url('https://i.imgur.com/a4VdCjA.png');

  filter: blur(10px);

  background-size: cover;

}

This is how it looks when I remove that code:

RE: Some help with CSS - luckey - 2025-02-09

OH! I figured it out! It was more simple than I was thinking and now I'm felling dumb ahaha
Just changed:

Code:
.backdropImage {

  display: not: (.layout-desktop)

}