Editing the Consent Pop-up

Changing the colors
Inserting your logo
Auto remove the empty cookie categories

Changing the colors

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

All of the color changes follow the same first 2 steps

Navigate to app.cookieinformation.com -> Consent Solutions -> Pick the Consent Solution you want to customize-> Pop-up -> Advanced Settings
Find the following code line in the Cascading Style Sheet(CSS) box:

How to change "About Cookies" text color

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

.coi-banner__policy { color: #687600; }

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

For Accept Button:

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

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

For Decline Button:

Replace underlined value with the color of your choice.

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

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

Replace underlined value with the color of your choice.

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

Replace the color value with your choice of "Mouse-over" color.

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

How to change the privacy control toggle color

Replace the color value with your choice of "Toggle" color.

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

Replace the fill value with the color of your choice.

#Coi-Renew .renew_path {  fill: #003087 !important;}

Once you are done changing the values remember to press "Save & Publish"

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.

In some cases, where you would like to remove a category since you do not have any cookies in that category.

These changes will be made in the consent solution - Pop-up - Advanced Settings - HTML.

To remove categories that do not contain any cookies, you need to add this code snippet:

#{{#if this.cookie_type_count}}

right after the

#{{#each cookie_categories}}

And close the if statement with

#{{/if}}

right before

#{{/each}}

This should be done on both instances of #{{#each cookie_categories}}.

Note: If our scanner was unable to scan your website, all of the cookie categories will be hidden, since there are no cookies in any of the categories. And the pop-up might appear to have missing toggles. See the example below.