Custom CSS

Coming soon

Custom CSS is not available yet. The control in the Advanced section of Banner Settings is marked Coming soon. This page describes how the feature will work when it ships. Until then, use the theme, color, and font controls in the banner editor.

The banner renders inside a Shadow DOM, in a host element with the id optsens-consent-root. Shadow DOM isolates the banner from your site's styles. Your site's own stylesheet cannot reach the banner's internal elements, and the banner cannot accidentally inherit your page styles.

Because of that isolation, custom styles will go through the Custom CSS field in the banner editor. Whatever you enter there is injected inside the Shadow DOM, after the theme styles, and your rules win over the defaults.

warning

Deep overrides can break accessibility and compliance. Do not hide or shrink the reject button, and keep the accept and reject buttons at equal prominence. Hiding consent controls can make the banner non-compliant.

Where it will live

The field is planned for the Advanced section of Banner Settings, where the Coming soon card sits today. Planned rules:

• Applied after the theme styles. Your rules override the defaults.
• No @import and no <script> tags are allowed.
• Maximum size is 10 KB.

For colors, fonts, layout and dark mode, use the visual controls in the banner editor. Custom CSS is meant only for changes the editor does not cover.

Targeting elements

Your CSS runs inside the Shadow DOM and targets the banner's own classes directly. These class names are stable.

Selector	Element
:host	The shadow host. Set CSS variables or a base font here
.os-first-layer	The banner container (layer 1)
.os-fl-title	The banner title
.os-fl-body	The banner body text
.os-fl-logo	The logo area
.os-fl-buttons	The button row
.os-btn-primary	Accept all (and Confirm) button
.os-btn-secondary	Manage settings button
.os-btn-alternate	Reject button
.os-fl-footer	The "Provided by OptSens" footer
.os-overlay	The dark backdrop behind a centered popup
.os-modal	The preference center container (layer 2)
.os-modal-content	The preference center inner panel
.os-widget	The floating button

Deeper preference-center internals, such as category rows and vendor lists, are not part of the stable selector set yet.

Example

/* Larger, bolder title */
.os-fl-title {
  font-size: 20px;
  font-weight: 700;
}

/* Round the accept button more */
.os-btn-primary {
  border-radius: 24px;
}

Font size and inheritance

The banner sizes its fonts in fixed pixels. Changing the font-size on your page's html or body does not shrink or grow the banner. To change text size, target the specific banner class, as shown above.

To change the font family, use the font control in the banner editor rather than Custom CSS. Set it to a specific font, or leave it on inherit to match your site.

What renders in the page, not the Shadow DOM

Two things render as regular page elements, and your own stylesheet can style them today, without Custom CSS:

• Blocked-content placeholders use the .os-placeholder class, and their allow button uses .os-ph-accept. See iframe rules.
• The auto-injected footer links use the [data-os-dns-link] and [data-os-manage-link] attributes. The preference center page covers when each link appears.

What you cannot do from the page stylesheet

Rules in your site's regular stylesheet do not affect the banner, because Shadow DOM blocks them. The host element also uses all: initial and does not inherit page styles. Styling banner internals from your own stylesheet is not possible, with or without this feature.

If styling looks wrong on a live site, see styling conflicts.