Introduction

We provide CSS classes prefixed with "enzuzo-" to help you make targeted style changes to our platform. In this help doc, we'll provide you with an overview of how to use CSS classes to make style changes to our platform.

Assuming you have a basic understanding of CSS, we'll focus on how to use these classes to target specific elements on the page. With our guidance, you'll be able to make the customizations you need to create an optimal experience for yourself and your team.

Our policies are designed to inherit fonts/colors from your website theme so in most cases major CSS customizations are not needed. If customizations are necessary you can utilize our prefixed classes to target and customize the policy as needed. For example, the policy section titles use a class of enzuzo-PolicySectionHeader. Targeting this class will change the style of all section headers on the page. The following snippet of code is an example of what you would use to turn the section headers red.

.__enzuzo-root-privacy h6.enzuzo-PolicySectionHeader { color: red; }

In comparison to the cookie banner, policy CSS customizations are quite straightforward.

If you need additional customizations of the cookie banner, and you have access to your website's CSS/Theme files you can add the custom code there. While the CSS customizations are available in app, you will need to be on a paid plan to take advantage of them.

Enzuzo currently directly supports the styling customization of the banner + cookie manager through CSS selectors, To personalize your cookie manager buttons, target the button classes and IDs by editing the “Custom CSS” found on the “CSS” page found on the top nav.

You can target the following Class and IDs to customize the 3 Cookie Manager buttons, the examples below changes the cookie manager button text color:

#accept-modal.enzuzo-modal-button-accept { color: red; }

This will target the Cookie Manager “Allow Button Text” button text to be red.

#reject-modal.enzuzo-modal-button-reject { color: blue; }

This will target the Cookie Manager “Decline Button Text” to be blue.

#confirm-modal.enzuzo-modal-button-confirm { color: yellow; }

This will target the Cookie Manager “Accept Selected Button Text” to be yellow.

The “Manage Cookies” popup will look like the following with the customized CSS styling:

You can target the following Class and IDs to customize the Cookie Banner buttons, the examples below changes the cookie manager button background color:

#cookie-notification__decline.enzuzo-notification-button.notification-button.button-edgeless.button-accept { background-color : red; }

This will target the Cookie Banner "Decline" button to change the background colour to be red.

#cookie-notification__accept.enzuzo-notification-button.notification-button.button-edgeless.button-accept { background-color : green; }

This will target the Cookie Banner "Accept" button to change the background colour to be green.

The "Cookie Banner" will look like the following with the customized CSS styling:

Note: These are just basic guidelines, more specific selectors may need to be constructed to suite your website/theme.

For more information on CSS selectors visit https://www.w3schools.com/CSSREF/css_selectors.php