CSS for Customizing / Styling Osano Cookie Consent

  • Updated

The Osano Cookie Consent admin portal allows you to tailor its appearance to fit seamlessly with your brand's style. By overriding CSS classes, you can control the look and feel of the cookie consent dialogs, ensuring that they align perfectly with your website's design. However, to maintain a user-friendly experience, it's crucial to test your customizations across different browsers, devices, and screen resolutions.

Why Customize CMP Appearance?

  • Brand Consistency: Align the Cookie Consent Manager's look with your brand's colors, fonts, and overall design. Create a more cohesive experience for your users by integrating the Cookie Consent banner's design with your site's existing aesthetic.

How to Override CSS Classes

To customize the Cookie Consent experience, you can override the following CSS classes. These classes control various elements of the dialogs, buttons, and content areas.

Key CSS Classes 

/* General Buttons */
.osano-cm-button

/* Button Groups */
.osano-cm-buttons

/* Dialog Content */
.osano-cm-content  

/* Dialog Description */
.osano-cm-description 

/* Main Dialog Window */
.osano-cm-dialog 

/* Information Dialog */
.osano-cm-info-dialog 

/* Close Button for Info Dialog */
.osano-cm-info-dialog-close 

/* Wrapper for Info Dialog */
.osano-cm-info-dialog-wrapper 

/* Links */
.osano-cm-link

/* Toggle Switches */
.osano-cm-toggle
.osano-cm-toggle input[type=checkbox]

/* CMP Widget */
.osano-cm-widget

/* Main CMP Window */
.osano-cm-window

/* Customize link appearance within CMP window */
.osano-cm-window a.osano-cm-link

/* Labels */label.osano-cm-label
 

Best Practices for Customizing CMP CSS

  1. Testing Across Browsers and Devices: After making CSS changes, thoroughly test the CMP across various browsers (Chrome, Firefox, Safari, etc.) and devices (mobile, tablet, desktop). This ensures a consistent experience for all users.

  2. Responsive Design: Make sure your customizations are responsive. Test at different screen resolutions to ensure that the CMP remains functional and visually appealing on all devices.

  3. Accessibility Considerations: Ensure that your custom styles meet accessibility standards. This includes sufficient color contrast, readable fonts, and easy-to-click buttons.

  4. Backup Original Styles: Before making any changes, backup the original CSS. This allows you to revert to the default styles if needed.

  5. Minimizing Impact on Functionality: While customizing, ensure that your changes do not interfere with the functionality of the CMP dialogs. Test all interactive elements like buttons, toggles, and links.

Example: Customizing the Consent Dialog Button

Here’s an example of how to customize the consent dialog button:

.osano-cm-button {
    background-color: #0056b3; /* Set your brand's primary color */
    color: #ffffff; /* Set the text color */
    border-radius: 5px; /* Round the corners */
    font-size: 16px; /* Adjust font size for better readability */
    padding: 10px 20px; /* Add padding for a more substantial button */
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
}

.osano-cm-button:hover {
    background-color: #003d82; /* Darken the background on hover */
}

Customizing your Osano CMP is a powerful way to integrate it with your brand and improve the user experience. By carefully overriding CSS classes and thoroughly testing your changes, you can create a polished, accessible, and user-friendly consent management interface.