Skip to main content

Widget styling

The widget is rendered in your page, not in an iframe. It adds its own stylesheet and fonts (Nunito Sans and Material Symbols), and its styles apply only to the widget elements.

Colours and font​

Override these CSS custom properties to match your website:

--theme-primary-500color
Main colour of buttons, selections and highlights.
--theme-primary-50 … 900color
Lighter and darker shades of the main colour, for hover states and backgrounds.
--theme-font-familyfont-familyDefault 'Nunito Sans'
Font of the widget.

Set them on html:root. The widget's defaults load after your styles, so a plain :root rule would be overridden. They also apply to the widget's dialogs.

html:root {
  --theme-primary-500: #0057b8;
  --theme-font-family: 'Inter', sans-serif;
}

Size​

--ob-venue-viewer-heightlengthDefault 300px
Height of the venue map. It is 400px by default when the map and the summary are side by side.
ob-widget-seats-selection {
  --ob-venue-viewer-height: 520px;
}

Channel styles​

If your Onebox contact has configured custom styles for the sales channel, the widget applies them too.