Last modified by Aurelie Bertrand on 2025/09/04 15:51
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 Lors de la première installation de Digdash, le thème //digash_2024 //est défini par défaut comme thème serveur et utilisé pour l'affichage des tableaux de bord.
6
7 Il est possible de personnaliser simplement le thème utilisé pour vos tableaux de bord. En effet, vous pouvez utiliser un modèle fourni par DigDash (//digdash_2019 ou digdash_2024//) comme base de votre thème via le principe de fichier CSS variabilisé.
8
9 La personnalisation du thème nécessite plusieurs paramétrages.
10 Il est recommandé de commencer par créer le thème dans l'éditeur de tableaux de bord. Vous pouvez ensuite modifier les styles des graphiques dans le Studio.
11 Enfin vous pouvez définir le nouveau thème comme thème serveur si vous souhaitez le propager à l'ensemble des éléments du tableau de bord pour tous les utilisateurs.
12
13 = Créer le thème dans l'Éditeur de tableaux de bord =
14
15 Pour cela, vous pouvez soit :
16
17 * utiliser l'assistant de création de thème : il permet de créer simplement un nouveau thème via une interface. Consultez la page [[Assistant de création de thème>>doc:Digdash.customization.customization_DDE.csseditor.WebHome]] pour plus de détails.
18 * importer un thème à utiliser comme modèle et modifier les constantes. Consultez le paragraphe Importer un thème ci-dessous.
19
20 == Importer un thème ==
21
22 Il faut tout d'abord créer le nouveau thème qui sera basé sur le thème //digdash_2019 ou digdash_2024.//
23
24 Le choix du thème de base reposera principalement sur les couleurs utilisées pour chacun d'eux qui doivent être le plus proche de vos besoins:
25
26 * le thème //digdash_2019 //utilise un fond clair (blanc) et des icônes grises
27 * le thème// digdash_2024// utilise un fond sombre (bleu) et des icônes blanches
28
29 === Créer le nouveau thème ===
30
31 1. (((
32 Lancez l'Éditeur de tableaux de bord.
33 )))
34 1. Dans le menu déployable en haut à droite de la fenêtre, cliquez sur **Paramètres** puis **Editeur de styles**.
35 [[image:Menu_style_editor_FR.png]]
36 ➡ L'éditeur de styles s'ouvre sur le thème utilisé.
37 1. Cliquez sur le bouton [[image:roue_crantée.png||height="21" width="23"]] en haut à droite de la fenêtre puis, dans le menu contextuel affiché, cliquez sur **Nouveau CSS**.
38 [[image:Menu_css_FR.png]]
39 ➡ La boite **Nouveau CSS** s'affiche.
40 1. Entrez le nom souhaité pour le thème et cliquez sur **OK**.
41 ➡ Une page vierge s'affiche avec le nom du thème.
42
43 (% style="line-height: 1.38;" %)
44 ==== Importer le modèle ====
45
46 (% style="line-height:1.38" %)
47 Le nouveau thème est vide par défaut. Il faut spécifier le thème Digdash à utiliser comme modèle. Pour cela, ajoutez la ligne suivante en première ligne :
48
49 {{code language="css"}}
50 @import url("/<dashboard app>/file?method=loadTheme&theme=<nom du template digdash>.css");
51 {{/code}}
52
53 dans laquelle:
54
55 * **<dashboard app>** est à remplacer par le nom de la webapp du dashboard. Si vous ne l’avez pas modifié alors il s’agit par défaut de //digdash_dashboard.//
56 * **<nom du template digdash>** est à remplacer par le nom du thème que vous souhaitez utiliser comme base de style.
57
58 Par exemple :
59
60 //[[image:New_CSS_FR.png]]//
61
62 ==== Modifier les constantes ====
63
64 Vous pouvez renseigner les constantes que vous souhaitez modifier. Pour cela, ajoutez un bloc root après la ligne d'import sous la forme :
65
66 {{{:root { --<nom de la constante 1 CSS>: <valeur de la constante 1 CSS> … --<nom de la constante N CSS>: <valeur de la constante N CSS> }}}}
67
68 (% class="box infomessage" %)
69 (((
70 **Note**
71
72 Les constantes CSS doivent être définies dans le (seul et unique) bloc **//:root//**.
73 Les noms des constantes doivent commencer par **~-~-** par convention de nommage.
74 )))
75
76 Par exemple, pour modifier la couleur de la bannière ainsi que la couleur du fond de la page, nous définissons les constantes suivantes :
77
78 [[image:Add_css_FR.png]]
79
80
81 Les constantes possibles sont les suivantes (avec valeurs d'exemple):
82
83 {{{:root { --font-family: 'Open Sans', arial, sans-serif; --font-family-bold: 'Open Sans Bold', arial; --font-family-semibold: 'Open Sans Semibold', arial; --logo: url("icons/digdash_2019/logo-dd-dark.svg"); --logo-login-width: 200px; --logo-login-height: 80px; --logo-banner-width: 135px; --logo-banner-height: 45px; --background-color-banner: #FFFFFF; --background-color-global: none; --background-image-global: none; --background-color-page: #FFFFFF; --background-color-tab-bar: #FFFFFF; --background-color-tab-header: #FFFFFF; --background-color-tab-header-selected: #FFFFFF; --color-tab-header: #515151; --color-tab-header-selected: #11A0D9; --border-color-tab-header-selected: #11A0D9; --logo-navigation-menu: url("icons/digdash_2019/logo-dd-white.svg"); --logo-navigation-menu-collapsed: url("icons/digdash_2019/logo-white.svg"); --background-color-navigation-menu: #2C385B; --background-color-navigation-menu-level1: #232C4C; --background-color-navigation-menu-level2: #171E33; --background-color-navigation-menu-level3: #111828; --color-navigation-menu: #FFFFFF; --color-navigation-menu-selected: #11A0D9; --background-color-portlet: #FFFFFF; --border-color-portlet: #CDD1D3; --height-portlet-header: 30px; --color-portlet-header: #515151; --font-weight-portlet-header: normal; --text-align-portlet-header: center; --border-color-portlet-separator: #CDD1D3; --color: #515151; --background-color-label: #E2E2E2; --background-color-item: #F4F4F4; --color-select: #FFFFFF; --background-color-select: #11A0D9;}}}
84 }
85
86 Si ces variables ne sont pas suffisantes, vous pouvez chercher les classes css. Vous pouvez également consulter la page [[Styles CSS>>doc:Digdash.customization.customization_DDE.customization_css.WebHome]] pour une liste de classes disponibles.
87
88 = Définir les styles des graphiques dans le Studio =
89
90 Le thème dans le Studio permet de modifier les styles des graphiques. Pour cela, vous pouvez soit :
91
92 * utiliser l'assistant de création de thème : il permet de modifier simplement le thème via une interface. Consultez la page [[Assistant d'édition de thème>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Modify_style.style_editor.WebHome]] pour plus de détails.
93 * importer un thème à utiliser comme modèle et modifier les constantes.
94
95 (% class="box warningmessage" %)
96 (((
97 ❗Il est recommandé d'utiliser le même nom de thème que dans l'éditeur. Cela sera nécessaire si vous souhaitez ensuite définir le thème comme thème serveur.
98 )))
99
100 == Importer un thème ==
101
102 Pour utiliser un thème existant:
103
104 1. Lors de la configuration des flux (graphiques), allez dans l'onglet **Thèmes**. Par défaut, c'est le thème serveur qui est sélectionné s'il y en a un de défini.
105 1. Cliquez sur le bouton **+** à droite de la liste des thèmes pour afficher l'interface avancée.
106 1. Cliquez sur le bouton **+** puis **Ajouter** pour créer un nouveau thème.
107 [[image:Add_theme_Studio_FR.png||alt="Nouveau thème"]]
108 ➡ Une boite **Nouveau** s'affiche.
109 1. Entrez le **Nom** du thème : le même que celui du thème éditeur.
110 1. Dans la liste déroulante **Rôle**,  sélectionnez** **un rôle auquel restreindre le thème ou** Aucun **pour partager le thème à tous les rôles puis cliquez sur **OK**.
111 💡 Choisissez **Aucun **si vous souhaitez utiliser le thème comme thème serveur.
112 ➡ Le thème est ajouté à la liste.
113 1. Sélectionnez-le et cliquez sur le bouton [[image:Edit_button.png]] pour l'éditer.
114 1. (((
115 (% style="line-height:1.38" %)
116 (% id="cke_bm_283460S" style="display:none" %) (%%)Le nouveau thème est vide par défaut. Il faut spécifier le thème Digdash à utiliser comme modèle. Pour cela, ajoutez la ligne suivante en première ligne :
117
118 {{code language="css"}}
119 @import url "<nom du template digdash>.css";
120 {{/code}}
121
122 dans laquelle **<nom du template digdash>** est à remplacer par le nom du thème que vous souhaitez utiliser comme base de style : //digdash_2019// ou //digdash_2024//.
123 )))
124
125 Vous pouvez alors renseigner les constantes que vous souhaitez modifier. Pour cela, ajoutez un bloc root après la ligne d'import sous la forme :
126
127 {{{:root { --<nom de la constante 1 CSS>: <valeur de la constante 1 CSS> … --<nom de la constante N CSS>: <valeur de la constante N CSS> }}}}
128
129 (% class="box infomessage" %)
130 (((
131 **Note**
132
133 Les constantes CSS doivent être définies dans le (seul et unique) bloc **//:root//**.
134 Les noms des constantes doivent commencer par **~-~-** par convention de nommage.
135 )))
136
137 (% class="wikigeneratedid" %)
138 Les constantes disponibles sont les suivantes (avec valeurs d'exemple) :
139
140 (% class="wikigeneratedid" %)
141 :root { 
142 ~-~-dd-font-family-fontFamily:Open Sans;
143 ~-~-dd-font-weight-fontWeight:inherit;
144 ~-~-dd-font-style-fontStyle:Normal;
145 ~-~-dd-font-color-fontColor:#000000;
146 ~-~-dd-axes-border-borderSize:0.3;
147 ~-~-dd-axes-border-borderColor:#888888;
148 ~-~-dd-tooltips-fontWeight:inherit;
149 ~-~-dd-tooltips-fontStyle:normal;
150 ~-~-dd-tooltips-fontColor:#888888;
151 ~-~-dd-tooltips-backgroundColor:#ffffff;
152 ~-~-dd-table-border-borderSize:0.5;
153 ~-~-dd-table-border-borderColor:#888888;
154 ~-~-dd-table-header-fontColor:#ffffff;
155 ~-~-dd-table-header-backgroundColor:#00b0f0;
156 ~-~-dd-table-header-fontWeight:bold;
157 ~-~-dd-table-TD-fontColor:#000000;
158 ~-~-dd-table-TD-backgroundColor:#ffffff;
159 }
160
161 (% class="wikigeneratedid" %)
162 Si ces variables ne sont pas suffisantes, vous pouvez chercher les classes css et les ajouter.
163
164 = (% id="cke_bm_112484S" style="display:none" %) (%%)Paramétrer le thème serveur =
165
166 (% class="box infomessage" %)
167 (((
168 💡L'utilisation d'un thème serveur permet une personnalisation "industrialisée" du tableau de bord avec les mêmes paramètres pour tous les utilisateurs et tous les graphiques.
169 Il est également possible de définir un thème au niveau utilisateur (consultez la page [[Gérer les utilisateurs>>doc:Digdash.deployment.configuration.administration.User_management.User_management.WebHome]]) ou d'une page (consultez la paragraphe [[Modifier les paramètres d'une page>>doc:Digdash.user_guide.dashboard.dashboard_editor_guide.edit_dashboard.edit_dashboard_pages.WebHome||anchor="Parametres_page"]]). 
170 À noter que le thème défini au niveau de la page prévaut sur le thème au niveau utilisateur qui prévaut lui-même sur le thème serveur.
171 )))
172
173 Il est alors possible de définir le thème créé dans l'Éditeur de tableaux de bord comme thème serveur afin de le propager à tous les éléments du tableau de bord et tous les utilisateurs. Pour cela :
174
175 1. Depuis la page d'accueil, allez dans **Configuration** -> **Paramètres Serveurs** -> **Paramètres supplémentaires** -> **Divers**.
176 1. Dans la liste déroulante **Thème**, sélectionnez le thème créé.
177 Les thèmes disponibles sont ceux livrés par Digdash ou créés dans l'Éditeur de tableaux de bord.
178 [[image:Select_theme_server_parameters_FR.png||alt="Thème serveur"]]
179 1. Cliquez sur **Enregistrer.**