Custom CSS

For full control over the banner's appearance, use Custom CSS to override any style.

Where to add custom CSS

Go to Banner Builder → Advanced → Custom CSS and paste your CSS.

Custom CSS is injected into a <style> tag within the ConsentForge shadow DOM, so it only affects the banner — not your website's styles.

Banner class names

Selector	Element
.cf-banner	Banner root container
.cf-banner__title	Banner heading
.cf-banner__description	Banner body text
.cf-btn-accept	Accept All button
.cf-btn-reject	Reject All button
.cf-btn-customize	Customize / Manage Preferences button
.cf-preference-center	Preference Center overlay
.cf-category	A single category row in Preference Center
.cf-toggle	The consent toggle input

Examples

Rounded buttons

.cf-btn-accept,
.cf-btn-reject,
.cf-btn-customize {
  border-radius: 9999px;
}

Full-width buttons on mobile

@media (max-width: 640px) {
  .cf-banner__actions {
    flex-direction: column;
  }
  .cf-btn-accept,
  .cf-btn-reject {
    width: 100%;
  }
}

Custom toggle color

.cf-toggle:checked {
  background-color: #10B981;
}

CSS variables

For color/font changes, prefer CSS variables over class overrides — they're more maintainable and upgrade-safe.