To maintain a consistent brand experience, you may want to customize the colors of Ezoic’s Consent Management modal to match your website’s design. While the default settings are designed for high visibility and compliance, you can use custom CSS to adjust the borders, buttons, and links.

Using Custom CSS

To change the colors of the modal, copy and paste the following CSS into your site's stylesheet or your WordPress "Additional CSS" section.

Note: Replace the hex code #fb9422 in the examples below with your preferred brand color. You can find hex codes here. 

/* Change the top border color of the consent dialog */
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner[style]
{
    border-top-color: #fb9422 !important;
}

/* Change the background color of the 'Accept All' button */
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-accept-all
{
    background-color: #fb9422 !important;
}

/* Change the text color of the secondary links (Privacy Policy, etc.) */
#ez-cookie-dialog-wrapper #ez-cookie-dialog a
{
    color: #fb9422 !important;
}

Where to add this code:

1. WordPress: Navigate to Appearance > Customize > Additional CSS.

2. Theme Stylesheet: Add it directly to your style.css file.

3. CSS Plugins: Use a plugin like "Simple Custom CSS" if you prefer not to edit theme files directly.

• The !important Tag: We use !important in the code above to ensure your custom styles override the default Ezoic styling.

• Contrast and Accessibility: When choosing colors, ensure there is high contrast between the button background and the text. This is not only a best practice for user experience but is also a requirement for many privacy regulations to ensure the modal is legible.

• Cache Clearing: After adding your CSS, remember to clear your site and Ezoic CDN cache to see the changes reflected on the front end.

If you need further assistance with changing the color of Ezoic's consent modal, please log in via support.ezoic.com to make use of our dedicated resources for support. We're here to help!