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:
- Colors: The colors of different interface elements including buttons, symbols, etc…
- Spacing: The space between the interface elements.
- Size: The overall size of the widget.
- 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.