Customize your star CSS

The stars are naturally formatted to display their various states. However, you are free to override and customize the CSS however you wish.

CSS classes

The main reason to override the star CSS would be to adjust their colors. Of course, any other CSS adjustments can be made at your discretion. If you'd like to change the icons being used, please read how to customize your star icons.

Class	Default Color	Applies to...
.sr-star		All stars, all the time, regardless of state.
.sr-avg-rating	#d1202a (red)	Stars which represent the average rating across all users.
.sr-user-rating	#e5cf4b (yellow)	Stars which represent the selected rating of the current user.
.sr-unrated	#cdcdcd (grey)	Any stars which are greater than the average or user total.