Styling the banner

The Design settings cover colours, layout, buttons and logo. For anything more, add your own CSS in the dashboard: Banner → Design → Custom CSS.

How it works

Your CSS goes inside the banner, after ours. The page's own CSS does not reach the banner, and yours does not reach the page.
Many of our rules use !important, so add it where a change does not show.
It styles the first banner only. The preferences window and the reopen button take your colours from Design.
Up to 5,000 characters, with no </.
Nothing may load from another address: the banner shows before the visitor chooses, and loading a file would pass on their IP address. So no @import, web fonts or images by address. Fonts the page already loads can be used by name, and images can go in as data: URLs.
Changes show in the live preview straight away and reach visitors when you publish.

Reject all stays as visible as Accept all

The law asks for refusing to be as easy as accepting. If your CSS makes Reject all harder to see or use than Accept all, none of it is applied and visitors see the banner with the Design settings only. That happens when Reject all is:

hidden, off the screen or covered by something else in the banner;
shorter, much narrower or in smaller text than Accept all;
faded, or its text is hard to read against its background.

The check runs in every visitor's browser, at every screen size. The live preview tells you when your CSS is not applied, and the browser console says why.

What to target

These names stay the same between versions. Avoid the tc- class names you may see in the browser: they change with each release.

Selector	What it is
`[data-testid="consent-banner-root"]`	The whole banner. data-variant="bar" on the Bar layout, "floating" on Floating and Centred.
`[data-testid="consent-banner-card"]`	The box the banner sits in: background, border, corners, shadow.
`[data-testid="consent-banner-header"]`	The title and text, with the space around them.
`[data-testid="consent-banner-title"]`	The title.
`[data-testid="consent-banner-description"]`	The text, with the policy links.
`[data-testid^="consent-banner-legal-link-"]`	The policy links (…-privacyPolicy, …-cookiePolicy, …-termsOfService for the imprint).
`[data-testid="consent-banner-footer"]`	The row of buttons, with the space around it.
`[data-testid="consent-banner-footer"] button[data-action]`	All three buttons.
`button[data-action="reject"]`	Reject all.
`button[data-action="accept"]`	Accept all.
`button[data-action="customize"]`	Customise (opens the preferences window).

The buttons can be in any order (Design → Buttons), so target them by data-action, not by position.

Your colours as variables

Set colours in Design, where they are checked for contrast. Use these to reuse them in your CSS, for example border-color: var(--tc-primary).

--tc-primary: Buttons and links (Design → Colours)
--tc-primary-hover: Buttons on hover
--tc-text-on-primary: Text on buttons
--tc-surface: Banner background
--tc-surface-hover: Outlined buttons on hover
--tc-text: Banner text
--tc-text-muted: Secondary text
--tc-border: Borders
--tc-button-radius: Button corners

Examples

A different title

[data-testid="consent-banner-title"] {
  font-family: Georgia, serif;
  font-size: 1.25rem !important;
}

Square, uppercase buttons

/* Square, uppercase buttons. Style all three together so they keep the same weight. */
[data-testid="consent-banner-footer"] button[data-action] {
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

A border in your brand colour, no shadow

[data-testid="consent-banner-card"] {
  border: 2px solid var(--tc-primary) !important;
  box-shadow: none !important;
}

Smaller text on phones

@media (max-width: 640px) {
  [data-testid="consent-banner-description"] { font-size: 0.875rem !important; }
}

Next: Management API