Skip to main content

Change colors in the consent popup

Learn how to change colors in the consent popup.

Updated over 5 months ago

You can change colors in the consent popup to match your branding. In this article, we’ll show you how to do it.

Before you start

Here are a few things to know before you start:

  • The following guide is for Overlay v2 and Overlay v3 templates, version 1.1.0 or higher.
    ​

    Starting from version 1.1.0 for those templates, we have introduced CSS (Cascading Style Sheet) variables. They let you change the colors of the consent popup. To use these variables, enter your desired popup color in HEX format, for instance, #2C622C.
    ​
    These variables are at the top of the CSS box.

  • Here’s a breakdown of which each variable manages elements:

Variable name

Elements

--main-color

  • Renew icon color

  • Accept button color

  • Consent toggle color

  • Cookie category link hover color

--link-color

  • About cookies link

  • Data processor privacy policy link

  • All links on the cookie policy page

--text-color

  • All non-clickable text

  • Cookie category title (except Cookie Information branding text)

--hover-color

  • Accept buttons hover color

--decline-color

  • Decline all / Save settings / Settings button background color

--decline-text

  • Decline all / Save settings / Settings button text color

--decline-hover

  • Decline all / Save settings / Settings button background hover color

--footer-background

  • Changes the background color for the main text area, category toggles, cookie policy page and branding

Change colors in a consent popup

To change colors in a consent popup, follow these steps:


1. In Consent Solutions, find the consent solution you want to change the colors in the consent popup.


2. Go to Pop-up appearance > Advanced options.

3. Click Expand.

advanced option of the consent popup in Cookie Information

4. Let’s say you want to change the text color. In CSS, find the variable representing the text --text-color.

text color variable of the consent popup in Cookie Information

5. Replace the current HEX value with the HEX code of your desired color.

the color HEX value in the Cookie Information consent popup

Note: To change the colors of other popup elements, follow the same steps, but use the specific variable and the HEX code for your desired color.

6. Click Save and publish.

7. Done.

Quick guide: Watch this short video for a step-by-step walkthrough of changing the colors in the consent popup:

Related articles:

Did this answer your question?