Branding: personalización del CSS de la app

Personalizar el CSS de tus aplicaciones te permite crear experiencias que reflejan plenamente tu marca y se ajustan a 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:

Cualquier clase CSS fuera de la API pública no se mantiene activamente. No recomendamos apuntar a clases o elementos HTML no soportados. Si detectas falta de cobertura, por favor contáctanos en support@ubidots.com.
Para una explicación detallada sobre cómo personalizar una aplicación con CSS, visita nuestra documentación del Dev Center.

Requisitos

Una licencia Enterprise.

1. ¿Qué se puede personalizar en el CSS de la aplicación?

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

Tabla
Barra lateral
Barra de navegación
Acordeón

Adicionalmente, puedes personalizar la página de inicio de sesión de tu aplicación apuntando a estos componentes:

Contenedor de notificaciones
Elemento de fondo
Elemento contenedor
Elementos de sección
Elementos del logo
Elemento de título
Contenedor de grupo de inputs
Grupo de inputs
Elementos del formulario
Enlace de recuperar contraseña
Botón de inicio de sesión
Contenedor de términos
Mensaje personalizado

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

1.1. Ejemplo de página de la aplicación

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

Antes:

Después:

Los resultados del “después” se lograron con el código que se encuentra en la siguiente sección desplegable (los colores en este ejemplo están determinados por los configurados en la sección de ajustes de la aplicación):

: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. Ejemplo de página de inicio de sesión

Aquí tienes un ejemplo de la página de inicio de sesión después de ser personalizada con CSS:

El código de este ejemplo se encuentra en la siguiente sección desplegable (la imagen de fondo y el logo se definen en la sección de "branding" de tu aplicación):

/* 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;
  }
}

Para una explicación detallada sobre cómo personalizar una aplicación con CSS, visita nuestra documentación del Dev Center.

2. Personalizar el CSS de la aplicación

Para personalizar el CSS de tu aplicación, sigue estos pasos:

Ve a “apps” ⟶ “apps”.
Ingresa a la configuración de tu aplicación 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 abajo hasta el área “avanzado”.
Activa el botón “override app style” para personalizar componentes dentro de la aplicación y/o “override login style” para personalizar la página de inicio de sesión de la app.
Haz clic en el botón “aceptar” del mensaje de advertencia.
Haz clic en el botón “editar hoja de estilos”.
Edita el código CSS para que tu aplicación o página de inicio de sesión tenga el aspecto que deseas.
Haz clic en el botón “guardar” para consolidar los cambios.