Rating Manager style options page allows you to make full visual setup of rating forms. You can change icons, icon colors, icon sizes, paste your own SVG image code (SVG image will be used as rating form icon) or even edit HTML template in the rating form.

SVG icons

Rating Manager style settings

The main thing in the rating form are icons used as a rating value indicators. Default setting is a simple star shaped SVG image (icon). You can select other SVG images (icons) from the drop-down list and you will see preview of this image instantly below the drop-down list. Also, you can use your own SVG image. To do this, you need to mark the checkbox “Custom SVG” and paste SVG image code to the “Custom SVG Source” field. Field located at the bottom of this page (if you leave “Custom SVG icon source” field empty, you’ll see error notice on the top of the page “Error: Custom SVG source field cannot be empty when using Custom SVG for ratings.”). System will start to use this image for a rating form instantly. But don’t forget to uncheck “Custom SVG” checkbox if you want to use SVG images from the drop-down list.

Icon size

Rating Manager style settings

 

You can set rating form icon size by selecting the value in pixels from the drop-down list. Keep in mind, that nowadays there are a lot of different devices (desktop computers, smartphones, tablets) with a different resolution and different pixel density, so it’s recommended to test the results after setup by checking your website rating forms with various devices.

Maximum value

Rating Manager style settings

 

Maximum value of rating defines the maximum value per one rating action. The default value is 5 points. We recommend keeping this default value as it’s a standard maximal value used by “Rich Snippets” function.

Icon colors

Rating Manager style settings

To represent the rating value you need to define the color scheme for rating form icons. To do so, you just need to select two colors. There are two lines, each has its color picker and input field for HEX code of prefered color directly insertion. The first line “Normal fill” is used like neutral color, this color will be used on SVG icons of rating form when there is no rating at all. All icons will have neutral color (“Normal fill” color). Also, this color will be visible if there is a rating value and this value is smaller than the maximal value (if rating is 3 of 5 points, so, you’ll see 2 points represented in neutral color (“Normal fill” color). The second line “Rated fill” is used to define prefered color that will be used to identify rating points (while moving mouse pointer all over the rating form) and rated points when there is rating value. Make sure, that these colors are not identical because it will be hard to identify from the first sight rating value. Also, we recommend to use brighter colors as “Rated fill” color and slightly pale colors as “Normal fill” color. In addition, it would be better not to use the same color as you have used for a background on your posts and pages, where the rating form may appear because it will be hard or impossible to see the rating value or rating form itself. Try to experiment with various combinations of color schemes to match rating form to whole design and color scheme of your website.

HTML template

Rating Manager style settings

First of all, you need to know that this field cannot be empty, if it’s empty there will be no rating forms rendered on your website. By default there is one small line of source code which describes how the rating form will be rendered (form elements order and more). You can customize this template to satisfy your needs fearlessly because you can always rollback all changes to default template by pressing button bellow the field “Default HTML template”. Even if you have deleted the template, just press this button and you’ll restore default template immediately.

Custom SVG icon source

Rating Manager style settings

Rating Manager style settings

If you want to use your own SVG image as well as rating icons, you can paste SVG image source code to this field (keep in mind that you also need to enable custom SVG function by marking a checkbox “Custom SVG icon”). There are several things that you need to check or even edit before pasting your own SVG image source to this field. First of all, open SVG file in any text/source code editor (like Notepad, Notepad++ or similar) and make sure, that the source of your SVG file starts like this “<svg…” and ends like this “”, all source lines above “” and below should be deleted. Also, please make sure. that your SVG file is plain and includes only one color; if there are more colors used in SVG there could be incompatibility problems. So please inspect and if necessary edit your SVG file before pasting it into the “Custom SVG icon source” field.