Custom CSS

The colour editor in the Banner Designer covers the common cases — surfaces, text, buttons and their hover states. When you need finer control (rounded corners, spacing, fonts, hiding an element, a bespoke layout tweak), the Custom CSS tab lets you write plain CSS against the banner's markup.

Everything you type applies to the live preview as you type, and ships to your site on Publish.

How it works

The banner is rendered by cookieconsent v3. Your custom CSS is injected after the banner's own stylesheet, so a plain selector already overrides the defaults:

.cm__title {
  font-size: 1.25rem;
}

Reach for !important only when you're fighting an inline style set by the library at runtime — not to win against its stylesheet, where ordering already puts you ahead.

Scope to the widget

Every rule you write only needs to target the banner. If you want to be defensive against your site's own global CSS, prefix selectors with #cc-main (the widget root): #cc-main .cm__title { … }.

Selector reference

The banner has two surfaces — the cookie notice (first-visit banner, prefixed cm) and the preferences dialog (pm) — plus CookieWave's own floating reopen icon.

Cookie notice

Selector	Element
#cc-main	Root of the whole widget
.cm	The cookie notice container
.cm__title	Notice title
.cm__desc	Notice message text
.cm__btns	Button area
.cm__btn	Any notice button
.cm__btn--secondary	The secondary button (Reject all / Manage)
.cm__footer	Footer / links row

Preferences dialog

Selector	Element
.pm	The preferences dialog
.pm__header	Header (title + close)
.pm__title	Dialog title
.pm__close-btn	Close (×) button
.pm__body	Scrollable body
.pm__section	A cookie-category row
.pm__section-title	Category name
.pm__section-desc	Category description
.pm__footer	Footer with the action buttons
.pm__btn	Any preferences button
.pm__btn--secondary	Preferences secondary button

Reopen icon

Selector	Element
#cw-reopen-consent	The floating icon shown after the banner is dismissed. See Let visitors reopen the banner for the footer-link alternative

Layout & state hooks

cookieconsent adds modifier classes you can key off:

• Notice layout — .cm--box, .cm--cloud, .cm--bar
• Notice position — .cm--top, .cm--bottom, .cm--middle, .cm--left, .cm--right, .cm--center, plus .cm--wide and .cm--inline
• Dark mode — the widget adds .cc--darkmode on the root when your banner uses the dark theme, so you can style light and dark differently:

.cc--darkmode .cm__title {
  letter-spacing: 0.01em;
}

Examples

Rounder banner and a tighter title

.cm {
  border-radius: 16px;
}
.cm__title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

Pill-shaped buttons

.cm__btn,
.pm__btn {
  border-radius: 9999px;
}

Use your brand font (make sure the font is loaded on your site)

#cc-main {
  font-family: 'Inter', system-ui, sans-serif;
}

Hide the close (×) on the preferences dialog, forcing an explicit choice

.pm__close-btn {
  display: none;
}

A full-width bar with more breathing room

.cm--bar .cm {
  padding-block: 1.25rem;
}

Good to know

• Colours belong in the colour editor. It keeps light/dark and hover states consistent and is easier to maintain than hand-written colour rules. Use Custom CSS for everything the editor doesn't cover.
• Don't remove focus outlines. Keyboard users rely on them; restyle rather than hide :focus-visible states.
• Test both surfaces. Editing a notice colour shows the notice in the preview; editing a preference-centre colour shows the dialog — switch between them to see your CSS applied to each.
• The class names above come from cookieconsent v3. They're stable, but they are a third-party library's markup: if a future upgrade renames one, your override simply stops matching (it won't break the banner).