Código fuente wiki de Variabilisation du thème Digdash

Última modificación por Aurelie Bertrand el 2021/08/23 11:08
Mostrar los últimos autores
1 {{ddtoc/}}
2
3 ----
4
5 = Contexto =
6
7 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.
8
9 ¡No más sobrecargar el tema básico revisando otro archivo CSS en otra ubicación!
10
11 = Definición de las constantes CSS =
12
13 {{code language="CSS"}}
14 :root
15 {
16    --<nombre de la constante 1 CSS>: <valor de la constante 1 CSS>
17 --<nombre de la constante 2 CSS>: <valor de la constante 2 CSS>
18
19 --<nombre de la constante N CSS>: <valor de la constante N CSS>
20 }
21 {{/code}}
22
23 * Las constantes CSS deben definirse en el bloque (único) **:root**
24 * Los nombres de las constantes deben comenzar con **~-~-** por convención de nomenclatura.
25 * Las constantes deben nombrarse de forma clara y entendible.
26
27 = Ejemplo =
28
29 DigDash ofrece constantes CSS con valores predeterminados personalizables según sea necesario:
30
31 {{code language="css"}}
32 :root
33 {
34 --background-color-banner: #FFFFFF;
35 --background-color-page: #FFFFFF;
36 --background-color-portlet: transparent;
37 --background-color-popup: #FFFFFF;
38 --background-color-select: #11A0D9;
39 --background-color-item: #F4F4F4;
40 --background-color-label: #E2E2E2;
41 --color: #515151;
42 --color-select: #FFFFFF;
43 --border-color: #CDD1D3;
44 --logo-url: icons/digdash_2019/logo-dd-dark.svg;
45 --font-family: 'Open Sans', arial;
46 }
47 {{/code}}
48
49 = Definición en el editor de estilos del cuadro de mandos =
50
51 En el editor de estilos : <nombre del tema de diseño de base>.css
52
53 {{code language="css"}}
54 @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>");
55 :root
56 {
57 --<nomrbe de la constante 1 CSS>: <valor de la constante 1 CSS>
58
59 --<nombre de la constante N CSS>: <valor de la constante N CSS>
60 }
61 {{/code}}
62
63 El principio es sobrecargar las constantes CSS del bloque de ejemplo en el editor de estilo del editor de cuadros de mando.
64
65 La primera línea de importación es necesaria para la compatibilidad con el navegador Internet Explorer.
66
67 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**.
68
69 La URL debe mencionar el nombre de la aplicación del panel (de forma predeterminada, digdash_dashboard).
70
71
72 = Usar una constante en una hoja de estilo =
73
74 Si desea utilizar una de las constantes definidas en una hoja de estilo, debe utilizar la función ##**var**##:
75
76 {{code language="css"}}
77 .mi-clase{
78 background-color:var(--background-color-select)
79 }
80 {{/code}}
81
82 = Ejemplo de hoja de estilo =
83
84 En el editor de estilo del editor de cuadro de mandos : digdash_2019_template.css
85
86 {{code language="css"}}
87 @import url("/digdash_dashboard/file?method=loadTheme&theme=digdash_2019_template.css&--background-color-select=#FF00FF");
88
89 :root
90 {
91     --background-color-select: #FF00FF;
92 }
93 {{/code}}