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.
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"]).
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
Right-click the highlighted HTML and choose Copy > Copy selector.
Chrome & Edge
Select the element, right-click, then choose Copy > CSS Selector.
Firefox
Tip: Open DevTools quickly using
Ctrl + Shift + I
(Windows/Linux) orCmd + Shift + I
(Mac).
Sometimes, you'll need to write selectors manually to gain finer control:
.unic .powerby
.unic #uniconsent-modal
.unic .popup > button.accept
.unic [data-testid="submit-btn"]
div > span
) to prevent unintended style conflicts.