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

// 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}}
}

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:

<style>
  ub-smart-table nb-card,
  ub-smart-table datatable-selection,
  ub-smart-table .datatable-footer,
  ub-smart-table ub-bulk-edit-buttons {
    /* background colors of card, title and etc. */
    background-color: beige;
  }

  ub-smart-table ub-smart-table-header-cell,
  ub-smart-table ub-smart-table-header-data-cell,
  ub-smart-table ub-smart-table-header-action-cell {
    /* table header background-color (columns names, filters, row-add and etc) */
    background-color: beige;
  }
  
  ub-smart-table .datatable-body-row.active ub-smart-table-body-cell p,
  ub-smart-table .datatable-body-row.active ub-smart-table-body-action-cell * {
    /* table texts colors */
    color: white !important;
  }
  
  ub-smart-table nb-card,
  ub-smart-table nb-card-header,
  ub-smart-table .datatable-footer,
  ub-smart-table ub-smart-table-header-data-cell,
  ub-smart-table ub-smart-table-header-action-cell,
  ub-smart-table ub-smart-table-body-cell,
  ub-smart-table .datatable-body-cell.action-cell {
    /* main border color */
  	border-color: black !important; 
  }

  ub-smart-table ub-smart-table-body-cell,
  ub-smart-table ub-smart-table-body-action-cell {
    /* default row background-color */
    background-color: pink !important;
  }

  ub-smart-table .datatable-body-row.active ub-smart-table-body-cell,
  ub-smart-table .datatable-body-row.active ub-smart-table-body-action-cell {
    /* selected row background-color */
    background-color: aquamarine !important;
  }

  ub-smart-table .datatable-body-row.active:hover ub-smart-table-body-cell,
  ub-smart-table .datatable-body-row.active:hover ub-smart-table-body-action-cell {
    /* selected-hovered row background-color */
    background-color: skyblue !important; 
  }

  ub-smart-table .datatable-body-row:hover ub-smart-table-body-cell,
  ub-smart-table .datatable-body-row:hover ub-smart-table-body-action-cell {
    /* hovered row background-color */
    background-color: aqua !important;
  }
</style>

Use case: Changing page background color

Navigate to the Custom code tab and specify the following style to change page background:

<style>
  nb-layout .layout {
    background: yellow;
  }
</style>

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👇

1. Navigate to the Custom code tab and specify the following style:

<style>
  .blue nb-card {
    background: lightblue!important;
  }
  
  .green nb-card {
    background: lightgreen!important;
  }
</style>

1. Now, select a Card inside the List View, and navigate to its Styling section.

2. Here, add your custom classes using the {{index}} variable, for example:

{
  'blue': {{index % 2 == 0}},
  'green': {{index % 2 == 1}},
}