How To Customize Cstarrating Star Appearance?

Using the CStarRating widget to display stars. How can I customize the appearance of the stars? For instance, in read-only mode the stars appear as a dull red, I would like them to appear as a yellow color. How can I do this?

I see there are css classes star-rating-readonly and star-rating-applied not sure which of these is the most approriate. Also I see star.gif file. I don’t see much documentation around the base project

I guess create my own star.gif and modify the css? Any examples of this?

Ok I was able to successfully change the star appearance. Here are the steps I took:


[*]Download a star image from, I chose a 24x24 png file.

[*]Create a sprite image that can hold three versions of the star (used as reference)


[*]Create new image in gimp with a transparent background 24 pixels wide by 72 pixels high (72 being three times 24 so we can store three versions of the star stacked on top of each other)

[*]Cut and paste my downloaded star image into the new image three times which created three new layers.

[*]position each layer on top of each other (I used a grid in gimp to help me with this: Image->Configure Grid…->Spacing->Height 24 pixels)

[*]use desaturate to turn the top image grayscale

[*]saved as png


[*]Upload my new star sprite to <webroot>/images

[*]Modified my css as follows:



    height: 23px;

    width: 25px;


.star-rating a


    background: transparent url('../images/star-sprite.png') no-repeat 0 0px;

    width: 24px;


.star-rating-on a


    background-position: 0 -24px!important;



Probably will need to make a few more css changes but that should give you the basics.

nice work :lol: