All Collections
Customisation and advanced settings
Consent pop-up in depth
Styling the consent pop-up
Styling the consent pop-up

This article will teach you how to style the consent pop-up by changing the button colours, inserting your own logo and more.

Piotr avatar
Written by Piotr
Updated over a week ago

How to Style the Pop-up

  1. Navigate to go.cookieinformation.com -> Consent Solutions -> pick the consent solution you want to customize-> Pop-up appearance -> Advanced options

  2. Most style changes, like colours, are handled in the Cascading Style Sheet (CSS) box. The logo is handled in the Javascript function below.

The following guide is for templates Overlay v2 and Overlay v3 version 1.1.0 or higher

Changing the colours

Starting from version 1.1.0 for templates Overlay v2 and Overlay v3, we have introduced CSS variables. These variables allow changing colours on the consent pop-up easily. All that is required is the colour you would like to use on the pop-up in HEX format, for example, #2C622C.

To change the colours, you need to change the HEX colour value next to the variable name in the Cascading Style Sheet(CSS) box. These variables will be located at the top of the box.

Below is the description of which elements are controlled by which of the variables:

Variable Name

Elements

--main-color

  • Renew icon colour

  • Accept button colour

  • Consent toggle colour

  • Cookie category link hover colour

--link-color

  • About cookies link

  • Data processor privacy policy link

  • All links on the cookie policy page

--text-color

  • All non-clickable text

  • Cookie category title (except cookie information branding text)

--hover-color

  • “Accept” buttons hover colour

--decline-color

  • "Decline all" / "Save settings" / "Settings" button background colour.

--decline-text

  • "Decline all" / "Save settings" / "Settings" button text colour.

--decline-hover

  • "Decline all" / "Save settings" / "Settings" button background hover colour.

--footer-background

  • Changes the background colour for the main text area, category toggles, cookie policy page and branding

Inserting your logo

To insert your own logo in the template Overlay and Overlay v2, you need to have a URL address pointing at the logo ready, like https://yourwebsite.com/images/mylogo.png

The logo has to be an URL to .png or .svg file and should not be a .jpeg file

In the JavaScript part of the code, replace the URL path with the one for your own logo in the variable imagePath. Then you may need to adjust the image width by changing the value in px in the variable logo.style.width

Moving your logo

The default placement for the insertion of your logo is in the bottom left-hand corner of the pop-up. If you would like to move this to the top corner instead, you can easily do so by following these steps:
​
In the same javascript function as before, you will need to find the code that looks like the following:
​

You will need to replace the 'coi-banner__footer' to 'coi-banner__text'. This should move the logo placement to the top of the pop-up.
​

Removing your logo

If you'd like to remove your logo find the imagePath variable as described above. There, you should see a link to your logo.

Highlight the link and delete it so that the line looks like this:

var imagePath= ''; // Change this to your own logo

Related articles:

Did this answer your question?