Customize the star rating images in SharePoint 2013

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.

Show image

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.

But what options do you have to apply a different look to the star rating? In SharePoint 2010 you could update some properties in the property bag of the site, but this isn’t necessary anymore. The star rating is now client side rendered. That means that you’re able to modify it via JavaScript.

First of all, the star rating consists of the following images:

RatingsSmallStarFilled.png
RatingsSmallStarEmpty.png
RatingsSmallStarLeftHalfFilled.png
RatingsSmallStarRightHalfFilled.png
RatingsSmallStarHoveroverEmpty.png
RatingsSmallStarHoveroverFilled.png
RatingsLargeStarFilled.png

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:

1. The list view star rating;
2. 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:

Show image

To apply your own star rating style to a list view you will need to add the following script to your master page.

1
_spPageContextInfo.themedImageFileNames = {
2
  "RatingsSmallStarFilled.png": "RatingsSmallStarFilled.png",
3
  "RatingsSmallStarEmpty.png": "RatingsSmallStarEmpty.png",
4
  "RatingsSmallStarLeftHalfFilled.png": "RatingsSmallStarLeftHalfFilled.png",
5
  "RatingsSmallStarRightHalfFilled.png": "RatingsSmallStarRightHalfFilled.png",
6
  "RatingsSmallStarHoveroverEmpty.png": "RatingsSmallStarHoveroverEmpty.png",
7
  "RatingsSmallStarHoveroverFilled.png": "RatingsSmallStarHoveroverFilled.png",
8
  "RatingsLargeStarFilled.png": "RatingsLargeStarFilled.png",
9
};
10
if (_spPageContextInfo.siteServerRelativeUrl === "/") {
11
  _spPageContextInfo.themedCssFolderUrl = "/Your-Image-Location";
12
} else {
13
  _spPageContextInfo.themedCssFolderUrl =
14
    _spPageContextInfo.siteServerRelativeUrl + "/Your-Image-Location";
15
}

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.

Important: this piece of code need to be added after the script manager element in your master page. If you place it somewhere towards the bottom of the master page, the star rating gets the default rendering, because the SharePoint JavaScript code already gets executed.

1
<asp:ScriptManager
2
  id="ScriptManager"
3
  runat="server"
4
  EnablePageMethods="false"
5
  EnablePartialRendering="true"
6
  EnableScriptGlobalization="false"
7
  EnableScriptLocalization="true"
8
/>

The result looks like this:

Show image

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:

Show image

Field Control - star rating rendering

When you applied a star rendering field control to a page layout, it will be rendered via JavaScript but with a slightly different approach then from the list view. The Field Control code is going to define all the necessary images in a hidden block. The JavaScript will reference the images that are defined in the hidden block.

1
<SPSWC:AverageRatingFieldControl
2
  FieldName="AverageRating"
3
  runat="server"
4
></SPSWC:AverageRatingFieldControl>

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:

1
<div style="display:none;">
2
  <img
3
    src="/Your-Image-Location/RatingsSmallStarEmpty.png"
4
    id="RatingsSmallStarEmpty.png"
5
  />
6
  <img
7
    src="/Your-Image-Location/RatingsSmallStarFilled.png"
8
    id="RatingsSmallStarFilled.png"
9
  />
10
  <img
11
    src="/Your-Image-Location/RatingsSmallStarLeftHalfFilled.png"
12
    id="RatingsSmallStarLeftHalfFilled.png"
13
  />
14
  <img
15
    src="/Your-Image-Location/RatingsLargeStarFilled.png"
16
    id="RatingsLargeStarFilled.png"
17
  />
18
  <img
19
    src="/Your-Image-Location/RatingsSmallStarRightHalfFilled.png"
20
    id="RatingsSmallStarRightHalfFilled.png"
21
  />
22
  <img
23
    src="/Your-Image-Location/RatingsSmallStarHoveroverEmpty.png"
24
    id="RatingsSmallStarHoveroverEmpty.png"
25
  />
26
  <img
27
    src="/Your-Image-Location/RatingsSmallStarHoveroverFilled.png"
28
    id="RatingsSmallStarHoveroverFilled.png"
29
  />
30
</div>

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:

Show image

When you don’t need to use a particular image, you could leave out that image from the hidden block on your master page.

Show image