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
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']
});Font
Specify a font stack. Make sure the fonts are loaded in your page.
window.stub.init({
...options,
font: "'Public Sans', Arial, sans-serif"
});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'
}
});Theme
The widgets support light and dark themes. Set the data-theme attribute on your <body> (or <html>) element.
<body data-theme="dark">
...
</body>CSS overrides
The stylesheet defines a number of CSS variables prefixed with --stub-. Overriding these lets you tweak colours without editing the source files.
:root {
--stub-primary: #32333C;
--stub-secondary: #8D8E9A;
/* many more */
}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.
Last updated