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