CSS Styling

The Onpane widget uses Shadow DOM for style isolation. You can customize its appearance using CSS variables and ::part() selectors without affecting or being affected by your site's styles.

CSS Variables

Set these CSS variables on the onpane-announcement custom element to override the widget's default appearance:

CSS

onpane-announcement {
  --onpane-z-index-override: 99999;
  --onpane-background-override: #1a1a2e;
  --onpane-text-override: #ffffff;
  --onpane-font-family: inherit;
  --onpane-font-size-override: 16px;
  --onpane-content-max-width: 1200px;
}

Variable	Default	Description
`--onpane-z-index-override`	9999	Override stacking order of the announcement bar
`--onpane-background-override`	(from dashboard)	Override the background color set in the dashboard
`--onpane-text-override`	(from dashboard)	Override the text color set in the dashboard
`--onpane-font-family`	inherit	Font family for all announcement text
`--onpane-font-size-override`	(based on size setting)	Override the base font size regardless of the dashboard size setting
`--onpane-content-max-width`	(from dashboard)	Override the inner content max-width. Bar background stays full-width; content is constrained and centered. Has no effect on mobile viewports (below 768px)

Note: The --onpane-background-override and --onpane-text-override variables take precedence over the colors configured in your dashboard. Use them when you need CSS-level control, such as matching a dark mode theme.

::part() Selectors

For fine-grained styling, use CSS ::part() selectors to target specific elements inside the widget's Shadow DOM:

CSS

/* Container - main announcement bar */
onpane-announcement::part(container) {
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Title text (optional heading above message) */
onpane-announcement::part(title) {
  font-size: 1.1em;
}

/* Content wrapper (contains title + message) */
onpane-announcement::part(content) {
  gap: 4px;
}

/* Message text */
onpane-announcement::part(message) {
  font-weight: 600;
}

/* Call-to-action link */
onpane-announcement::part(cta) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Close button */
onpane-announcement::part(close-button) {
  opacity: 0.7;
}

onpane-announcement::part(close-button):hover {
  opacity: 1;
}

/* Close icon */
onpane-announcement::part(close-icon) {
  width: 20px;
  height: 20px;
}

/* Announcement icon (info, warning, etc.) */
onpane-announcement::part(icon) {
  margin-right: 8px;
}

Part	Element	Description
`container`	`div.bar`	Main announcement bar wrapper
`icon`	`span.icon`	Announcement type icon (info, warning, error, success)
`title`	`span.title`	Optional heading text above the message
`content`	`span.content`	Wrapper containing title and message
`message`	`span.message`	Announcement message text
`cta`	`a.cta`	Call-to-action link button
`close-button`	`button.close-button`	Dismiss button
`close-icon`	`span`	X icon inside the close button

Note: ::part() selectors work across the Shadow DOM boundary while maintaining style encapsulation. They provide CSS class-like targeting without exposing the widget's internal structure.

Content Max Width

The Content Max Width setting constrains the inner content of the announcement bar (icon, text, CTA, and close button) to a maximum width while keeping the bar background at full page width. The inner content is centered within the bar.

Recommended values for common layouts:

1200px -- standard content width
960px -- narrow content width
72rem -- rem-based content width

Set this value in your project's Widget Settings on the dashboard, or override it with the --onpane-content-max-width CSS variable. The CSS variable takes precedence over the dashboard setting.

Mobile behavior: The max-width constraint is automatically removed on viewports below 768px. The widget uses a centered, stacked layout on mobile where the constraint is irrelevant.

Text Alignment

Each announcement has a Text Alignment setting that controls how the message text is positioned within the announcement bar. Choose from three options in the announcement form:

Left — text starts at the left edge, after the icon (if present)
Center (default) — text is centered relative to the full bar width
Right — text is right-aligned, before the CTA button (if present)

The icon always stays at the left edge, the CTA button keeps its natural position, and the close button remains at the far right — only the text alignment changes.

Custom Fonts

The widget inherits fonts from your website by default. To use a custom font, choose one of these approaches:

Option 1: Load Font on Your Site (Recommended)

Add a Google Fonts link to your site's <head>:

HTML

<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
  rel="stylesheet"
>

Then set Custom Font to Inter, sans-serif in your project's Widget Settings.

Option 2: Use a System Font

Set Custom Font to a web-safe font stack:

system-ui, -apple-system, sans-serif (matches OS default)
Georgia, serif (traditional serif)
Menlo, monospace (code-like appearance)

Option 3: CSS Variable Override

Advanced users can override the font via CSS:

CSS

onpane-announcement {
  --onpane-font-family: 'Your Font', sans-serif;
}

Note: The widget cannot load fonts dynamically to keep its file size minimal. You must load custom fonts on your website for them to be available to the widget.