Styling the consent pop-up

Changing button colours
Inserting your logo
- Removing your logo

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.