Last modified by Aurelie Bertrand on 2025/02/07 10:22
Hide last authors
Aurelie Bertrand 53.1 1 {{ddtoc/}}
2
3 ----
4
Aurelie Bertrand 59.1 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.
Aurelie Bertrand 38.1 6
Aurelie Bertrand 67.1 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é.
Aurelie Bertrand 1.1 8
Aurelie Bertrand 20.2 9 La personnalisation du thème nécessite plusieurs paramétrages.
Aurelie Bertrand 56.1 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.
Aurelie Bertrand 55.2 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.
Aurelie Bertrand 19.5 12
Aurelie Bertrand 1.1 13 = Créer le thème dans l'Éditeur de tableaux de bord =
14
Aurelie Bertrand 33.1 15 Pour cela, vous pouvez soit :
16
Aurelie Bertrand 62.1 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.
Aurelie Bertrand 42.1 18 * importer un thème à utiliser comme modèle et modifier les constantes. Consultez le paragraphe Importer un thème ci-dessous.
Aurelie Bertrand 33.1 19
Aurelie Bertrand 42.1 20 == Importer un thème ==
Aurelie Bertrand 33.1 21
Aurelie Bertrand 22.1 22 Il faut tout d'abord créer le nouveau thème qui sera basé sur le thème //digdash_2019 ou digdash_2024.//
Aurelie Bertrand 1.1 23
Aurelie Bertrand 22.1 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
Aurelie Bertrand 59.1 26 * le thème //digdash_2019 //utilise un fond clair (blanc) et des icônes grises
Aurelie Bertrand 60.1 27 * le thème// digdash_2024// utilise un fond sombre (bleu) et des icônes blanches
Aurelie Bertrand 22.1 28
Aurelie Bertrand 33.1 29 === Créer le nouveau thème ===
Aurelie Bertrand 4.2 30
Aurelie Bertrand 33.1 31 1. (((
32 Lancez l'Éditeur de tableaux de bord.
33 )))
Aurelie Bertrand 1.1 34 1. Dans le menu déployable en haut à droite de la fenêtre, cliquez sur **Paramètres** puis **Editeur de styles**.
Aurelie Bertrand 73.1 35 [[image:Menu_style_editor_FR.png]]
Aurelie Bertrand 17.1 36 ➡ L'éditeur de styles s'ouvre sur le thème utilisé.
Aurelie Bertrand 2.2 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**.
Aurelie Bertrand 73.1 38 [[image:Menu_css_FR.png]]
Aurelie Bertrand 3.1 39 ➡ La boite **Nouveau CSS** s'affiche.
40 1. Entrez le nom souhaité pour le thème et cliquez sur **OK**.
Aurelie Bertrand 4.2 41 ➡ Une page vierge s'affiche avec le nom du thème.
Aurelie Bertrand 3.1 42
Aurelie Bertrand 4.2 43 (% style="line-height: 1.38;" %)
Aurelie Bertrand 33.1 44 ==== Importer le modèle ====
Aurelie Bertrand 4.2 45
Aurelie Bertrand 4.1 46 (% style="line-height:1.38" %)
Aurelie Bertrand 4.4 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 :
Aurelie Bertrand 3.1 48
Aurelie Bertrand 4.3 49 {{code language="css"}}
Aurelie Bertrand 4.5 50 @import url("/<dashboard app>/file?method=loadTheme&theme=<nom du template digdash>.css");
Aurelie Bertrand 4.3 51 {{/code}}
Aurelie Bertrand 4.1 52
Aurelie Bertrand 4.5 53 dans laquelle:
Aurelie Bertrand 4.1 54
Aurelie Bertrand 4.5 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.//
Aurelie Bertrand 19.5 56 * **<nom du template digdash>** est à remplacer par le nom du thème que vous souhaitez utiliser comme base de style.
Aurelie Bertrand 4.5 57
Aurelie Bertrand 22.1 58 Par exemple :
59
Aurelie Bertrand 73.1 60 //[[image:New_CSS_FR.png]]//
Aurelie Bertrand 4.1 61
Aurelie Bertrand 33.1 62 ==== Modifier les constantes ====
Aurelie Bertrand 4.4 63
Aurelie Bertrand 9.1 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 :
Aurelie Bertrand 4.5 65
Aurelie Bertrand 8.1 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> }}}}
Aurelie Bertrand 4.5 67
Aurelie Bertrand 10.2 68 (% class="box infomessage" %)
69 (((
Aurelie Bertrand 11.1 70 **Note**
Aurelie Bertrand 12.1 71
Aurelie Bertrand 11.1 72 Les constantes CSS doivent être définies dans le (seul et unique) bloc **//:root//**.
Aurelie Bertrand 6.2 73 Les noms des constantes doivent commencer par **~-~-** par convention de nommage.
Aurelie Bertrand 10.2 74 )))
Aurelie Bertrand 6.2 75
Aurelie Bertrand 4.6 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 :
Aurelie Bertrand 4.5 77
Aurelie Bertrand 73.1 78 [[image:Add_css_FR.png]]
Aurelie Bertrand 4.5 79
Aurelie Bertrand 10.1 80
Aurelie Bertrand 60.1 81 Les constantes possibles sont les suivantes (avec valeurs d'exemple):
Aurelie Bertrand 6.2 82
Aurelie Bertrand 82.1 83 {{{:root
84 {
85 --font-family: 'Open Sans', arial, sans-serif;
86 --font-family-bold: 'Open Sans Bold', arial;
87 --font-family-semibold: 'Open Sans Semibold', arial;
88 --logo: url("icons/digdash_2019/logo-dd-dark.svg");
89 --logo-login-width: 200px;
90 --logo-login-height: 80px;
91 --logo-banner-width: 135px;
92 --logo-banner-height: 45px;
93 --background-color-banner: #FFFFFF;
94 --background-color-global: none;
95 --background-image-global: none;
96 --background-color-page: #FFFFFF;
97 --background-color-tab-bar: #FFFFFF;
98 --background-color-tab-header: #FFFFFF;
99 --background-color-tab-header-selected: #FFFFFF;
100 --color-tab-header: #515151;
101 --color-tab-header-selected: #11A0D9;
102 --border-color-tab-header-selected: #11A0D9;
103 --logo-navigation-menu: url("icons/digdash_2019/logo-dd-white.svg");
104 --logo-navigation-menu-collapsed: url("icons/digdash_2019/logo-white.svg");
105 --background-color-navigation-menu: #2C385B;
106 --background-color-navigation-menu-level1: #232C4C;
107 --background-color-navigation-menu-level2: #171E33;
108 --background-color-navigation-menu-level3: #111828;
109 --color-navigation-menu: #FFFFFF;
110 --color-navigation-menu-selected: #11A0D9;
111 --background-color-portlet: #FFFFFF;
112 --border-color-portlet: #CDD1D3;
113 --height-portlet-header: 30px;
114 --color-portlet-header: #515151;
115 --font-weight-portlet-header: normal;
116 --text-align-portlet-header: center;
117 --border-color-portlet-separator: #CDD1D3;
118 --color: #515151; --background-color-label: #E2E2E2;
119 --background-color-item: #F4F4F4;
120 --color-select: #FFFFFF;
121 --background-color-select: #11A0D9;}}}
122 }
Aurelie Bertrand 6.3 123
Aurelie Bertrand 60.1 124 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.
125
Aurelie Bertrand 36.1 126 = Définir le styles des graphiques dans le Studio =
Aurelie Bertrand 19.2 127
128 Le thème dans le Studio permet de modifier les styles des graphiques. Pour cela, vous pouvez soit :
129
Aurelie Bertrand 19.3 130 * 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.
Aurelie Bertrand 23.1 131 * importer un thème à utiliser comme modèle et modifier les constantes.
Aurelie Bertrand 19.2 132
Aurelie Bertrand 50.1 133 (% class="box warningmessage" %)
134 (((
Aurelie Bertrand 56.1 135 ❗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.
Aurelie Bertrand 50.1 136 )))
137
Aurelie Bertrand 19.3 138 == Importer un thème ==
Aurelie Bertrand 19.2 139
Aurelie Bertrand 45.1 140 Pour utiliser un thème existant:
Aurelie Bertrand 19.2 141
Aurelie Bertrand 56.1 142 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.
Aurelie Bertrand 19.4 143 1. Cliquez sur le bouton **+** à droite de la liste des thèmes pour afficher l'interface avancée.
Aurelie Bertrand 35.1 144 1. Cliquez sur le bouton **+** puis **Ajouter** pour créer un nouveau thème.
Aurelie Bertrand 78.1 145 [[image:Add_theme_Studio_FR.png||alt="Nouveau thème"]]
Aurelie Bertrand 48.1 146 ➡ Une boite **Nouveau** s'affiche.
Aurelie Bertrand 56.1 147 1. Entrez le **Nom** du thème : le même que celui du thème éditeur.
Aurelie Bertrand 57.1 148 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**.
Aurelie Bertrand 56.1 149 💡 Choisissez **Aucun **si vous souhaitez utiliser le thème comme thème serveur.
Aurelie Bertrand 19.4 150 ➡ Le thème est ajouté à la liste.
Aurelie Bertrand 78.1 151 1. Sélectionnez-le et cliquez sur le bouton [[image:Edit_button.png]] pour l'éditer.
Aurelie Bertrand 19.5 152 1. (((
153 (% style="line-height:1.38" %)
154 (% 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 :
Aurelie Bertrand 19.2 155
Aurelie Bertrand 19.5 156 {{code language="css"}}
157 @import url "<nom du template digdash>.css";
158 {{/code}}
Aurelie Bertrand 19.2 159
Aurelie Bertrand 19.5 160 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//.
161 )))
162
Aurelie Bertrand 19.9 163 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 :
Aurelie Bertrand 19.5 164
165 {{{: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> }}}}
166
167 (% class="box infomessage" %)
168 (((
169 **Note**
170
171 Les constantes CSS doivent être définies dans le (seul et unique) bloc **//:root//**.
172 Les noms des constantes doivent commencer par **~-~-** par convention de nommage.
173 )))
174
175 (% class="wikigeneratedid" %)
Aurelie Bertrand 66.1 176 Les constantes disponibles sont les suivantes (avec valeurs d'exemple) :
Aurelie Bertrand 19.5 177
Aurelie Bertrand 19.6 178 (% class="wikigeneratedid" %)
Aurelie Bertrand 64.1 179 :root { 
180 ~-~-dd-font-family-fontFamily:Open Sans;
181 ~-~-dd-font-weight-fontWeight:inherit;
182 ~-~-dd-font-style-fontStyle:Normal;
183 ~-~-dd-font-color-fontColor:#000000;
184 ~-~-dd-axes-border-borderSize:0.3;
185 ~-~-dd-axes-border-borderColor:#888888;
186 ~-~-dd-tooltips-fontWeight:inherit;
187 ~-~-dd-tooltips-fontStyle:normal;
188 ~-~-dd-tooltips-fontColor:#888888;
189 ~-~-dd-tooltips-backgroundColor:#ffffff;
190 ~-~-dd-table-border-borderSize:0.5;
191 ~-~-dd-table-border-borderColor:#888888;
192 ~-~-dd-table-header-fontColor:#ffffff;
193 ~-~-dd-table-header-backgroundColor:#00b0f0;
194 ~-~-dd-table-header-fontWeight:bold;
195 ~-~-dd-table-TD-fontColor:#000000;
196 ~-~-dd-table-TD-backgroundColor:#ffffff;
197 }
Aurelie Bertrand 19.5 198
Aurelie Bertrand 56.1 199 (% class="wikigeneratedid" %)
200 Si ces variables ne sont pas suffisantes, vous pouvez chercher les classes css et les ajouter.
Aurelie Bertrand 21.1 201
Aurelie Bertrand 56.1 202 = (% id="cke_bm_112484S" style="display:none" %) (%%)Paramétrer le thème serveur =
203
204 (% class="box infomessage" %)
205 (((
206 💡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.
207 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"]]). 
208 À 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.
209 )))
210
211 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 :
212
213 1. Depuis la page d'accueil, allez dans **Configuration** -> **Paramètres Serveurs** -> **Paramètres supplémentaires** -> **Divers**.
214 1. Dans la liste déroulante **Thème**, sélectionnez le thème créé.
215 Les thèmes disponibles sont ceux livrés par Digdash ou créés dans l'Éditeur de tableaux de bord.
Aurelie Bertrand 82.1 216 [[image:Select_theme_server_parameters_FR.png||alt="Thème serveur"]]
Aurelie Bertrand 56.1 217 1. Cliquez sur **Enregistrer.**