The SharePoint 2013 rating system slightly changed a bit. In SharePoint 2013 you can now choose to use likes or star ratings. This functionality can be turned on via the Rating settings in the list.
Styling the SharePoint 2013 star rating involves some work. The only “quick” option you have is to apply a composed look to your site. But applying a composed look to your sites means that every element will get a new look and feel. Depending on the type of site / project / changes, it could be that this isn’t the right option and would involve a lot more work.
First of all, the star rating consists of the following images:
You will need to modify these images in order to match your own brand / style.
I found out that there are two different renderings of the star ratings:
- The list view star rating;
- The field star rating used on for example a page layout.
List View - star rating rendering
Note: this method can give conflicts if you have composed looks applied on your site.
The default rendering of a star rating in a list view looks like this:
To apply your own star rating style to a list view you will need to add the following script to your master page.
This is almost the same piece of code that a composed look applies to your site when it gets activated. The code makes SharePoint aware that there are different images to be used. In this example the names of the images stay unchanged (for the composed look the themed images are referenced).
The second part of the script is to let SharePoint know where your “theme” folder is located, so whenever the star ratings is rendered, it will reference the images of your location.
The result looks like this:
You only need to specify the images that you want or need to modify. For example if you don’t need to change the filled star image (RatingsSmallStarFilled), you can remove it from the array and your result looks like this:
Field Control - star rating rendering
If you want to change the look and feel of the star rating, you can add your own hidden block with images to the master page. Each image should have the ID value corresponding to the default image.
The hidden block should look like this:
Best is to place this block as close as possible to the body opening tag in your master page. The image ID’s need to have the values of the default images.
The rendering looks like this of the field looks like this:
When you don’t need to use a particular image, you could leave out that image from the hidden block on your master page.