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 the 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>
Use Cases
Remove the CSV download button
Let's say you would like 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 size
The default tables in UI Bakery might seem a little robust for your applications, so you can adjust the size of the table (font size, buttons, row spacing) with CSS.
1.Add a table to the working area and give it a name, e.g. ordersTable. This name will be used as a CSS class of the table.
2.Navigate the Custom Code section and specify the CSS code to modify the component. 
Below we suggest an example of modifying the text size, buttons inside the table, inputs, selects, toggles, and row size, that applies for all the tables across the application. If you need to modify a single table, replace ub-smart-table with the name of a specific table, e.g. .ordersTable.
<style>   
/* texts size */
ub-smart-table p,
ub-smart-table .markdown *,
ub-smart-table .n_a-value,
ub-smart-table .label-content a,
ub-smart-table ub-base-boolean-view div,
ub-smart-table .atomic-file-wrapper span,
ub-smart-table nb-tag.size-medium {
    font-size: 0.75rem !important;
    line-height: 0.875rem !important;
}
​
ub-smart-table .nb-form-field-addon {
    height: 0.875rem !important;
}
​
/* buttons size */
ub-smart-table .datatable-body button.size-medium,
ub-smart-table .datatable-header button.size-medium,
ub-smart-table .datatable-body button[nbButton].size-medium.icon-only,
ub-smart-table .datatable-header button[nbButton].size-medium.icon-only {
    font-size: 0.75rem !important;
    min-height: 1.5rem !important;
    padding: 0.25rem 0.5rem !important;
}
​
ub-smart-table .datatable-body button.size-medium nb-icon,
ub-smart-table .datatable-header button.size-medium nb-icon,
ub-smart-table .datatable-body nb-form-field nb-icon,
ub-smart-table .datatable-header nb-form-field nb-icon,
ub-smart-table .atomic-file-wrapper nb-icon,
ub-smart-table ub-base-boolean-view div nb-icon {
    font-size: 0.75rem !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
}
​
/* inputs size */
ub-smart-table .datatable-body input.size-medium,
ub-smart-table .datatable-header input.size-medium {
    font-size: 0.75rem !important;
    min-height: 1rem !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 0.875rem !important;
}
​
/* selects size */
ub-smart-table .datatable-body nb-select button.select-button,
ub-smart-table .datatable-header nb-select button.select-button,
ub-smart-table .datatable-body span[nbButton].size-medium,
ub-smart-table .datatable-header span[nbButton].size-medium,
    /* selects options, change styles for all options on page */
.cdk-overlay-connected-position-bounding-box nb-option {
    font-size: 0.75rem !important;
    min-height: 1rem !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 0.875rem !important;
}
​
ub-smart-table nb-select.size-medium .select-button.empty:before {
    height: 0.875rem !important;
}
​
/* rows size */
ub-smart-table .datatable-header-cell-template-wrap.with-addition-row,
ub-smart-table .datatable-header-cell-template-wrap .with-addition-row,
ub-smart-table .datatable-body-row,
ub-smart-table .datatable-body-cell,
ub-smart-table ub-atomic-view,
ub-smart-table .label-element.position-vertical .label-content {
    min-height: 1.5rem !important;
}
​
/* toggle size */
ub-smart-table ub-base-boolean-edit,
ub-smart-table nb-toggle {
    min-height: 1rem !important;
}
​
ub-smart-table nb-toggle div.toggle {
    height: 1.5rem !important;
    box-sizing: border-box !important;
    width: 2.5rem !important;
}
​
ub-smart-table nb-toggle .toggle .toggle-switcher {
    height: 1.375rem !important;
    width: 1.375rem !important;
    margin: 0 !important;
}
​
ub-smart-table nb-toggle .toggle.checked .toggle-switcher {
    height: 1.375rem !important;
    width: 1.375rem !important;
    margin: 0 !important;
    left: calc(100% - 1.25rem - var(--toggle-border-width) - var(--toggle-border-width)) !important;
}
</style>
Pay attention to this code block:
/* selects size */
ub-smart-table .datatable-body nb-select button.select-button,
ub-smart-table .datatable-header nb-select button.select-button,
ub-smart-table .datatable-body span[nbButton].size-medium,
ub-smart-table .datatable-header span[nbButton].size-medium,
    /* selects options, change styles for all options on page */
.cdk-overlay-connected-position-bounding-box nb-option {
    font-size: 0.75rem !important;
    min-height: 1rem !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 0.875rem !important;
}
Due to the current technical limitations, this code modifies the style of selects and their options across the whole application, not just the table.
4. Refresh the page to activate the changes. You will notice the table becomes more neat and compact.
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>
Last modified 14d ago