Cool Promo and Cool Promo White Label applications allow you to customise your promotion with custom themes to change your promo’s layout by adding different colours and styles. These themes allow you to change some basic aspects of your promotion. However, if you are looking to get a more sophisticated level of customisation, this can be achieved using different styles and images. If this is what you want, you just need to install Cool Promo or Cool Promo White Label and go to section 2. Promotion design, and choose the option “empty” (blank) in custom themes.

Below we explain step by step how you can include the new empty theme feature in your promotion, as well as its different settings and customisation options. There are several options to choose from:

– Use main image only, with no description.

– Use promo description only.

– Use both main image and promo description.

  • If your main content or image provides all the information about the mechanics of the contest and you don’t need to include any additional information, then you may want to use the main image onlyoption. When participants click on this main image, they will be redirected to the promotion’s entry form. Before s/he can participate, the application verifies whether or not the user is fan of the page. In case he isn´t, a little dialog box will appear so that the user can click on “like” on the page.

The layout will be the following:

A link to the legal terms will always be visible below the promotion’s description. A button to participate and the links to view users’ contributions, and your own contribution, will also be visible by default. However, as we will explain later, you can either hide them or change their position or layout.

  • If you decide to go for the second option, use the promotion description only, no image will appear on the promotion. This explains why it isn’t necessary to upload any image on section “main promotion image”. What you can do, though, is to include images, text or even html and css in the promotion description, using the editor.

When you have uploaded the image, you can select the size you wish your description to have. The maximum width is 835px, covering the whole width of the promotion.

The html editor allows you to edit the images and texts you want to include in your promotion description. This feature help you to obtain a more advanced customisation. Similarly, all the images you select for your promotion description will include a link so users can click on them and access the participation form of your promotion.

  • The last option is what we call the “standard option”, that is, to use both the main image and the promotion description. This option includes the main image of your promotion and then, the description of it. As it was the case in the option before, you can decide whether to use text only in the description or include an extra image with the editor.

  • Another feature we can set up is to select a different image for each type of user. Not only can you use a different layout for fans and non-fans, but you can also decide whether or not you wish to show the promotion description to the users who haven’t still become fans of the page. We recommend you to use an image of a maximum width 740px (we explain this in detail in this tutorial), the length is completely up to you.

This is what users who still haven’t become fans of your Facebook page will see:

  • You can also set it up to show a different content before and after the promotion has taken place. In this case, the “there is no promotion running at the moment” box, which appears by default, will not be shown. You can edit both contents using the html editor, which allows you to include images, text, and html.

  • If you wish to customise the colours of your promotion, you can do it in section 2. “Promotion design”. On this section you can change the background colour or even upload a cover photo.

Selecting a background colour is very simple and intuitive if you use our “colour selector”. The images below give you an idea of the final layout:

 

You can also change the background colour of the promotion, which is white by default. You can change this feature both on the fan page (that is, the first image we showed you earlier), and on the canvas (the second one). In order to do this, you need to activate the option “Enable customised Css” on the promotion editor. This feature allows you to include css rules to change the layout of the various elements of your promotion. This is the rule you need to include to change the white background colour of the fan page’s layout:

