Go to Cookie Information
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.
Anna Madsen avatar
Written by Anna Madsen
Updated over a week ago

How to Style the Pop-up

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

  2. Most style changes, like colours, for example, are handled in the Cascading Style Sheet (CSS) box.

On the example below, you can see our Overlay V2 pop-up template styled with a custom accept button colour (1) and custom logo (2)

Changing the colours

Note: This guide is compatible with templates Overlay v2 and Sidebar.

How to change the "About Cookies" text colour

Insert the below code snippet in the Cascading Style Sheet(CSS) box above the line containing #Coi-Renew { like in the snippet below. Remember to change the colour value to your own colour.

.coi-banner__policy { 
    color: #687600; 
}

How to change the "Accept / Decline Cookies" button and text colour

For the "Accept" button:

Replace the colour value with your choice of text colour and replace the background with your choice of button colour.

.coi-banner__accept { 
    background: #1C771C; 
    color: #fff; 
    text-decoration: none;
}

For "Decline" button:

Replace underlined value with the colour of your choice.

.coi-banner__lastpage,
.coi-banner__nextpage,
.coi-banner__decline {  
    border:solid 1px #dddddd; 
    background: #f6f6f6;

To change the colour of the text on the decline button, find the following code line in the Cascading Style Sheet (CSS) box:

Replace underlined value with the colour of your choice.

.coi-banner__accept,
.coi-banner__decline,
.coi-banner__lastpage, 
.coi-banner__nextpage { 
    color: #222;

How to change the cookie category text colour on "mouseover"

Replace the colour value with your choice of "mouseover" colour.

.coi-consent-banner__name-container 
.ci-btn-tab-active, 
.coi-consent-banner__category-name:hover { 
    color: #ffc0cb;
}

How to change the privacy control toggle colour

Replace the colour value with your choice of toggle colour.

.coi-checkboxes input[type=checkbox]:checked + .checkbox-toggle {   
    background: #007AD0;
}

Inserting your logo

Inserting your own logo in the template Overlay and Overlay v2.

You need to have a URL address pointing at the logo ready, like:

https://yourwesomewebsite.com/images/mylogo.png

Note that the logo has to be an URL (.png or .svg file), and should not be a jpeg. file

  • In the platform navigate to your consent solution and go to the tab Pop-up

  • Scroll down and click "Advanced Settings" to roll out the editor fields for the HTML, CSS, and Javascript.

  • In the JavaScript area, 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

  • Finish by clicking "SAVE & PUBLISH"

Removing your logo

If you'd like to get rid of your logo, please follow the steps above and find the imagePath variable. 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

Finally, click "SAVE & PUBLISH" and shortly after you should see that your logo has been removed.

Improved pop-up styling for Overlay v2 and Overlay v3 templates

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

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

Below is the description of which elements each of the variables control:

--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

Related articles:

Did this answer your question?