Skip to main content

Application Branding: Customizing App-Wide CSS

Learn how to further customize your apps with CSS.

Sergio M avatar
Written by Sergio M
Updated over a week ago

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:

  • Customizing the login page’s CSS will be possible in the near future.

  • Any CSS class beyond the public API isn't actively maintained. We don't recommend targeting unsupported classes or HTML elements. If you find that there's a lack of coverage, please contact us at support@ubidots.com.

  • For a detailed explanation on how to customize an app with CSS, head to our Dev Center documentation.

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

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:

  1. Head to “apps” ⟶ “apps”.

  2. Go into the settings of your app by either clicking on its name or in the “edit” button (located in the options menu).

  3. Click on the “brainding” tab of the lateral menu.

  4. Once there, scroll down to the “advanced” area.

  5. Click on the “override app style” toggle button.

  6. Click on the “accept” button of the warning pop up.

  7. Click on the “edit stylesheet” button.

  8. Edit the CSS code so that your app ends up looking like you wish.

  9. Click on the "save" button to consolidate the changes.

Did this answer your question?