Styling

The booking widget can easily be styled using CSS variables. Put the new variable values in your own CSS file, or in a style tag in the head section of your page.

Example code

The following example sets the primary and secondary color in a style tag in the head section. The colors are set on a class, cliento-custom-theme. Add that class to the body tag to apply the theme.

<head>
  <style>
    .cliento-custom-theme {
      --cb-color-primary: #5f56fc;
      --cb-color-secondary: #51136b;
    }
  </style>
</head>
<body class="cliento-custom-theme">
  ...
</body>

Color variables

The variables in the table below can be used to control the colors in the booking widget.

Sizes and spacing

The variables in the table below can be used to control font sizes and spacing in the booking widget.