2.4. Custom CSS with Cool Tabs variables.
1. Introduction.
The Cool Promo and Cool Promo White Label applications allow complete customization of your interactive content campaigns.
On the one hand, these apps offer a simple configuration with different customizations, allowing you to select different colors and styles for each campaign element. On the other hand, they offer the possibility to achieve more advanced customization by adding your own stylesheet or CSS.
2. 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.
2.1. Landing.
The main class of this first page of the campaign is '.home_layout'.
It is recommended to inherit from this class any rule you want to add, which will only be valid for the main landing.
Below, you can see an example of the default landing template.
2.1.1. 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 landing).
Hide the participate button
To hide the 'PARTICIPATE' button of the landing, you must 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 would be displayed.
Change the text of the participate button
With the following rule, you can change the text of the 'PARTICIPATE' button to something else like 'SIGN IN', 'REGISTER', or 'I WANT TO JOIN!'.
.home_layout .participate_button::before,
.home_layout .tt_new_promo_game_link::before {
content: 'Login';
font-size: 16px;
}
.home_layout .participate_button,
.home_layout .tt_new_promo_promo_game_link {
font-size: 0;
}
2.1.2. Other landing details.
Hide the button 'View my participation'.
By default, this button is shown, but you can hide it with the following rule.
.home_layout .m_action_link.my_participation_link {
display: none;
}
Remove the background of the landing container
By default, the landing is displayed with a colored container (the secondary color you define in your campaign), on which the title, description, and landing buttons are displayed. However, by applying the following CSS rule, you can remove the color and make it completely transparent.
.wrapper.home_layout {
background-color: transparent !important;
}
Below, you can see an example of how it would be displayed. In this case, the background of the landing container has been removed so that the background image of the campaign can be seen in the background.
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.
2.2. Entry form.
The main class of this page is '.form_layout'.
It is recommended to inherit from this class any rule you want to add. It is only valid for the entry form page.
2.2.1. Modify the form field text.
By applying this rule, you will be modifying the text that appears, by default, in the fields of the data form.
You only have to paste this rule in the custom CSS of the field you want to modify and change the text that appears in bold.
Below, we include all the types of fields that can be modified.
/* NAME question */
label[for=participation_first_name]:not(.step_error){
font-size: 0px;
}
label[for=participation_first_name]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION NAME";
}
/* Surname question */
label[for=participation_last_name]:not(.step_error){
font-size: 0px;
}
label[for=participation_last_name]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION SURNAME";
}
/* FIRST NAME AND LAST NAME question */
label[for=participation_first_and_last_name]:not(.step_error){
font-size: 0px;
}
label[for=participation_first_and_last_name]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION NAME AND SURNAME";
}
/* EMAIL question */
label[for=participation_email]:not(.step_error){
font-size: 0px;
}
label[for=participation_email]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "EMAIL QUESTION";
}
/* EMAIL CONFIRMATION QUESTION */.
label[for=participation_email_confirmation]:not(.step_error){
font-size: 0px;
}
label[for=participation_email_confirmation]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "EMAIL CONFIRMATION QUESTION";
}
/* PHONE QUESTION CHANGE */
label[for=participation_phone]:not(.step_error){
font-size: 0px;
}
label[for=participation_phone]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION PHONE";
}
/* Identification question */
label[for=participation_nif]:not(.step_error){
font-size: 0px;
}
label[for=participation_nif]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "ID CARD QUESTION";
}
/* IBAN question */
label[for=participation_iban]:not(.step_error){
font-size: 0px;
}
label[for=participation_iban]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "IBAN QUESTION";
}
/* ADDRESS question */
label[for=participation_address]:not(.step_error){
font-size: 0px;
}
label[for=participation_address]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION ADDRESS";
}
/* CITY question */
label[for=participation_location]:not(.step_error){
font-size: 0px;
}
label[for=participation_location]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION CITY";
}
/* REGION question */
label[for=participation_region]:not(.step_error){
font-size: 0px;
}
label[for=participation_region]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "REGION QUESTION";
}
/* POST CODE question */
label[for=participation_postal_code]:not(.step_error){
font-size: 0px;
}
label[for=participation_postal_code]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION POST CODE";
}
/* COUNTRY question */
label[autocomplete=country]:not(.step_error){
font-size: 0px;
}
label[autocomplete=country]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "QUESTION COUNTRY";
}
/* GENDER question */
label[for=participation_gender]:not(.step_error){
font-size: 0px;
}
label[for=participation_gender]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "GENDER QUESTION";
}
/* BIRTHDAY question */
label[for=participation_birthdate]:not(.step_error){
font-size: 0px;
}
label[for=participation_birthdate]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "BIRTHDAY QUESTION";
}
In a Campaign to validate promotional codes, by default, the text 'Enter your code here to participate' is displayed. With the following CSS rule, you can modify the text that tells the user to enter a code to validate.
label[for=participation_validated_coupon_code]:not(.step_error){
font-size: 0px;
}
label[for=participation_validated_coupon_code]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "YOUR TEXT";
}
2.2.2. Change the number of columns for answers in a quiz.
By default, the template of a campaign is configured so that the answers are displayed in two columns.
However, it is possible to modify the number of columns of your quiz or survey, to display the answers in columns according to the device. This functionality is available on demand. You can request it by writing us at help@cool-tabs.com so that we can activate it for free in your campaign.
2.2.3. Modify the text of the send button.
You can modify the text of the 'SEND' button, which appears on the entry form, and replace it with another text you want, for example, 'SEND INFORMATION', using the following CSS.
#js_cool_promo_submit_button::after, .wizard > .actions a[href='#finish']::after{
content: 'Send information';
font-size: 1rem;
}
#js_cool_promo_submit_button, .wizard > .actions a[href='#finish']{
font-size: 0px;
}
2.3. Page after participate.
2.3.1. Download button.
In coupon distribution campaigns, in which the download of the coupon is configured on the page after participation, you can modify the text of the 'DOWNLOAD COUPON' button.
.ct_download_coupon_button .m_btn {
font-size: 0;
}
.ct_download_coupon_button .m_btn::before {
display: inline-block;
font-family: inherit;
font-size: 1rem;
color: inherit;
content: "DOWNLOAD TICKET";
}
To change the text of the 'DOWNLOAD' button that appears when a download file is added to the page after participation, use the following code:
.download_row .section .download_btn {
font-size: 0;
}
.download_row .section .download_btn::before {
display: inline-block;
font-family: inherit;
font-size: 1rem;
color: inherit;
content: "DOWNLOAD EBOOK";
}
2.3.2. See all entries button.
If you have enabled public participations, so that the rest of the users can see who has participated, you can modify the text of the 'SEE ALL ENTRIES' button using the following rule.
.section .btn.link_btn_goto span {
font-size: 0;
}
.section .btn.link_btn_goto span::before {
display: inline-block;
font-family: inherit;
font-size: 1rem;
color: inherit;
content: "SEE OTHER PARTICIPANTS";
}
2.3.3. 'Thank you for participating' message stripe.
By default, on the screen after participating, a thank you for participating message is displayed, framed in a strip.
You can hide it with the following CSS rule.
.flash_participations_notice {
display: none;
}
2.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}};
}
3. Other specifications.
If you have any questions or need help, you can contact us at help@cool-tabs.com.
4. 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.
Comments
0 comments
Please sign in to leave a comment.