+- 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: Custom CSS button color (/t-custom-css-button-color)
Custom CSS button color - Micah Freeman - 2025-02-07
My goal is to change the color of the heart / like / favorite button.
I've got it partially working, the like button at the top of the page changes color when something has been liked, on hover and when mousing near / away from the button.
The buttons on videos display the new color if it's been liked and if hovering directly over it, but they display the default color when hovering close to the button / mousing away.
Here's my custom css:
/*Change rating button color*/
.ratingbutton-icon-withrating {
color: #38b000;
}
/*Change rating button color on hover*/
.btnUserRating:hover,
.favorite:hover {
color: #38b000;
}
Sorry if I don't know all the correct terms :P
RE: Custom CSS button color - Efficient_Good_5784 - 2025-02-07
Try this CSS for a hover effect on those buttons:
Code:
button.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.emby-button:hover, button.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light:hover {
color: rgba(255, 0, 255, 1);
background: rgba(30, 138, 165, 1);
border-radius: 8px;
}Background = Color of the button background
I picked colors at random, so change them to your liking.
I also added a border radius value which you can remove or add to your liking.
Also keep in mind that this will apply the hover effect to the play buttons over items too.
RE: Custom CSS button color - Micah Freeman - 2025-02-08
Thanks for the reply, I did finally figure out something that seems to work.
/*Change color of button hover and overlay*/
.paper-icon-button-light:hover:not(:disabled) {
color: #FFFFFF;
background-color: rgba(0, 0, 0, .7); /*I went ahead and changed the background color too*/
}