Modify components with CSS

Sometimes you might need to adjust the style of the component. In this case, custom CSS can be used to alter the appearance of a component.

By default, a component name is added to the component's CSS class, so it's possible to modify the component with CSS:

Additionally, you can add multiple custom classes to a component in a Styling section of the settings sidebar:

To add new CSS styles, go to the Custom Code section and specify a new <style> tag with the desired styles:

<style>
  .no-shadow nb-card {
    box-shadow: none;
  }
  
  .background-new nb-card-body {
    background: aquamarine;
  }
</style>

Dynamic css classes

You can define custom classes using code to apply them dynamically. Two formats 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 Cases

Remove the CSV download button

Let's say you want to remove the CSV download button from the table. Here's how to do that:

1. Add a table to the working area and give it a name, e.g. productsTable or add a new CSS class in the Styling section of the settings sidebar.

2. Navigate the Custom Code section and specify the CSS code to modify the component:

<style>
  .productsTable .data-export-button {
    visibility: hidden
  }
</style>

4. Refresh the page to activate the changes. You will see that the CSV download button is not there.

Change table colors

You can rewrite component colors using custom CSS when you want to customize component colors. The following example shows how 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>

Change page background color

If you need to change the background color of the page, use this code:

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