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. |
1.1. Application page example
Here’s an example of the devices’ page before and after being customized with CSS:
Before:
After:
The “after” results were made with the code found in the following collapsible section (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);
}
1.2. Login page example
Here’s an example of the login page after being customized with CSS:
The code of this example is in the following collapsible section (the background image and the logo are defined in the "branding" section of your app):
/* TYPOGRAPHY */
.login__title,
.login__label,
.login__input,
.login__button,
.login__terms-text,
.login__custom-message {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
letter-spacing: -0.01em;
}
/* BACKGROUND */
.login__wrapper {
background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
}
.login__background {
background: linear-gradient(
135deg,
#000000 0%,
#801a00 25%,
#e0765b 50%,
#801a00 75%,
#000000 100%
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: none;
}
/* CONTAINER */
.login__container {
background: rgba(12, 12, 12, 0.5);
border: 2px solid rgba(255, 63, 13, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 98, 0, 0.35);
backdrop-filter: blur(24px) saturate(180%);
}
/* FORM SECTION */
.login__section--form {
background: rgba(10, 10, 10, 0.4);
backdrop-filter: blur(20px) saturate(180%);
border-radius: 0.9375rem 0 0 0.9375rem;
overflow: visible;
}
.login__section--form::before {
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(45, 189, 104, 0.6) 50%,
transparent 100%
);
}
.login__section--form::after {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.03) 0%,
transparent 30%,
rgba(45, 189, 104, 0.02) 100%
);
border-radius: 0.9375rem 0 0 0.9375rem;
pointer-events: none;
}
/* LOGO */
.login__logo-link {
display: block;
text-align: center;
margin-bottom: 1.75rem;
}
.login__logo-image {
width: 200px;
height: auto;
}
/* IMAGE SECTION */
.login__section--image {
backdrop-filter: none;
overflow: hidden;
border-radius: 0 0.9375rem 0.9375rem 0;
background-size: cover;
background-position: center;
}
.login__section--image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* TITLE */
.login__title {
display: none;
visibility: hidden;
opacity: 0;
height: 0;
width: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
/* FORM */
.login__form::before {
content: "Welcome";
display: block;
color: #e3e3e3;
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
text-align: center;
background: linear-gradient(135deg, #ffcabd 0%, #e0765b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.login__form::after {
content: "Log in to your account";
display: block;
text-align: center;
color: rgba(227, 227, 227, 0.6);
font-size: 0.9375rem;
font-weight: 400;
margin-bottom: 2rem;
margin-top: -0.5rem;
}
/* LINKS */
a {
color: #2dbd68;
transition: color 0.2s ease;
font-weight: 500;
text-decoration: none;
}
a:hover {
color: #3dd378;
text-decoration: underline;
}
.login__forgot-link {
color: #2dbd68;
transition: color 0.2s ease;
font-weight: 500;
text-decoration: none;
}
.login__forgot-link:hover {
color: #3dd378;
text-decoration: underline;
}
/* LABELS */
.login__label {
color: rgba(227, 227, 227, 0.7);
font-weight: 500;
font-size: 0.8125rem;
letter-spacing: 0.01em;
}
/* INPUT FIELDS */
.login__input {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 170, 11, 0.3);
color: #e3e3e3;
transition: all 0.3s ease;
backdrop-filter: blur(12px) saturate(180%);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
font-weight: 400;
font-size: 0.9375rem;
}
.login__input::placeholder {
color: rgba(227, 227, 227, 0.35);
font-weight: 300;
}
.login__input:focus {
outline: none;
background: rgba(255, 255, 255, 0.07);
border-color: rgba(45, 189, 104, 0.5);
box-shadow: 0 0 0 3px rgba(45, 189, 104, 0.15),
0 4px 20px rgba(45, 189, 104, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* ICONS */
.login__icon {
color: rgba(227, 227, 227, 0.5);
transition: all 0.2s ease;
cursor: pointer;
font-size: 1rem;
}
.login__icon:hover {
color: #2dbd68;
}
.login__icon[data-tooltip]::after {
content: attr(data-tooltip);
background: rgba(15, 15, 15, 0.98);
border: 1px solid rgba(45, 189, 104, 0.3);
color: #fff;
padding: 0.3125rem;
border-radius: 0.25rem;
font-family: "Nunito", sans-serif;
font-size: 0.875rem;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.login__icon:hover[data-tooltip]::after {
opacity: 1;
}
/* BUTTON */
.login__button {
background: linear-gradient(
135deg,
rgba(45, 189, 104, 0.9) 0%,
rgba(37, 160, 88, 0.9) 100%
);
color: #000000;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.02em;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(255, 98, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 170, 11, 0.3);
backdrop-filter: blur(10px);
overflow: hidden;
animation: fadeInUp 0.6s ease backwards;
animation-delay: 0.3s;
}
.login__button::before {
display: block;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 50%,
transparent 100%
);
opacity: 1;
transition: opacity 0.3s ease;
}
.login__button::after {
display: block;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 40%,
rgba(255, 255, 255, 0.3) 50%,
transparent 60%
);
opacity: 0;
transition: opacity 0.6s ease;
}
.login__button:hover {
background: linear-gradient(
135deg,
rgba(45, 189, 104, 1) 0%,
rgba(37, 160, 88, 1) 100%
);
box-shadow: 0 6px 30px rgba(45, 189, 104, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(45, 189, 104, 0.8);
}
.login__button:hover::after {
opacity: 1;
}
.login__button:disabled {
background: rgba(60, 60, 60, 0.3);
color: rgba(227, 227, 227, 0.3);
border-color: rgba(227, 227, 227, 0.1);
box-shadow: none;
}
.login__button:disabled:hover {
background: rgba(60, 60, 60, 0.3);
}
.login__button-text {
display: inline;
}
.login__button-loader {
font-size: 1.5rem;
color: #000000;
display: none;
}
.login__button--loading .login__button-loader {
display: inline-block;
}
/* FOOTER */
.login__terms-text {
color: rgba(227, 227, 227, 0.5);
font-size: 0.75rem;
font-weight: 400;
font-family: "Nunito", sans-serif;
}
.login__terms-link {
color: rgba(255, 155, 15, 0.8);
font-weight: 500;
text-decoration: none;
}
.login__terms-link:hover {
color: #3dd378;
text-decoration: underline;
}
.login__custom-message {
color: #e3e3e3;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
font-weight: 500;
letter-spacing: -0.02em;
font-family: "Inter", sans-serif;
font-size: 1.5625rem;
}
/* FEEDBACK */
#loader {
color: #000000;
}
.font-error {
color: #ff6b6b;
font-weight: 400;
background: rgba(255, 107, 107, 0.1);
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid rgba(255, 107, 107, 0.3);
backdrop-filter: blur(10px);
font-family: Inter, sans-serif;
font-size: 0.875rem;
margin-top: 2rem;
max-width: 23.875rem;
}
/* RESPONSIVE DESIGN */
@media (min-width: 48rem) {
.login__section--form {
width: 35%;
order: 1;
}
.login__section--image {
width: 65%;
order: 2;
display: flex;
}
}
/* INPUT GROUPS */
.login__input-group-container {
gap: 1.25rem;
}
.login__input-group {
animation: fadeInUp 0.6s ease backwards;
}
.login__input-group:nth-child(1) {
animation-delay: 0.1s;
}
.login__input-group:nth-child(2) {
animation-delay: 0.2s;
}
.login__input-group:nth-child(3) {
animation-delay: 0.3s;
}
/* ANIMATIONS */
@keyframes fadeInUp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
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.