How to Style the Pop-up
Navigate to app.cookieinformation.com -> Consent Solutions -> pick the consent solution you want to customize-> Pop-up -> Advanced Settings
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: