How to Configurate a Custom css for a Campaign

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 (taking it from .home_layout).

Modify colors:

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

Hide Participate Button:

.home_layout .participate_button {
display: none;
}

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

.home_layout .participate_button:before {
 content: 'Entrar';
 font-size: 16px;
 }
.home_layout .participate_button {
 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 {
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{
background-color: #45eda3;
}

2.3. Home details.

Hide the "View my participation" and "Details" section.

.home_layout .section {
 display: none;
}

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 top line.

.home_layout .banner_row {
 display: 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;
}

4. Related content.

More information in our Styles Guide (ES) >>

Advanced Personalization For Your Campaign >>