Branding: personalización del CSS de la app

Personalizar el CSS de tus aplicaciones te permite crear experiencias que reflejan completamente tu marca y satisfacen las necesidades de tus usuarios. Al aplicar tus propios estilos, puedes reforzar la identidad de marca y ofrecer una apariencia consistente en todas las páginas y elementos.

Notas:

La personalización del CSS de la página de inicio de sesión será posible próximamente.
Cualquier clase CSS más allá de la API pública no se mantiene activamente. No recomendamos apuntar a clases o elementos HTML no soportados. Si notas que algo no está cubierto, por favor contáctanos en support@ubidots.com.
Para una explicación detallada sobre cómo personalizar una app con CSS, visita nuestra documentación en el Dev Center.

Requisitos

Una licencia Enterprise.

1. ¿Qué se puede personalizar en el CSS de la app?

Con hojas de estilo CSS personalizadas, puedes ir más allá de las opciones básicas de marca y adaptar aún más la apariencia de tu aplicación. Con esta herramienta puedes modificar los siguientes componentes de tu app para cambiar fuentes, colores y formas:

Tabla
Barra lateral
Barra de navegación
Acordeón

Nota: Continuaremos agregando cobertura CSS para componentes más pequeños.

Aquí tienes un ejemplo de la página de dispositivos antes y después de ser personalizada con CSS:

Antes:

Después:

El resultado “después” fue logrado con este código (los colores en este ejemplo se determinan por los configurados en los ajustes de la app):

: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);
}

Para una explicación detallada sobre cómo personalizar una app con CSS, visita nuestra documentación en el Dev Center.

2. Personalizando el CSS de la app

Para personalizar el CSS de tu app, sigue estos pasos:

Ve a “apps” ⟶ “apps”.
Ingresa a la configuración de tu app haciendo clic en su nombre o en el botón “editar” (ubicado en el menú de opciones).
Haz clic en la pestaña “branding” del menú lateral.
Una vez allí, desplázate hacia la sección “avanzado”.
Haz clic en el botón de alternancia “override app style”.
Haz clic en el botón “aceptar” del mensaje emergente de advertencia.
Haz clic en el botón “editar hoja de estilos”.
Edita el código CSS para que tu app luzca como deseas.
Haz clic en el botón "guardar" para consolidar los cambios.