In UI Bakery, you can adjust the style of components using custom CSS. By default, a component's name (for example, usersTable) is added as a CSS class to the component class making it possible to modify it with CSS.
Adding new CSS styles
To add new styles, you need to specify a new <style> tag with the desired styles in the Custom code section, for example:
Once added, you need to apply these styles to a component in the Styling section of the component's settings.
Dynamic CSS classes
You can also define custom classes using code to apply them dynamically. Here, two formats are available:
an array of strings representing custom classes
an object where keys are custom classes and values determine whether to apply a custom class
// css classes as a list of strings
['class-name', {{ui.form.valid}} && 'valid'];
// or as an object
{
'class-name': true,
// will apply the 'valid' class only when form is valid
'valid': {{ui.form.valid}}
}
Use case: Changing Table colors
You can also use custom CSS to customize component colors, say change colors in the Table. The flow is pretty much the same - navigate to the Custom code tab and add the necessary styles there.
Below is an example of the style you can add to change Table colors:
Check out the use cases below showing in more details how you can modify components with custom CSS in UI Bakery
You can also use CSS to control the styling of the component and apply different styles to its parts, for example, apply different colors to List View items. Check out the instruction below
