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

  1. Navigate to app.cookieinformation.com -> Consent Solutions -> Pick the Consent Solution you want to customize-> Pop-up -> Advanced Settings
  2. 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;

How to change the cookie category text color on "Mouseover"

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

How to change the "Renew Consent" icon color

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 .pvg 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
mceclip0.png

Auto remove the empty cookie categories

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.

mceclip0.png
Did this answer your question?