[TIP] Changing Star Color

Thought I’d share some CSS for changing the color of the star. The method for the star image is pretty good. The star is actually transparent in the middle and a background color is applied behind the stars at a calculated width to represent the “average” overall rating.

Hopefully you are using an “override style sheet” which this can be added to:

div.geodir_RatingAverage, li.gd-multirating-star.active {
	background-color: #FF0000 !important;
}

For example, the above color changes from the default orange to red.

There are two directives here…the first for the completed ratings, the second for the interactive rating as a user is hovering over the ratings prior to selection.

The one drawback I’ve seen so far is that the star uses a white surrounding background, which contrasts against the light gray background used for the completed rating/review comment. Still playing with a way to get change that to white, but so far only able to force it with !important…still need to find an overriding specificity.

cheers