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.

Policy CSS Customizations

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.

Cookie Banner Custom CSS Styling

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 the 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 change 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 color to 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 color to 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 suit your website/theme.

Advanced Customizations

With the use of advanced CSS techniques you can complete banner customizations you wouldn't normally be able to achieve within the admin app.

Example:

Customizations shown in the above screenshot are:

Banner Size/Style - rounded corners, increased banner spacing/padding, text size
Banner Title - add additional text to be used as a "banner title"
Banner Image - image added next to the banner title
Banner Buttons - size/spacing/order

CSS associated with each customization*:

Banner Size/Style - The following code adds a border radius to the banner, banner padding, and banner width. Example:
#cookie-notification.enzuzo-cookiebanner-container {border-radius: 30px !important; padding: 35px 60px; width: 550px !important;}
Banner Title - The description text field supports <HTML> markup so we can add a title element to specify styles for. Example:
<div class="enzuzo-banner-title">Banner Title</div> Lorem ipsum...
The banner title in the example has spacing adjustments, and size adjustments. Example:
.enzuzo-banner-title {font-weight: 700; font-size: 30px; margin: 5px 0 30px; position: relative;}

Banner Graphic - The graphic added to the banner was created by adding an invisible element to the right of the banner title. Any logo/image can be used so long as the width/height is properly defined. Example:

.enzuzo-banner-title::after {
    content: ""!important;
    background-image: url(https://www.onlygfx.com/wp-content/uploads/2022/01/chocolate-chip-cookie-clipart.png)!important;
    position: absolute!important;
    width: 120px!important;
    height: 89px!important;
    right: 11px!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}

Please note that the above example uses an image positioned to the right of the text, you can also position it to the left by removing the right property and replacing it with a left value (banner text position may need to be adjusted further to support left aligned image).

Banner Text - In the above example the banner description text size has been adjusted to be larger than the default. Example:
#cookie-notification.notification-main .notification-text-medium {font-size: 15px;}

Banner Buttons - The above example utilizes two admin app settings, rounded button style along hiding the decline button. From there we can change the order of the buttons and style them to be larger with spacing. Example:

.enzuzo-notification-buttons.notification-buttons a#notificationManagerLink {order: 2 !important; padding:15px 20px !important; font-size: 16px !important;}

.enzuzo-notification-buttons.notification-buttons {flex-wrap: nowrap !important; max-width: 320px; margin: 30px 0 0;}

button#cookie-notification__accept {font-size: 20px !important; padding: 15px 20px !important; }

*Please note that any CSS customizations made will only show in the rendered cookie banner and not in the app preview.

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