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 http://www.fyneworks.com/jquery/star-rating
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:
[list=1]
[*]Download a star image from iconarchive.com, I chose a 24x24 png file.
[*]Create a sprite image that can hold three versions of the star (used http://css-tricks.com/css-sprites/ as reference)
[list=a]
[*]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
[/list]
[*]Upload my new star sprite to <webroot>/images
[*]Modified my css as follows:
.star-rating
{
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;
}
[/list]
Probably will need to make a few more css changes but that should give you the basics.
