Styling the consent pop-up

• Styling for Overlay v2 and Overlay v3 templates (version 1.1.0 or higher)

  • Inserting your logo

  • Removing your logo

• Styling Overlay v2 and Overlay v3 templates (version 1.0.9 or lower)

  • "About Cookies" text colour

  • Accept/Decline button colours

  • Change mouseover colour

  • Toggles colour

How to Style the Pop-up

1. Navigate to app.cookieinformation.com -> Consent Solutions -> pick the consent solution you want to customize-> Pop-up -> Advanced Settings

2. Most style changes, like colours, are handled in the Cascading Style Sheet (CSS) box (1). Logo is handled in Javascript functions bow (2)

Styling for Overlay v2 and Overlay v3 templates (version 1.1.0 or higher)

Starting from version 1.1.0 for templates Overlay v2 and Overlay v3, we have introduced CSS variables. These variables allow changing colours on the consent pop-up easily. All that is required is the colour you would like to use on the pop-up in HEX format, for example, #2C622C.

To change the colours, you need to change the HEX colour value next to the variable name in the Cascading Style Sheet(CSS) box. These variables will be located at the top of the box.

See the video for more details:

Below is the description of which elements each of the variables control:

Inserting your logo

To insert 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 click the Pop-up tab.

• 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 remove 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"; shortly after, you should see that your logo has been removed.

Styling Overlay v2 and Overlay v3 templates (version 1.0.9 or lower)

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

Related articles:

• Consent pop-up template versions

• Making your own pop-up template

• Pop-up templates