Advanced Design Customization with CSS Variables

1. Introduction.

2. How to include CSS variables in your campaign.

3. Available CSS variables.

3.1. Form fields.

3.2. Legal bases popup.

3.3. Cookie banner (old version).

3.4. Cookie consent manager (Klaro).

3.5. Rating and swipe type questions.

4. Other specifications.

5. Related content.

1. Introduction.

The Cool Tabs campaign editor allows you to customize the main colors (primary, secondary, background, and text), as well as the form error colors and quiz feedback colors, without needing to touch CSS.

However, other more specific visual elements cannot be modified from the campaign editor, for example, the background of form fields, the legal bases popup, the cookie consent manager, or the color of stars in rating-type questions. To customize them, you have at your disposal a set of CSS variables that you can redefine from the campaign's custom CSS.

In this tutorial, you will find the complete list of available CSS variables, what each controls, and how to include them in your campaign.

Please note that:

• These variables are native CSS variables (also called custom properties), different from the template variables like {{{ first_name }}} or {{{ coupon_code }}} used in custom HTML.

• This customization is intended for users with at least basic CSS knowledge.

2. How to include CSS variables in your campaign.

CSS variables are redefined inside a :root { … } block within the campaign's custom CSS. You just need to add the ones you want to overwrite, one per line, using the format --variable-name: value;.

For example, to change the background of form fields:

:root {
  --ct-input-background-color: #f7f7f7;
}

You can include several variables in the same :root block, one below the other:

:root {
  /* Form fields */
  --ct-input-background-color: #f7f7f7;
  --ct-input-text-color: #222222;
  --ct-input-border-color: #cccccc;

  /* Legal bases popup */
  --ct-legal-background-color: #ffffff;
  --ct-legal-text-color: #333333;
}

As a value, you can use any valid CSS color format: name (red, white), hexadecimal (#E91E63), rgb() or rgba() if you need transparency.

How to configure custom CSS for a campaign.

3. Available CSS variables.

Below is the complete list of CSS variables, grouped by the area of the campaign they affect.

3.1. Form fields.

These variables control the appearance of the participation form fields (inputs): background, text typed by the user, border, label, and placeholder.

• --ct-input-background-color: background color of the form fields.

• --ct-input-text-color: color of the text typed by the user in the inputs.

• --ct-input-border-color: border color of the form fields.

• --ct-input-label-color: color of the field labels. By default, it inherits from the promo text color (--ct-font-color).

• --ct-input-placeholder-color: color of the placeholders in the fields (when the "Use placeholders instead of labels" checkbox is selected).

Note about --ct-input-label-color: Since it inherits the text color by default, the behavior is as follows:

• If you don't change anything, the label follows the campaign's text color. If you change the text color in the editor, the label changes as well.

• If you overwrite --ct-input-label-color in your custom CSS, the labels stay fixed in that color and no longer follow the text color.

• If you want the labels to inherit the primary color instead of the text, you can do --ct-input-label-color: var(--ct-primary-color);.

Example:

:root {
  --ct-input-background-color: #f7f7f7;
  --ct-input-text-color: #222222;
  --ct-input-border-color: #cccccc;
  --ct-input-placeholder-color: #999999;
}

3.2. Legal bases popup.

These control the appearance of the popup shown to participants when clicking on the link to the legal bases.

• --ct-legal-background-color: background color of the popup.

• --ct-legal-text-color: text color of the popup.

3.3. Cookie banner (old version).

These control the appearance of the old cookie notice (bottom banner). If your campaign uses the Klaro consent manager, see the next section.

• --ct-cookies-background-color: background color of the banner.

• --ct-cookies-text-color: text color of the banner.

• --ct-cookies-accept-button-background-color: background color of the accept button.

• --ct-cookies-accept-button-text-color: text color of the accept button.

3.4. Cookie consent manager (Klaro).

These control the appearance of the Klaro cookie consent manager.

• --ct-klaro-background-color: background color of the manager.

• --ct-klaro-text-color: text color.

• --ct-klaro-accept-button-background-color: background color of the accept button.

• --ct-klaro-accept-button-text-color: text color of the accept button.

3.5. Rating and swipe type questions.

These control specific visual elements of rating-type questions (star rating) and swipe (Tinder style) questions.

• --ct-rating-star-color: color of the active stars in star rating questions. Default value: #FBC02D.

• --ct-swipe-button-left-color: color of the left button and the ✕ icon in Tinder-style swipe questions. Default value: #E91E63.

• --ct-swipe-button-right-color: color of the right button and the ✓ and 👍 icons in Tinder-style swipe questions. Default value: #2EC4B6.

4. Other specifications.

Customization via custom CSS is only available in campaigns with Cool Promo and Cool Promo White Label, included in the Gold and Diamond plans, respectively.

Remember that you can edit the custom CSS from the campaign preview, allowing you to apply changes and see the results directly.

If you have any questions or need help, you can contact us at the email help@cool-tabs.com.

5. Related content.

How to configure custom CSS for a campaign.

Advanced customization with your own HTML.

Variables related to points in your campaign.