Custom CSS

All Components, including Screens, have the option to add custom css.

To do so, click on a component, and near the bottom of the settings menu click on Edit custom CSS

This will present a box in which you can enter CSS for the selected component.
For example:

🚧

Inline CSS

Selectors cannot be used here, and you must enter inline CSS.

Global styling

If you are determined to apply your own style to the entire screen, you can achieve this through an Embed component.

This will allow you to add a <style> tag with CSS selectors, but this will apply to the entire page regardless of where you place the Embed component.

To inject the style, add the Embed component and click on the lightning bolt icon:

This will open a drawer in which you can enter the style:

This snippet demonstrates how to use a class selector, but the button element selector could be interchanged.

As Budibase uses the Spectrum design system, you can see the list of available classes here: https://opensource.adobe.com/spectrum-css/get-started.html

Alternatively, you can right-click and inspect the elements.

🚧

!Important

To override the existing styles, the important tags must be added.
This will also override the styles of the builder UI itself, so it is advisable to use component level custom CSS to avoid conflicts.

The end result is that you are able to style many elements without needing to duplicate the CSS:


Did this page help you?