Variabilización del tema de diseño Digdash

Última modificación por Aurelie Bertrand el 2021/08/23 11:08

Contexto

A partir de la versión 2019R2, DigDash ofrece una personalización más simple del tema desde el tema básico (digdash_2019_template), a través del principio de archivo CSS variable.

¡No más sobrecargar el tema básico revisando otro archivo CSS en otra ubicación!

Definición de las constantes CSS

:root
{
   --<nombre de la constante 1 CSS>: <valor de la constante 1 CSS>
  --<nombre de la constante 2 CSS>: <valor de la constante 2 CSS>

  --<nombre de la constante N CSS>: <valor de la constante N CSS>
}
  • Las constantes CSS deben definirse en el bloque (único) :root
  • Los nombres de las constantes deben comenzar con -- por convención de nomenclatura.
  • Las constantes deben nombrarse de forma clara y entendible.

Ejemplo

DigDash ofrece constantes CSS con valores predeterminados personalizables según sea necesario:

:root
{
--background-color-banner: #FFFFFF;
--background-color-page: #FFFFFF;
--background-color-portlet: transparent;
--background-color-popup: #FFFFFF;
--background-color-select: #11A0D9;
--background-color-item: #F4F4F4;
--background-color-label: #E2E2E2;
--color: #515151;
--color-select: #FFFFFF;
--border-color: #CDD1D3;
--logo-url: icons/digdash_2019/logo-dd-dark.svg;
--font-family: 'Open Sans', arial;
}

Definición en el editor de estilos del cuadro de mandos

En el editor de estilos : <nombre del tema de diseño de base>.css

@import url("/<dashboard app>/file?method=loadTheme&theme=<nombre del tema de base>.css&--<nombre constante 1 CSS>=<valor constante 1 CSS>&...&--<nombre constante N CSS>=<valor constante N CSS>");
:root
{
--<nomrbe de la constante 1 CSS>: <valor de la constante 1 CSS>

--<nombre de la constante N CSS>: <valor de la constante N CSS>
}

El principio es sobrecargar las constantes CSS del bloque de ejemplo en el editor de estilo del editor de cuadros de mando.

La primera línea de importación es necesaria para la compatibilidad con el navegador Internet Explorer.

Especificamos en los parámetros de la URL de importación el nombre del tema CSS básico así como la lista de constantes CSS definidas en el bloque :root.

La URL debe mencionar el nombre de la aplicación del panel (de forma predeterminada, digdash_dashboard).

Usar una constante en una hoja de estilo

Si desea utilizar una de las constantes definidas en una hoja de estilo, debe utilizar la función var: 

.mi-clase{
  background-color:var(--background-color-select)
}

Ejemplo de hoja de estilo

En el editor de estilo del editor de cuadro de mandos : digdash_2019_template.css

@import url("/digdash_dashboard/file?method=loadTheme&theme=digdash_2019_template.css&--background-color-select=#FF00FF");

:root
{
    --background-color-select: #FF00FF;
}