Custom Design

The cookie banner can be customised to match your website’s visual identity. The most common adjustments can be made in the settings tool under the Design tab. Here you can set:

• Light or dark design theme, or following the user's predefined choice
• The colour of the buttons and their text
• The font, including any brand-specific fonts for your website
• The rounding of the cookie banner and the buttons
• Whether your website should appear blurred in the background
• Whether visitors should be able to make individual choices for marketing and statistics
• The order in which the buttons are displayed

Custom CSS

If you want to adjust other parts of the appearance, you can write your own CSS code. The settings tool includes a built-in editor for this purpose. If you are using the function to display a cookie list on your website, this can also be customised with your own CSS. All design adjustments can therefore be made directly in the settings tool; you do not need to add CSS code to your website.

Please note that all CSS attributes are prefixed with:
html #CookieConsent .cookie-popup
You should therefore never include these attributes yourself.

We use CSS variables to define common properties. If the changes you want to make are available as variables, it’s best to adjust those. This means you will need to write less custom CSS and increase the likelihood that your changes will continue to work across future updates.

The following variables are defined. If you want to update them, simply wrap them with curly brackets:

{   
    --color_primary: #017abc;
    --color_secondary: #757575;
    --color_primary_text: #fff;
    --color_secondary_text: #fff;
    --color_border: rgba(0,0,0,.12);
    --color_outline: rgba(0,0,0,.5);
    --color_bg_main: #fff;
    --font_weight_bold: 700;
    --padding_desktop: 5em;
    --padding_mobile: 2.8em;
    --modal_width: 62em;
}

It’s recommended to use em as a unit wherever we do, as this improves accessibility for users who have set a different font size in their browser.

If you change text or button colours, make sure to pay close attention to contrast values so that accessibility in the dialogue is not compromised.

Related information