Modifié par Aurelie Bertrand le 2024/09/20 11:53
Afficher les derniers auteurs
1 (% class="box warningmessage" %)
2 (((
3 ❗La fiche résolution est susceptible de ne pas fonctionner selon la version utilisée. Le cas échéant, veuillez contacter le support en décrivant ce qui ne fonctionne pas.
4 )))
5
6 ----
7
8 {{ddtoc/}}
9
10 ----
11
12 = Contexte =
13
14 A partir de la version 2019R2, DigDash propose une personnalisation du thème plus simple à partir du thème de base (digdash_2019_template), via le principe de fichier CSS variabilisé.
15
16 Fini donc la surcharge du thème de base en passant par un autre fichier CSS dans un autre emplacement !
17
18 = Définition des constantes CSS =
19
20 {{code language="css"}}
21 :root
22 {
23     --<nom de la constante 1 CSS>: <valeur de la constante 1 CSS>
24 --<nom de la constante 2 CSS>: <valeur de la constante 2 CSS>
25
26 --<nom de la constante N CSS>: <valeur de la constante N CSS>
27 }
28 {{/code}}
29
30 * Les constantes CSS doivent être définies dans le (seul et unique) bloc :root
31 * Les noms des constantes doivent commencer par ~-~- par convention de nommage.
32 * Les constantes doivent être nommées de manière claire et compréhensive.
33
34 = Exemple =
35
36 DigDash livre des constantes CSS avec des valeurs par défaut personnalisables au besoin :
37
38 {{code language="css"}}
39 :root
40 {
41 --background-color-banner: #FFFFFF;
42 --background-color-page: #FFFFFF;
43 --background-color-portlet: transparent;
44 --background-color-popup: #FFFFFF;
45 --background-color-select: #11A0D9;
46 --background-color-item: #F4F4F4;
47 --background-color-label: #E2E2E2;
48 --color: #515151;
49 --color-select: #FFFFFF;
50 --border-color: #CDD1D3;
51 --logo-url: icons/digdash_2019/logo-dd-dark.svg;
52 --font-family: 'Open Sans', arial;
53 }
54 {{/code}}
55
56 = Définition dans l'Éditeur de styles du Dashboard =
57
58 Dans l'éditeur de styles : <nom du thème de base>.css
59
60 {{code language="css"}}
61 @import url("/<dashboard app>/file?method=loadTheme&theme=<nom du thème de base>.css&--<nom constante 1 CSS>=<valeur constante 1 CSS>&...&--<nom constante N CSS>=<valeur constante N CSS>");
62 :root
63 {
64 --<nom de la constante 1 CSS>: <valeur de la constante 1 CSS>
65
66 --<nom de la constante N CSS>: <valeur de la constante N CSS>
67 }
68 {{/code}}
69
70 Le principe est de surcharger les constantes CSS du bloc d'exemple dans l’éditeur de styles de l’éditeur du Dashboard.
71
72 La première ligne d’import est obligatoire pour la prise en charge du navigateur Internet Explorer.
73
74 On précisera dans les paramètres de l’URL d’import le nom du thème CSS de base ainsi que la liste des constantes CSS définies dans le bloc :root.
75
76 L’URL devra mentionner le nom de l’application dashboard (par défaut digdash_dashboard).
77
78 = Utilisation dans une feuille de style =
79
80 Si on souhaite utiliser une des constantes définies dans une feuille de style, il faut utiliser la fonction ##**var **##:
81
82 {{code language="css"}}
83 .ma-classe{
84 background-color:var(--background-color-select)
85 }
86 {{/code}}
87
88 = Exemple de feuille de styles =
89
90 Dans l'éditeur de styles : digdash_2019_template.css
91
92 {{code language="css"}}
93 @import url("/digdash_dashboard/file?method=loadTheme&theme=digdash_2019_template.css&--background-color-select=#FF00FF");
94
95 :root
96 {
97     --background-color-select: #FF00FF;
98 }
99 {{/code}}