Articles in this section

Customise the Winners Page with our Advanced Personalization

Avatar
Cool Tabs Support
Updated
Follow

The winners' list page can be fully customised with the app Cool Promo White Label. In the "Design" section, you must click on the field "Use your own complete HTML for the winners page (only White Label)". 

4.PNG

 

Bear in mind that you can also edit the html for the winners page from the preview page. Thus, you can modify the html and css, saving it and checking how it shows directly.

 

Html template for the winners page.

There are two {{{handlebars}}} that you must always include:  <!-- {{{ cool_tabs_head }}} --> between the tags <head></head> and <!-- {{{ cool_tabs_body_end }}} --> at the end of <body>. Otherwise, your html won't work properly. You also must include the winners variable: <!-- {{{ winners }}} -->.

You can include other elements as well, like a "Share" button, a link to the legal conditions etc., in case your campaign has different stages and you want to select one or more winners in each of them. These elements must include the following classes in order to work properly:

  • x_cool_tabs_participate_button = Link to the entry form.
  • x_cool_tabs_share_button_participation = Link to share the campaign.
  • x_cool_tabs_participations_link = Link to the participants' public list.
  • x_cool_tabs_legal_options_button = Link to legal conditions.

 

Example of a custom winners page: 

Ejemplo-pagina-ganadores.png

 

Html template:

<html {{{ cool_tabs_html_attributes }}} >

<head>
<!-- {{{cool_tabs_head}}} -->

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</head>
</html>
<body>

<div class="wrapper winners_layout">

  <!-- {{{winners}}} -->

</div>

<body {{{ cool_tabs_body_attributes }}} >

<!-- {{{ cool_tabs_body_end }}} -->

</body>

  

Custom css:

.winners_layout{
font-family: 'Helvetica';
color: #fff;
width: 100%;
height: 810px;
background: url('https://d3t4cctm88txy4.cloudfront.net/assets/pictures/c9f7838095cb11e6b604952aab10bb91/content_winners.png') no-repeat;
}
.winner_0 .x_winner_name{
position: absolute;
left: 33%;
top: 59%;
font-size: 12px;
}
.winner_1 .x_winner_name{
position: absolute;
left: 33%;
top: 58%;
font-size: 12px;
}
.x_winner_header{
font-family: 'Helvetica';
color: #fff;
}
.full_section .action_row{
display: none;
}
.participate_button span{
color: white!important;
font-size: 18px;
}
.actions_row .m_actions{
display: none;
}
.wrapper{
text-align: center;
margin: 0 auto;
width: 810px;
background-color: #fff;
}
.x_winner_avatar img{
width: 59px;
height: 59px;
border-radius: 50%;
}
.x_winner_date{
display :none;
}
.winner_0{
position: absolute;
top: 14.5%;
left: 33.6%;
}
.winner_1{
position: absolute;
top: 19.6%;
left: 33.6%;
}
.winners_layout{
overflow: hidden;
}
.x_alternates_header{
z-index: 1;
position: absolute;
top: 31%;
left: 0;
right: 0;
font-family: 'Helvetica';
color: #fff;
}
.x_alternate_list{
background-color: darkgoldenrod;
overflow: hidden;
border: 1px solid #cdcdcd;
padding: 15px;
position: absolute;
width: 560px;
top: 31%;
left: 25%;
padding-top: 40px;
right: 0;
font-family: 'Helvetica';
color: #fff;
}
.x_winner_list{
overflow: hidden;
padding: 15px;
}
.x_winner_list li,
.x_alternate_list li{
list-style: none;
float: left;
width: 50%;
}
.x_winner_avatar{
display: block;
margin-bottom: 10px;
}
.x_alternates_header{
clear: both;
}

  

Related content.

Comments

0 comments

Please sign in to leave a comment.

Related articles