Modifying components with CSS
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:
<style>
.no-shadow nb-card {
box-shadow: none;
}
.background-new nb-card-body {
background: aquamarine;
}
</style>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
Check out the use cases below showing in more details how you can modify components with custom CSS in UI Bakery👇
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:
Use case: Changing page background color
Navigate to the Custom code tab and specify the following style to change page background:
You can experiment with custom CSS and change the styles till you get the final look you need.
Use case: Modifying List View items
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👇
Navigate to the Custom code tab and specify the following style:
Now, select a Card inside the List View, and navigate to its Styling section.
Here, add your custom classes using the
{{index}}variable, for example:
Last updated
Was this helpful?