Useful CSS to add extra design elements to your promotion.

You can use CSS to enhance the look of your promotion. Here are some useful CSS codes you could use.

When creating promotions on BeeLiked ourselves, we often rely on a bit of added CSS code to enhance the look. Simply copy the code in the examples below and add it to the 'Advanced' section on your Theme.

Transparent color block

If you need some text or an image to really stand out against your page background, you may want to add a block of color to sit behind it. You can make this color semi-transparent so that the background image still shows through. Here's what it looks like when the color is white.

The code that you need to achieve this effect is:

#blkd-page-start .blkd-block.blkd-block-top-content{
max-width: 840px;
margin:50px auto;
background: rgba(255, 255, 255, 0.4);
}

and for a similar effect on either the Start page or Lucky Draw page, use this:

.blkd-block.blkd-block-top-content{
max-width: 840px;
margin:50px auto;
background: rgba(255, 255, 255, 0.4);
}

Please note that the color referenced above is rgba(255,255,255) which is white, but it has a transparency of (0.4).

For black, you would use rgba(0,0,0), and you can vary the level of the transparency by changing the percentage, e.g. (0.8) to make it a more solid block.

To find other colors, try using Google's own color picker found at https://www.google.com/search?q=color+picker

or generate the RGBA color codes with the following:
https://cssgenerator.org/rgba-and-hex-color-generator.html

Some other cool effects can be achieved by targeting other areas of your page, and now that you know how to change the color, check out these examples:

If you want to add a white color to the very top section of your microsite, try this:

.blkd-block-template-header{ background: white; }

or, if you want to achieve the same effect as on the 'top content' and add a background color whilst restricting the size of the content box, try this:

.blkd-block-template-header{ max-width: 840px; margin:50px auto; background: red; }

Remove/disable buttons

Ok, so your promotion is over, and you'd like to stop people from entering, but you'd like your microsite to stay live, in that case, you've got a couple of options:

Remove the button entirely
```
.enter-btn{ display: none; }
```

Grey out the button and disable it

.enter-btn{ background: #EAEAEA; color: #CECECE; pointer-events: none; }

Change the size of a button

with a little bitt of css you can increase or decrease the size of your Enter button:

.enter-btn { font-size: 32px; }

Add an Enter button to the main content section on the Start Page

Sometimes you may want to move the Enter button around the Start page. First, you would use the above code to hide the default, and then you would add the following code to the edit (as source code) of the section you want it to appear.

<a class="btn btn-primary" href="#" onclick="location.href = blkd_params.steps[blkd_context.next_step].url; return false;">Play Now</a>

Hide the default Result Message 'finish' button

On your Result Messages, there is a default button we call 'Finish' - you can update its text and the URL it points to, but you may want to remove it totally. Currently, the only way to do that is with some CSS.

.step-share .next-btn{display: none; }

*Note that this button will still appear to show in the Builder but will not show in Preview.

Add a new Button to your Result Message (or anywhere else)

<p style="text-align:center;"> <a class="btn btn-primary btn-lg" href="https://replace-with-your-domain.com" target="_blank">Write text to display here</a> </p>

If you use this code to add a new button to your Result Message, you will probably also want to hide the default 'finish' button.