Estilos personalizados

Mediante esta opción podrás personalizar el look & feel de tu instancia de Modela, cambiando los colores, títulos o logo de la aplicación.

Personalización

En la pantalla de personalización, se muestran diferentes secciones, dependiendo de lo que se necesite modificar: Barra de navegación, Logo, Interfaz usuario, Tipografía y Botones.

El «Título de la aplicación» corresponde al literal que aparece en la pestaña del navegador, como se ve a continuación:

La «Etiqueta alternativa» es aquella que se muestra como tooltip cuando dejamos el curso parado encima del logo de la aplicación:

Para cada uno de los elementos que podemos personalizar el color, nos aparecerá una cada de texto con el color en hexadecimal y un cuadrado a su izquierda representando visualmente el mismo. Podemos, o bien, editar el valor hexadecimal, o hacer click en el color para elegirlo visualmente:

Al modificar cualquiera de los colores, nos aparecerá un botón «X» a la derecha del valor personalizado; si pulsamos el mismo, se restablecerá el color original:

Los cambios se irán aplicando a medida que vayamos cambiando los valores; si queremos mantener dichos cambios hay que pulsar sobre el botón «Guardar» situado en la parte inferior.

Css personalizado

Incluye también un bloque para poder agregar tu css personalizado. Las partes principales se dividen en tres bloques con sus id’s: «#header», «#container# y «#footer».
Dispones de clases predefinidas como «.card», «.mini-card» o custom properties como «–bg», «–bg-panel», «–text-first-color»…

Código de ejemplo de cambio de diseño:

/* Cabecera del mismo color que el fondo y fija */
#header {
   background: var(--bg);
   position: relative;
}

/* Pie de página del mismo color que el fondo*/
#footer {
   background: var(--bg);
}
/* Contenido de página más ancho */
#container .container {
      max-width: 90%;
}

/* Personalización de la solicitud */
/* Barra de acciones de la solicitud posición fija */
#ActionsButtonsTop {
   background: var(--bg);
   position:relative;
   top: initial;
   background: var(--bg-panel);
   border-radius: var(--big-radius);
   margin-bottom: 20px;
}
/* Ajuste al modificar la barra en posición fija */
div.card.formcontainer {
   margin-top: initial;
}

Modela original:

Modela original

Modela modificado:

Modela modificado
Was this article helpful?

Related Articles

¿Necesitas ayuda?

Contacta con nosotros.
Contacta con soporte