How to Configurate a Custom css for a Campaign

1. Introduction

2. How to Configurate.

2.1. Participate button.

2.2. Change the colors of all the buttons in your campaign.

2.3. Home details.

2.4. Entry form styles.

2.5. Share button.

3. Contenido relacionado.

1. Introduction.

You can fully customise your promotions and competitions with Cool Promo and Cool Promo White Label. You can choose different colors and styles and customise your campaign in a simple way, but also in an advanced way by adding your own style sheet or css to the app.

How and when to use your own style sheet (custom .css).

Customising our style sheet, we can get a better and more branded look&feel. We can move or hide elements, include new ones in our template or completely change the graphic line of the campaign.

Styles of the campaign landing page or homepage.

The master class of the landing page is ‘.home_layout’, so we should take any rule we want to use (and that will only be valid for the homepage) from this class.

2. How to Configurate.

2.1. Participate button.

The main class is .home_layout .participate_button and .tt_new_promo_game_link (taking it from .home_layout).

Modify colors:

.home_layout .participate_button,
.home_layout .tt_new_promo_game_link {
 background-color: #45eda3;
}

Hide Participate Button:

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

Change the "Participate Button" text for another one, like 'I want to join!'

.home_layout .participate_button::before,
.home_layout .tt_new_promo_game_link::before {
 content: 'Entrar';
 font-size: 16px;
}
.home_layout .participate_button,
.home_layout .tt_new_promo_game_link {
 font-size: 0px;
}

Move the "participate Button".

Modify the values "top" and "left" to change the location of this button.

.home_layout .section+.full_section .participate_button,
.home_layout .section+.full_section .tt_new_promo_game_link{
 position: absolute;
 top: 30%;
 left: 43%;
}

2.2. Change the colors of all the buttons in your campaign.

.m_header_step:before, .m_btn, .m_btn:hover, .m_countdown_title, .m_countdown_progress, .m_option:after, .m_option_input:checked + .m_option_label, .m_option_label:after, .m_pagination_active, .m_tab_nav_item_active, .m_options_page.m_options_page_active:before, .m_popup_header, .notice, .alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus, .wizard > .steps .done a, .wizard > .actions a, .gallery_entry_header,.home_layout .participate_button, .home_layout .tt_new_promo_game_link{
 background-color: #45eda3;
}

2.3. Home details.

Hide the "View my participation" section.

.home_layout .m_action_link {
display: none;
}

Hide the "Details" section.

.home_layout div:nth-child(5) {
   display: none;
}

Hide the "Share" button.

Hide black banner.

.home_layout .tac_row{
 display: none;
}

Hide the border.

.home_layout .header_section .m_banner{
 border-bottom: none;
}

Change the colors of all the links in your campaign.

.m_header, .m_btn_goto, .link_btn_goto, .m_text_content .link_btn_goto, .m_score_indicator, .m_ribbon_text span, .m_comment_no, .m_actions_viewport .ok, .m_entries_entry_info .ok, .pagination a, .certificate_head .m_header a, .star_row, .video_options .active,.link_btn, .m_action_share_title, .m_score_value, .m_btn_goto[disabled], .m_user_created_at{
color: #8454FF;
 }

Remove all the grey backgrounds.

.m_figure_content, .m_comment_header, .home_layout .action_row, .footer_section, .footer_text, .points_row_content, .activity_row, .coupon, .m_entries_entry_figure{
background-color: transparent;
 }

Change the color of the borders.

.m_banner, .m_option_input:checked + .m_option_label, .m_tab_nav_item.m_tab_nav_item_active, .m_wysiwyg_color, .m_figure_caption, .m_figure_combined .m_figure_content{
border-color: red;
}

2.4. Entry form styles.

The main class on this page is '.form_layout’, so we should take any rule we want to use from this class.

Remove grey color from the boxes.

.form_fields .form_input span, .select{
background-color: transparent;
}

Change the border of the text box.

.m_header_title, .m_tab_nav_item, .form_fields .form_input input, .m_wysiwyg textarea, .select_content, .row + .row, .fields, .fields + .row, .m_message:after, .pagination a{
border-color: #8e47d3;
}

Modify the "Send" text in the form button.

#js_cool_promo_submit_button:before, .wizard > .actions a[href='#finish']:before{
content: 'Enviar información';
font-size: 16px;
}
#js_cool_promo_submit_button, .wizard > .actions a[href='#finish']{
font-size: 0px;
}

Modify the text of the form fields.

In this case, we will change the text that appears by default in a validation campaign of codes or coupons. We just have to paste this rule in the custom CSS and change the text that appears in bold.

label[for=participation_validated_coupon_code]{
 font-size: 0px!important;
}
label[for=participation_validated_coupon_code]:before{
 font-size: 16px!important;
 content: "Text";
}

Columns in the answers of a quiz.

If we want to modify the number of columns and use a single column fixed, we will use the following rule:

​.m_options li{
width: calc(100% - 1rem);
}

4. Related content.

More information in our Styles Guide (ES) >>

Advanced Personalization For Your Campaign >>