Custom Styling for the Consent Banner Using CSS

Our app allows you to fully customize the appearance of the consent banner by using custom CSS. Inside the banner settings, you’ll find a CSS editor under the Style tab where you can add your own styles. These styles are applied directly to the banner components loaded on your website or app.

This article explains how the banner is structured and how you can target each element using CSS selectors.

Banner Architecture Overview

The entire consent system is loaded as a Web Component with the following root tag:

<pandectes-cmp></pandectes-cmp>

All banner elements live inside this component. When writing CSS, you can optionally scope your rules under pandectes-cmp to avoid affecting other parts of your site.

Example:

* {
  font-family: Arial, sans-serif;
}

Banner Elements You Can Style

The banner is composed of four main elements, each of which can be styled independently.

1. Cookie Notice Banner

This is the initial banner displayed to users when consent is required.

Selector

[data-role="notice"] {

}

Example Customization

[data-role="notice"] {
  background-color: #ffffff;
  color: #333333;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}

2. Preferences Center Banner

This banner is shown when users open the preferences or settings panel to manage consent categories.

Selector

[data-role="preferences"] {

}

Example Customization

[data-role="preferences"] {
  background-color: #fafafa;
  max-width: 600px;
  margin: 0 auto;
}

3. Consent Widget – Button Icon

This is the floating or embedded button that allows users to reopen the consent interface.

Selector

button.widget {

}

Example Customization

button.widget {
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

4. Consent Widget – Current Consent Window

This element displays the current consent status and related information.

Selector

[data-role="status"] {

}

Example Customization

button.widget {
  background-color: #f9f9f9;
  font-size: 14px;
  padding: 12px;
}

Conclusion

By using the selectors above, you can fully control the look and feel of every part of the consent banner to match your brand and design system.

Updated on: 11/01/2026