How to Customize the UniConsent CMP Banner with CSS

If you want to customize the look and feel of the UniConsent CMP cookie banner, you can apply custom CSS. This enables you to style elements like buttons, popup backgrounds, fonts, and layout to better match your website's design.

What Are CSS Selectors?

CSS selectors are patterns used to target and style specific HTML elements on a webpage. They enable developers to apply styles, automate testing, or interact with DOM elements. Selectors can range from basic types like div and h1, to more complex forms such as IDs (#id-selector), classes (.class-selector), or attribute selectors ([data-attribute="value"]).

How to Find CSS Selectors

1. Use Browser Developer Tools (DevTools)

Modern browsers like Chrome, Edge, and Firefox offer Developer Tools that let you inspect and copy CSS selectors easily.

• Step 1: Right-click the element you want to customize and select Inspect.

  DevTools Inspect

• Step 2: The Elements panel will highlight the selected HTML code.

  Elements Panel

In Google Chrome & Microsoft Edge:

• Right-click the highlighted HTML and choose Copy > Copy selector.

  Chrome & Edge

In Mozilla Firefox:

• Select the element, right-click, then choose Copy > CSS Selector.

  Firefox

Tip: Open DevTools quickly using Ctrl + Shift + I (Windows/Linux) or Cmd + Shift + I (Mac).

2. Write Custom CSS Selectors Manually

Sometimes, you'll need to write selectors manually to gain finer control:

• Target elements by class: .unic .powerby
• Target unique elements by ID: .unic #uniconsent-modal
• Combine multiple selectors: .unic .popup > button.accept
• Use attribute selectors: .unic [data-testid="submit-btn"]

Best Practices for Using CSS Selectors

• Avoid generic selectors (e.g., div > span) to prevent unintended style conflicts.
• Ensure selector specificity to accurately target the correct element.
• Use attribute selectors when dealing with dynamically generated content.
• Cross-browser test your styles to ensure consistent behavior.