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.


Rating widget design customization
Rating widget design customization

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.