How make rating stars golden?

Hello @boppar ,

If I understand correctly, you want to make these star rating gold, right?

Link to image: https://d.pr/i/Kk4voo

I can see that you already have a custom CSS code either in your Appearance > Customize > Additional CSS field or using other plugins where the color is set as blue:

Link to image: https://d.pr/i/x0aJA9

You need to change or remove that custom code first to make your CSS work properly.

Thank you ??

Hello @rur165
Thanks for your answer.
Yes, I want golden stars.

I’ve checked my additional CSS and there is no CSS added regarding star-rating. Also nothing in my plugins.

The color of the stars is #0088EB. This is the color I use for links. But why should the stars get the link color?

• This reply was modified 2 years, 7 months ago by boppar.

Hi there @boppar

I’ve checked my additional CSS and there is no CSS added regarding star-rating. Also nothing in my plugins.

As I see currently, the starts are inheriting the color from a CSS block:

.star-rating span{}

Plugins may be outputting the styles inline due to which your CSS code might be getting overwritten depending on the location of the style.

You could try forcing the color by using !important in CSS. Example color: #f1d554 !important;

I hope this helps! ??

Hello @kaushiksomaiya
I’ve checked my additional CSS another time. No CSS added regarding star ratings.
I’ve also tried disabling my plugins one by one but ot didn’t change the star rating.

I don’t know if this matters: The stars are blue on categorypages and productpages, but they are black on homepage (featured products).

If I would use: color: #f1d554 !important;
What CSS should I add?

OK, this seems to work.
Thanks for your help.

.star-rating span:before,
.star-rating::before,
p.stars a:hover:after, 
p.stars a:after {
    color: #f1d554 !important;
    letter-spacing: 1px; 
}

You are most welcome! Feel free to get back to us in case you have any additional questions!