Documentation

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#

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.