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 |
|
--link-color |
|
--text-color |
|
--hover-color |
|
--decline-color |
|
--decline-text |
|
--decline-hover |
|
--footer-background |
|
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.
4. Let’s say you want to change the text color. In CSS, find the variable representing the text --text-color.
5. Replace the current HEX value with the HEX code of your desired color.
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: