Change Ratings for Blue to Golden - SP Online Office365

How do you change the ratings from blue to control on the RatingsControl that is rendered.

In SP Online, you have lot of limitations and your best friend is JQuery. There are several ways in which this can be accomplished. A simple way is to swap the class that is used when the ratings control is rendered on the page. Here is how the command will look.

$(".ms-rating_1").addClass("ms-rating_1_new").removeClass("ms-rating_1");

The only issue with this is that there is no matching class when the average rating is 1.5, 2.5...and so forth. In that scenario, you would have to create a new mirror opposite of the rating image and load it to your images folder.




This is an example of that type of code. In this, we would add a class and remove the existing class and then replace the image.

    //$(".ms-rating_4_5").addClass("ms-rating_4_5_new").removeClass("ms-rating_4_5").attr("src", "/sites/ynn/siteAssets/images/Ratings/ratingsEmptyCustom.png")

Alternatively, if you can live without averages rounded to .5 then you can simply do this:

$(".ms-rating_1_5").addClass("ms-rating_2_new").removeClass("ms-rating_1_5");