Cool Tabs constantly strives to update and improve the functions of our applications. Three new features have just been introduced: Background picture, customised themes and CSS. These new options are already available for applications Cool Promo, Buzz Promo and their White Label versions. We explain step by step how to use and make the most of them on your promos.

Once you have created a tab and chosen the application you want to use for your promotion, you will be directed to step 1. “Basic information”. Once you have completed this part, move on to step 2. “Promotion design”. It’s at this stage that you start customising your promotion.

When you have completed the first two steps (“presentation video”, “main promotion’s image”, “picture shown after users have participated” and “message shown after users have participated”), you will see the new functions. The first one is “Background picture to be displayed on your promotion’s page”.

1. BACKGROUND PICTURE

This new function will allow you to customise your background picture instead of using the default Cool-Tabs background. This image will be displayed on the background throughout all the steps of the promotion, that is, from the very first step in which users are invited to participate, to the moment where they fill in the participation form, the list of contributions is published and voting starts. For this image to be displayed correctly, we recommend you to use a picture that is 810 px wide. This is an example of a promotion in which a customised background has been used with an appropriate image, in such a way that tiling hasn’t been necessary.

As for the orientation of the background picture, the default option marked is “do not tile”- This is the best thing to do if your image takes up the whole of the promotion background, as it was the case in the example. If the picture is smaller than this size, then several options are offered “tile horizontally”, “tile vertically”, or “in both directions”. In this way, the image will fill the whole of the background space. Here are two examples so you can see the result.

In this case, the image is not large enough to cover the whole background. This is why, we’ve chosen the option “tile in both directions”, that is, both horizontally and vertically. Here is the result:

In this other example, the image has the right width to cover the page, but it’s not long enough. This is why, we have decided to “tile vertically”.

2. CUSTOMISED THEMES

The other new function is “Customised themes”. This option allows you to choose whether to use the“original” theme, which is the default theme used in all Cool-Tabs applications, or else customise it with the company’s colours and styles. This is how a promotion using the “original” theme looks like.

If you decide to go for a bespoke image for your promotion, you can choose from various themes “minimal”, “blue”, “red”, “black”, and “green”. When you click any of these five options, then you can select a “background colour”. If you want to use a different colour, you just need to write it (e.g. if you want to use a black background, you will write #000000), or else you can use the colour palette.

The best way to explain this is by using some examples. If you click on “minimal” but you don’t change the background picture’s image, the promotion’s background will be greyish with black buttons. But, as we have explained above, you can change the background colour.

Here are two more examples. If you click on the “red” theme but you don’t change the background colour, the promotion will look as follows: With a greyish background and some details highlighted in red. The colour of these details – the buttons and the strips highlighting the promotion’s name and the list of participants – change according to the theme you use.

Also, if you click on “blue” and you replace the background colour with the same blue colour used by default in this theme, you will create the following effect:

As you can see, there are several options, you just need to try them and choose the one that best meets your needs.

3. CUSTOMISED CSS

The third and last function that we are going to cover in this tutorial are “customised CSS”. This feature is ideal if you want to change the promotion’s layout completely. As you can see, the options of this function are unlimited. You can edit, move or hide any of the default elements of the application.

If you want to use this function, you just need to click on “enable customised css”. When you have enabled this option, a box will then appear, where you can create a css to change the promotion’s design and layout, so as to adapt them to your own needs and those of your customers.

Here we provide two examples of promotions which have been customised using CSS. Both of them are good examples of promotions where the colours have been adapted to match the corporate colours. Moreover, on the second example, on the “how to participate” section, not only the colour has changed, but also the typography.

If after reading this tutorial, you still have questions on how to implement the new features on your promotion, don’t hesitate to contact us.