BEFORE
AFTER
The Extra Theme allows your users to rate posts by clicking on the round “star” icons at the bottom of each post. By default, these stars have a grey background and when hovered over / clicked turn the “category color” (Extra allows you to assign each category a color, and the rating stars inherit this color.
If you’d like to assign standard colors to these rating stars so that all posts have a consistent appearance, you can do so with the following CSS:
/* Change post rating star colors */ #rating-stars img.star-on { background-color: red !important } #rating-stars img.star-off { background-color: black !important }
The “star-off” rule replaces the normal grey background, while the “star-on” rule replaces the color seen when the stars are hovered over.
You can add this CSS to the theme by pasting it into the “Custom CSS” box found in the ePanel at “Extra > Theme Options > General Settings” (at the very bottom).
Thank you so much for all the customization tips!It is soon helpful!
Thank you so much for the tips! Really useful
Thanks very much. Very useful.
Can you tell me how to change the colour to a specific HTML colour please? I tried replacing the colour ‘red’ with a specific HTML code of c55e9b and although it did change it, it changed into a horrid green colour which wasn’t what I was expecting! Thanks
Hi Sonia, in CSS HTML codes need to be preceded by a “#” symbol. So this should do what you need:
#rating-stars img.star-on { background-color: #c55e9b !important }
Without it, the CSS rule is being ignored and you’ll be seeing the dark green default color, I think.
Hi Dan
I just tried the above code but it didn’t change the colour
This is what I added in custom CSS
/* Change post rating star colors */
#rating-stars img.star-on { background-color: #c55e9b !important }
#rating-stars img.star-off { background-color: #00a8ff !important }
Hi Sandeep, that CSS is working for me, so there might be a problem in some of the CSS before it, or a conflict with some other CSS. Try clearing your caches first, and if that doesn’t help perhaps you can send me a link to one of your posts so that I can take a look for you? Thanks!
Un grand (MERCI) pour ces explications claires et détailles… Simple de customiser avec extra grâce à vous
You’re welcome, pp!
Thanks this was really helpful. Is there a way to actual change/replace the icon itself? I have svg.s for the icon I’d like to use instead of the star, but I’m not sure how to target that element.
Hey danielle, I’ve just put up a post on how to change the star rating icons. Hope it helps, but let me know if not. Thanks!