.main_body {background-color: #B8E3FF}

We have used the same hexadecimal colour code (#B8E3FF) that we did in the colour selector to change the promotion’s background colour. The ‘#B8E3FF” number refers to the colour we have selected (in hexadecimal code). It’s by changing this code that you can obtain the various colours. The following website will help you know which colour you have selected: Website. Don’t forget all codes must start with the ‘#’ symbol.

If you also want to change the canvas of your application, we offer two different options. The first option allows you to turn a part of the white background into blue:

.fbcanvas .wrapper {background-color: #B8E3FF}

The second one would change the colour of all boxes (which is white by default). As explained earlier, you just need to change the hexadecimal code for the colour:

.fbcanvas .header_info_container {background-color: #B8E3FF}
.fbcanvas .container {background-color: #B8E3FF}

See this tutorial for a detailed explanation on how to customise background colours and images.

  • Several links will be visible at the bottom of the promotion: The legal terms, the “participate” button, the “see my contribution” button, etc. These links can also be customised if you wish them to be shown differently.

In order to customise the links, you need to continue creating rules in the “Customised Css” field of your promotion. Let’s say you want to change the colour of the links to an orangey colour, then you can enter the following code in the customised Css field:

a {colour: #FF9933;}

Now you just need to change the colour of the button, which is still blue. Use the following rules to do so:

background: -webkit-gradient(linear, left top, right bottom, from(#FF9933), to(#FF9933));
background: -moz-linear-gradient(top, #FF9933, #FF9933);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9933', endColorstr='#FF9933');
As it was the case in the previous example, the most important thing we need to consider are the codes, starting with a '#'symbol.

These rules are designed to apply a gradient colour to the button. Each rule includes the same colour code twice (#FF9933). You must always add all three of them, since each of them refers to a different browser.

This means that the button starts with colour ‘FF9933′ and gradually goes back to the same colour ‘FF9933′. You can also play around with colours to get a different effect. If you wish to add a darker orange colour, you can try the ‘CE5600′, for example:

background: -webkit-gradient(linear, left top, right bottom, from(#FF9933), to(#CE5600));
background: -moz-linear-gradient(top, #FF9933, #CE5600);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9933', endColorstr='#CE5600');

  • As mentioned earlier, when you click on any of the images of your promotion (it doesn’t matter if it’s the main image or any of the images you’ve included in the promotion description), you will be directed to the participation form. Then, how can I hide these buttons or links from my promotion? We advise you not to hide the legal terms link, as it is important that it is always visible to users willing to take part in the contests. However, we’re now going to explain how to hide the other three buttons from the bottom of your promo’s image.

– You can hide the “enter” button with this code:

p.participate {display: none;}

– And this is what you need to enter if you wish to hide the “View entries and vote” link:

.entries_button .vote_button{display: none}

– Finally, if you want to hide the “View my entry” link, you can add the following:

.entries_button .my_entry_link{display: none}

This is how your promotion would look like if you decide to hide all buttons and links:

Another possibility is to integrate these links into your promotion’s design, so that you can place them wherever you want. The following rule will allow you to move all the three links at the same time:

#cool_promo_participate {position: absolute; top: 840px; left: 500px}

In order for you to change the position all the buttons, you need to change the top and left values which we have set up at 840px and 500px,respectively. The top value is the distance between the top promotion margin and the line where you start including the different elements of the promotion, and the left value designates the left margin. Therefore, it’s by playing around with these two values that you can change the position of the various elements.

The colour change feature for links can also be combined with hiding some of them. You can, for instance, decide to show the enter button only, and not to include the other two links, using the following rule:

.entries_button .vote_button{display: none}
#cool_promo_participate {position: absolute; top: 840px; left: 500px}
.entries_button .my_entry_link{display: none}

Setting up the participation form

We have looked at how to set up the main elements of your promotion in detail. However, we still need to go through a very important part of the promotion: the form users need to fill in to participate.

As we explained above, the first thing you can do is to change the background colour. To do this, you can use the same colour selector we mentioned in the section before. The background colour you select here will be used at all stages of your promotion.

This is how your form will look like if you just change the background colour:

If you then want to change the white dialog box, you’ll need to create the following rules, which you will enter in the ‘Customised Css” section of your promotion. As explained earlier, the hexadecimal colour code is made of a six-digit code starting with the ‘#’ symbol.

body .wrapper, .form_container{background-color: #B8E3FF}

This is how your form will look like if you change the colour of the box:

You can also change the colour of the text box edges to be filled in by users. For instance, you can enter the following:

input.text, textarea.uniform, input.checkbox, input.file{border: solid 2px #069}

Your form will then look like this:

If you wish to change the colour and the width, you need to change the end:

solid 2px #069

‘2px’ designates the width of the edge (this can also be 1px, 3px, 4px, etc.). As usual, the #069 code designates the colour.

Lastly, you can also change the position of the ‘Send’ button of the promotion. You can use the following rules to do so:

form button.participate_button{position: absolute;top: 396px; right: 225px}

And this is how it would like:

As we explained earlier, if you change the top and right values, the button will move accordingly, either to the top or to the left.

As you can see, the range of features to customise your promotion and make it look more original and attractive is wider and wider. If, after having read this tutorial, you still want to customise some elements of your promotion and you’re not sure how to do it, please don’t hesitate to contact us.