How to customize appearance

Customizing the appearance of the rating widgets helps you match your brand and provide a coherent experience for your users, in this article, you’ll learn how to customize the design of rating widgets in TotalRating.

Instructions#

Basically, TotalRating offers control of four main aspects of the rating widget design, which are:

1. Colors: The colors of different interface elements including buttons, symbols, etc…
2. Spacing: The space between the interface elements.
3. Size: The overall size of the widget.
4. Roundness: The edge roundness of the interface elements.

Customizing colors#

The main colors used in the widget are:

• Primary: Main information and actions
• Secondary: Secondary information and actions
• Background: Widget’s background
• Dark: Texts and labels

Customizing spacing#

Depending on your website design, you can choose between:

• Compact: Small space between elements.
• Normal: Regular space between elements.
• Comfortable: Large space between elements.

Customizing the size#

You can change the overall size of the widget to suit your design. Four options are available:

• Small
• Regular
• Medium
• Large

Customizing border roundness#

Customization of the roundness of elements is possible, you can choose between:

• Sharp: Interface elements will have sharp edges.
• Rounded: Interface elements will have rounded edges.

Widget Emplacement#

TotalRating allows you to choose where the rating widget should be placed relative to the content, either:

• Before content: The widget will appear before the content.
• After content: The widget will appear after the content.