CODEWITHSUNDEEP
htmljquerycss
Esam Olwan
Esam Olwan

Reputation: 362

How do I change color of selected stars from a jquery rating plugin?

I used a jquery plugin to display a star rating from here. The stars are displaying fine , however on selecting the stars, the selected color is red by default. the select color is in .rateit .rateit-selected class. I changed it to a yellow color in my style.css file

.rateit .rateit-selected {
color: rgb(239, 197, 41);
}

however, the color of the select has not changed and it seems that in the styling , its got a background gif right here background gif of stars

the full customization of the selected stars is a background of star.gif which is included with the plugin and a color of red ( which I changed to yellow).

.rateit .rateit-selected {
background : url(star.gif) left -16px;
color: rgb(239, 197, 41);
}

I'm not sure how do I customize the yellow color on select from star.gif , since it's got 4 different layers of stars in the gif.

Upvotes: 1

Views: 375

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

The last value in the background CSS shorthand you're using is the vertical offset of the image. It's currently set to -16px which means that the image is raised 16px so that instead of displaying the default grey star which is at the top of the image, the red star is displayed instead.

If you want to show the yellow star, change the value to -32px to move the image up further:

.rateit > div {
  width: 16px;
  height: 16px;
}

.rateit .rateit-selected {
  background: url(https://i.sstatic.net/mg6ov.gif) left -32px;  
}
<div class="rateit">
  <div class="rateit-selected"></div>
</div>

Upvotes: 1

Related Questions