search

Custom Styling

You can tailor the appearance of the widgets so that they match the rest of your site

The easiest way to customise the appearance of the widgets is to supply a few options when you initialise the SDK, but you can also override the provided CSS

hashtag
Colours

Pass an array of 2 colours when calling stub.init(). They are used for buttons and charts in order of precedence.

window.stub.init({
  ...options,
  colours: ['#FF0080', '#00A86B']
});

hashtag
Font

Specify a font stack. Make sure the fonts are loaded in your page.

window.stub.init({
  ...options,
  font: "'Public Sans', Arial, sans-serif"
});

hashtag
Empty state images

Provide your own illustration to show when no data is available. Supply one image for light mode and one for dark mode.

window.stub.init({
  ...options,
  emptyImage: {
    light: 'https://your.site/light.png',
    dark: 'https://your.site/dark.png'
  }
});

hashtag
Theme

The widgets support light and dark themes. Set the data-theme attribute on your <body> (or <html>) element.

hashtag
CSS overrides

The stylesheet defines a number of CSS variables prefixed with --stub-. Overriding these lets you tweak colours without editing the source files.

Every element rendered by the SDK carries the stub class. Widgets use additional classes such as stub-widget, stub-modal and stub-button. You can target these selectors in your own stylesheet to adjust spacing, borders and other styles. Remember to load your styles after the stub stylesheet so that your rules win in the cascade.

PreviousEmbedded accountingNextReference

Last updated