Styling the Elemental banner

Legacy article

This guide describes how you can use custom colors for the Elemental consent banner. 
A new banner called Swift was released in July 2021 which has additional customization options. For free users the Elemental banner will be discontinued after November 2021.

The Elemental consent banner can be styled in a number of ways.

1. Styling features built in to Cookiebot (no coding needed):

With a premium subscription you can easily style the banner using the built-in templates.

Choose from 2 pre-defined color schemes (white and black) or a custom color scheme. The custom color scheme allows you to easily adjust the colors of the cookie consent banner’s backgrounds, text, buttons, button texts and borders. You can choose a color you like from the color palette or enter a HEX code.

You can also upload your logo – as drag-and-drop or by uploading a file.

In the free subscription, a standard color scheme is available and no option to upload a logo.

Here’s how to do it:

1. Log in to your account https://manage.cookiebot.com/goto/login
2. Go to the menu point ‘Settings’ and the tab ‘Dialog’
3. From the ‘Theme’ drop-down menu choose ‘white’, ‘dark’ or ‘custom’.

To change the colors:

1. In the custom template, you can change the colors by clicking on the small arrow next to each box or by clicking on the colored area.
2. Choose the color you like – either by clicking anywhere on the color palette, by using the slider or by entering a HEX code.
3. Click ‘apply’ to apply the chosen color.
4. Preview the styling to see what it would look like on your website (screen icon in the blue bar on the left-hand side)
5. If you are happy with the styling, save your settings (tick mark in the blue bar on the left-hand side)

To customize or add a logo:

1. Choose if you want to display a logo on the cookie consent banner or not (tick or un-tick the box)
2. Make use of the logo icon that is already on there. You can change its color from the color menu just below it (works just like the color palette above)
3. Use your own logo. Drag and drop the file to the grey shaded area or select a file to upload
4. Save your settings (tick mark in the blue bar on the left-hand side)

2. Styling possible using the CSS !important rule:

Alternatively – or in addition to the built-in styling options – you can style the cookie consent banner further by overriding the CSS styling in your website’s own style sheet/CSS file. You can do this by using the CSS !important rule. For example, to change the font:

#CybotCookiebotDialog { font-family: Helvetica!important; }

3. Build your own cookie consent banner exactly the way you want it:

There is a custom template available from the ‘Template’ drop-down menu. With this you can build your banner using HTML, CSS and Javascript and applying your own logic. HTML placeholders and naming conventions are provided. You should choose this option only if you have coding skills.