Customizing the CSS of your applications unlocks the ability to create experiences that fully reflect your brand and meet your users’ needs. By applying your own styles, you can reinforce brand identity, deliver a consistent look across pages and elements.
Notes:
|
Requirements
1. What can be customized in the app’s CSS?
With custom CSS stylesheets, you can go beyond basic branding options and further tailor the look and feel of your application. With this tool you can target the following components of your app to change fonts, colors, and shapes:
Table
Sidebar
Navigation bar
Accordeon
Additionaly, you can tailor the login page of your application by targeting these components:
Notification container
Background element
Container element
Section elements
Logo elements
Title element
Input group container
Input group
Form elements
Forgot password link
Login button
Terms container
Custom message
Note: We will continue to add CSS coverage for smaller components. |
Here’s an example of the devices’ page before and after being customized with CSS:
Before:
After:
The “after” results were made with this code (the colors in this example are determined by the ones configured in the app’s settings):
:root {
/* Branding Colors */
--color-icon-color: {{ colors.iconColor }};
--color-navbar-color: {{ colors.navbarColor }};
--color-variables-icon: {{ colors.variablesIcon }};
--color-login-form-color: {{ colors.loginFormColor }};
--color-sub-header-color: {{ colors.subHeaderColor }};
--color-widget-background: {{ colors.widgetBackground }};
--color-widget-title-color: {{ colors.widgetTitleColor }};
--color-danger-button-color: {{ colors.dangerButtonColor }};
--color-default-button-color: {{ colors.defaultButtonColor }};
--color-main-table-item-color: {{ colors.mainTableItemColor }};
--color-sub-header-text-color: {{ colors.subHeaderTextColor }};
--color-dashboard-background: {{ colors.dashboardBackground }};
--color-login-button-form-color: {{ colors.loginButtonFormColor }};
--color-warning-modal-cover-color: {{ colors.warningModalCoverColor }};
--color-variable-infobox-cover-color: {{ colors.variableInfoboxCoverColor }};
--color-information-modal-cover-color: {{ colors.informationModalCoverColor }};
--color-login-footer-foreground-color: {{ colors.loginFooterForegroundColor }};
--color-data-source-infobox-cover-color: {{ colors.dataSourceInfoboxCoverColor }};
--color-variable-infobox-derived-color: {{ colors.variableInfoboxDerivedColor }};
/* Additional */
--color-transparent: transparent;
--color-surface-secondary: #f9f9f9;
--color-empty: white;
--ub-color-primary-050: #e8f7ee;
/* Fonts */
--font-family-primary: "Poppins", Nunito;
--font-weight-normal: 400;
--font-weight-bold: bold;
--font-size-small: 13px;
/* Sizing & Spacing */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 2rem; /* 32px */
/* Borders & Radius */
--border-radius-sm: 4px;
--border-radius-md: 8px;
}
/* ==========================================================================
Global
============================================================================= */
/* Font */
*:not([role="icon"]) {
font-family: var(--font-family-primary);
}
/* Padding tables viewports */
.core-view__container .ds-table__viewport {
padding: 0
}
/* ==========================================================================
4. Table Component (ds-table)
============================================================================= */
/* Table main components separation */
.ds-table__viewport {
background-color: var(--color-transparent);
}
.ds-table__toolbar {
background-color: white;
border-radius: var(--border-radius-md);
}
.ds-table__wrapper {
margin-top: var(--spacing-md);
background-color: white;
border-radius: var(--border-radius-md);
}
.ds-table__controls {
margin-top: var(--spacing-md);
background-color: white;
border-radius: var(--border-radius-md);
}
/* Color intercalation */
.ds-table__body .ds-table__row:nth-child(odd) {
background-color: rgb(from var(--color-sub-header-color) r g b / 0.1);
}
/* Hover and selected */
.ds-table__body .ds-table__row:hover {
background: var(--color-surface-secondary);
}
.ds-table__row--selected {
box-shadow: inset 4px 0 0 var(--color-sub-header-color);
}
For a detailed explanation on how to customize an app with CSS, head to our Dev Center documentation. |
2. Customizing the app’s CSS
To customize your app’s CSS, follow these steps:
Head to “apps” ⟶ “apps”.
Go into the settings of your app by either clicking on its name or in the “edit” button (located in the options menu).
Click on the “brainding” tab of the lateral menu.
Once there, scroll down to the “advanced” area.
Click on the “override app style” toggle button to customize components within the app and/or the "override login style" to customize login page of the app.
Click on the “accept” button of the warning pop up.
Click on the “edit stylesheet” button.
Edit the CSS code so that your app/login page ends up looking like you wish.
Click on the "save" button to consolidate the changes.