How to configure custom CSS for your campaign

1. Introduction.

2. Before you start: do you need CSS?

3. Step by step.

3.1. Landing page styles.

3.2. Entry form styles.

3.3. Post-participation page styles.

3.4. Custom CSS with Cool Tabs variables.

4. Other specifications.

5. Related content.

1. Introduction.

Cool Tabs allows full customization of your interactive content campaigns. In addition to the visual settings available in the editor (colors, fonts, styles), you can add your own stylesheet or CSS to achieve more advanced customization.

In this tutorial, we explain what you can do with custom CSS and how to apply it.

2. Before you start: do you need CSS?

Many customizations can be done directly from the editor or by enabling other features. Before adding CSS rules, check whether what you need is already covered by one of these options:

• Do you want to change the text of a button, a form field or a message? Use the Text catalog. It covers button labels (Participate, Submit, Download coupon, View participations…), form field labels, error and validation messages, and much more.

• Do you want to change colors, fonts or the overall look (shadows, border radius, uppercase on buttons or labels)? You can configure these directly from the editor, in the Design > Styles section. For form error colors, go to Form > Advanced. For quiz feedback colors, go to Quiz > Advanced.

• Do you want to customize more specific visual elements — such as the background of form fields, the legal terms popup, the cookie consent manager, or the star color in rating questions? Use Cool Tabs CSS variables, which can be redefined from the campaign's custom CSS without having to write complex rules.

If what you need is not covered by any of the options above — for example, hiding an element, moving it to a different position or applying a transparent background — then you do need custom CSS. The following sections cover the most common cases.

3. Step by step.

Custom CSS lets you make far more advanced visual configurations to achieve a look & feel closer to your brand: move or hide elements, add new elements to your template, or completely restyle the campaign's design.

CSS rules are applied from the Custom CSS section in the campaign preview or campaign settings.

With Cool Tabs, you can create your own custom templates and use free public ones, each with its own design. To learn more, see the tutorial How to use or generate a campaign template.

You can also modify your campaigns with our advanced customization.

3.1. Landing page styles.

The main class for the campaign landing page is '.home_layout'. We recommend inheriting from this class for any rule you add, so it only applies to the landing page.

3.1.1. Hide the Participate button.

The main class is .home_layout .participate_button and .tt_new_promo_game_link. To hide the 'PARTICIPATE' button on the landing page, use the following rule:

.home_layout .participate_button,
.home_layout .tt_new_promo_game_link {
 display: none;
}

To change the button text, go to the campaign editor > Design > Basic data.

3.1.2. Hide the "View my participation" button.

This button is shown by default. You can hide it with the following rule:

.home_layout .m_action_link.my_participation_link {
 display: none;
}

To change the button text, go to the campaign editor > Design > Basic data.

3.1.3. Remove the landing container background.

By default, the landing page is displayed inside a colored container (using the secondary color set for your campaign). The following rule makes it fully transparent:

.wrapper.home_layout {
 background-color: transparent !important;
}

To remove the container from all pages of the campaign, see the tutorial How to set up the campaign with a transparent background.

3.2. Entry form styles.

The main class for the form is '.form_layout'. We recommend inheriting from this class for any rule you add, so it only applies to the entry form.

• To change the text of field labels or the submit button, use the Text catalog.

• To change the number of columns for quiz answers, go to the Design tab of the quiz question.

3.2.1. Hide the Previous / Next / Submit buttons.

In quizzes, you can hide the navigation buttons by enabling the "Advance automatically on answer" option (under Quiz > Advanced), which moves to the next question as soon as a response is selected — no buttons needed.

If you need to hide them in other cases, use the following CSS rules:

• :first-child targets the Previous button:

.actions ul li:first-child {
 display: none !important;
}

• :nth-child(2) targets the Next button:

.actions ul li:nth-child(2) {
 display: none !important;
}

• :last-child targets the Submit button:

.actions ul li:last-child {
 display: none !important;
}

3.3. Post-participation page styles.

To change the text of the buttons on this page (Download coupon, Download, View all participations, etc.), use the Text catalog.

3.3.1. Hide the "Thanks for participating" banner.

By default, a thank-you message is shown inside a banner on the post-participation screen.

You can disable it from Final screens > Advanced.

3.4. Custom CSS with Cool Tabs variables.

You can use variables in your custom CSS to set dynamic values instead of fixed ones. For example, use the campaign's color picker to select a color and apply it to all body fonts in the CSS.

Check the list of variables you can include in the CSS.

Here is a simple example:

body{
color: {{font_color}};
background-color: {{background_color}};
font-family: {{font_family}};
}
h1{
color: {{primary_color}};
}
h2{
color: {{secondary_color}};
}

4. Other specifications.

If you have any questions, contact us at help@cool-tabs.com.

5. Related content.

How to change the color of the chart showing quiz or survey answer summaries with CSS.

How to change the feedback and answer message colors of a quiz with CSS.

Advanced customization for your campaign with variables.