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.

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.

Documentation

Basics