How to configure custom CSS for your campaign

1. Introduction.

2. Before you start: do you really need CSS?

3. Step by step.

3.1. Landing page .

3.2. Entry form.

3.3. Post-participation page.

3.4. Custom CSS with Cool Tabs variables.

4. Other specifications.

5. Related content.

1. Introduction.

The Cool Promo and Cool Promo White Label apps allow you to fully customize your interactive content campaigns.

On the one hand, they offer a simple configuration directly from the editor, where you can choose colors, fonts and other styles for each element of the campaign. On the other hand, they let you go further with more advanced customization by adding your own stylesheet or CSS to the application.

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

2. Before you start: do you really 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 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 many more.
• Do you want to change colors, fonts or the overall look (shadows, border-radius, uppercase on buttons or labels)? You can do it 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 color of the stars 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 want to do isn't covered by any of the options above, for example, hiding an element, moving it to a different place, applying a transparent background or any other fine-grained customization, then you do need custom CSS. 

The following sections cover the most common cases.

3. Step by step.

By customizing the stylesheet of your campaign you will be able to make much more advanced visual configurations, to get a look & feel closer to your brand and apply custom designs to your campaign.

You will be able to move elements or hide them, include new elements in your template, or completely change the graphic line of the campaign.

The CSS rules shown below are applied from the custom CSS section of the preview or campaign settings.

We remind you that, with Cool Tabs, you can generate your own custom templates and use the free public ones, with a custom design for each one.

To learn more, see the tutorial on How to use or generate a campaign template.

You can also modify your campaigns with our advanced customization.

3.1. Landing.

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

Below you can see an example of the default landing template.

3.1.1. Hide the Participate button.

The main class is .home_layout .participate_button and .tt_new_promo_game_link (inherited from .home_layout, which is the main class of the campaign's landing page).

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;
}

Below you can see an example of how the landing page would look:

If what you want is to change the text of the button (for example, from PARTICIPATE to ENTER or JOIN NOW!), you don't need CS, do it from the Text catalog.

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;
}

3.1.3. Remove the landing container background.

By default, the landing page is shown inside a colored container (using the secondary color you set for your campaign), with the title, description and buttons displayed on top of it. By applying the following CSS rule, you can remove the color and make it fully transparent.

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

In the example below, the container background has been removed so that the campaign's background image shows through.

If you want to remove the container from all the pages of the campaign, not just the landing page, you have the option to set transparency on all pages. You can see how to do it in the tutorial How to set up the campaign with a transparent background.

3.2. Entry form.

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 participation 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.

To hide the buttons that appear in a step-by-step quiz, 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, on the post-participation screen, a thank-you message is shown inside a banner.

You can hide it with the following CSS rule.

.flash_participations_notice {
display: none;
}

3.4. Custom CSS with Cool Tabs variables.

In your campaigns, you can use your own custom CSS and integrate certain variables, which will allow you to choose certain dynamic values. For example, you can use the campaign color picker to select the font color of your campaign and use that color for all body fonts in the CSS.

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

Here is a simple example of CSS integration.

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 or need help, you can contact us at help@cool-tabs.com.

5. Related content.

How to change the color of the graphic summary of quiz or survey answers with CSS.

Advanced customization for your campaign with variables.