How to Configurate a Custom css for a Campaign

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 to customise a promotion or competition using your own style sheet or .css

First of all, you must open the app Cool Promo or Cool Promo White Label, go to the "Promotion Design" section and choose "Empty"among the custom themes that will appear.

Keep in mind that, if you choose the "Empty" theme but don't customise it with your own css, the description and information of the "Details" section won't appear by default (dates, votes, total number of participants). 

You should also consider if you only want to customise the background color, background picture, font color and font type. If so, it won't be necessary to use a custom css, as you can modify these options from the "Promotion design" section or from the preview page, where you can modify these options and check the result directly. 

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.

Participate Button 

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

• Modify colors:

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

.home_layout .participate_button:after {
background-color: #89c893;
}

• 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" inside the main picture: 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%;
}

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

.m_btn:after, .wizard > .steps .current a, .wizard > .actions a:after,.home_layout .participate_button:after{
background-color: #89c893;
}

Home details

• Hide this section:

.section+.section{
 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 some color details 

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

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

More information in our Styles Guide (ES) >>