Wiki source code of Styles CSS

Last modified by Aurelie Bertrand on 2025/02/07 10:22
Hide last authors
jhurst 1.1 1 {{ddtoc/}}
2
3 ----
4
5 Voici la liste non exhaustive des classes CSS permettant de customiser l’aspect visuel du tableau de bord.
6
7 = Bannière =
8
Aurelie Bertrand 5.1 9 **.topPanel**
jhurst 1.1 10
11 Description : Change l’aspect visuel de la bannière (bordure, fond d’écran).
12
13 Exemple :
14
15 (% class="box" %)
16 (((
17 .topPanel { background-color : #f1f1f1; border : 1px solid black; }
18 )))
19
Aurelie Bertrand 5.1 20 **.logoTopPanel**
jhurst 1.1 21
22 Description : Change le logo de la bannière.
23
24 Exemple :
25
26 (% class="box" %)
27 (((
28 .logoTopPanel { background: url (mon_logo.png) no-repeat; }
29 )))
30
Aurelie Bertrand 5.1 31 **.userLabel**
jhurst 1.1 32
33 Description : Change le texte représentant le nom de l’utilisateur (couleur, police).
34
35 Exemple :
36
37 (% class="box" %)
38 (((
39 .userLabel { font-family : ‘Open Sans’ ; color : black; }
40 )))
41
Aurelie Bertrand 5.1 42 **.topPanelIconLabelPanel_Label**
jhurst 1.1 43
44 Description : Change le menu à droite de la bannière.
45
46 Exemple :
47
48 (% class="box" %)
49 (((
50 .topPanelIconLabelPanel_Label { font-family : ‘Open Sans’; color : black; }
51 )))
52
53 = Barre de filtres =
54
Aurelie Bertrand 5.1 55 **#interactBar**
jhurst 1.1 56
57 Description : Change le div contenant les boîte de filtres.
58
59 Exemple :
60
61 (% class="box" %)
62 (((
63 .interactBar { background-color : #f1f1f1; }
64 )))
65
Aurelie Bertrand 5.1 66 **.selHierTitleDiv**
jhurst 1.1 67
68 Description : Change le titre de la boîte de filtres.
69
70 Exemple :
71
72 (% class="box" %)
73 (((
74 .selHierTitleDiv { background-color : #d5d7da; border-radius : 4px; }
75 )))
76
Aurelie Bertrand 5.1 77 **.selHierTitleDivWhite**
jhurst 1.1 78
79 Description : Change le titre de la boîte de filtres au survol de la souris.
80
81 Exemple :
82
83 (% class="box" %)
84 (((
85 .selHierTitleDivWhite { background-color : #009fa6; color : white; }
86 )))
87
88 = Onglets =
89
Aurelie Bertrand 5.1 90 **.dd-tab-bar**
jhurst 1.1 91
92 Description : Change la barre contenant la liste des onglets.
93
94 Exemple :
95
96 (% class="box" %)
97 (((
98 .dd-tab-bar { background-color : #f1f1f1; border-bottom: 1px solid #f1f1f1; }
99 )))
100
Aurelie Bertrand 5.1 101 **.dd-tab-header**
jhurst 1.1 102
103 Description : Change l’onglet.
104
105 Exemple :
106
107 (% class="box" %)
108 (((
109 .dd-tab-header { background-color : #f1f1f1 !important; border-right: 1px solid #cccccc; }
110 )))
111
Aurelie Bertrand 5.1 112 **.dd-tab-header-selected**
jhurst 1.1 113
114 Description : Change l’onglet sélectionné.
115
116 Exemple :
117
118 (% class="box" %)
119 (((
120 .dd-tab-header-selected { background-color : #009fa6 !important; color : white !important; }
121 )))
122
Aurelie Bertrand 5.1 123 **.dd-tab-header-text**
jhurst 1.1 124
125 Description : Change le texte de l’onglet.
126
127 Exemple :
128
129 (% class="box" %)
130 (((
131 .dd-tab-header-text { font-family : ‘Open Sans’ !important; font-size : 13px !important; }
132 )))
133
134 = Portlets =
135
Aurelie Bertrand 5.1 136 **.portlet**
jhurst 1.1 137
138 Description : Change la portlet.
139
140 Exemple :
141
142 (% class="box" %)
143 (((
144 .portlet { border : 1px solid #d0d0d0 !important; }
145 )))
146
Aurelie Bertrand 5.1 147 **.portlet-header**
jhurst 1.1 148
149 Description : Change l’en-tête de la portlet.
150
151 Exemple :
152
153 (% class="box" %)
154 (((
155 .portlet-header { background-color : #eeeeee !important; border-bottom : 1px solid #d0d0d0 !important; }
156 )))
157
Aurelie Bertrand 5.1 158 **.portlet-header-text**
jhurst 1.1 159
160 Description : Change le texte de l’en-tête de la portlet.
161
162 Exemple :
163
164 (% class="box" %)
165 (((
166 .portlet-header-text { color : #6d6d6d !important; font-size : 16px !important; font-family : ‘Open Sans’ !important; }
167 )))
168
Aurelie Bertrand 5.1 169 **.portlet-content**
jhurst 1.1 170
171 Description : Change le contenu de la portlet.
172
173 Exemple :
174
175 (% class="box" %)
176 (((
177 .portlet-content { background-color : white !important; }
178 )))
179
Aurelie Bertrand 5.1 180 **.x-tool-maximize, .x-tool-gear, .x-tool-help, .x-tool-restore, .x-tool-alert, .x-tool-comment**
jhurst 1.1 181
182 **~ **Description : Change les icônes s’affichant dans l’en-tête de la portlet.
183
184 Exemple :
185
186 (% class="box" %)
187 (((
188 .x-tool-maximize { background-image : url(mon_icone.png) !important; }
189 )))
190
abertrand 1.2 191 = Fil d’ariane =
jhurst 1.1 192
Aurelie Bertrand 5.1 193 **.breadcrumbImg**
jhurst 1.1 194
195 Description : Change l’image de réinitialisation du fil d’ariane.
196
197 Exemple :
198
199 (% class="box" %)
200 (((
Aurelie Bertrand 5.1 201 .breadcrumnImg { background-image : url(mon_image.png !important; }
jhurst 1.1 202 )))
203
Aurelie Bertrand 5.1 204 **.unclickablebreadcrumb, .clickablebreadcrumb**
jhurst 1.1 205
206 Description : Change le texte du fil d’ariane.
207
208 Exemple :
209
210 (% class="box" %)
211 (((
212 .unclickablebreadcrumb, .clickablebreadcrumb { color : #6d6d6d !important; }
213 )))
214
215 = Slicers verticaux / horizontaux =
216
Aurelie Bertrand 5.1 217 **.tdMemberActive, .spanMemberActive**
jhurst 1.1 218
219 Description : Change le membre du slicer ayant des valeurs.
220
221 Exemple :
222
223 (% class="box" %)
224 (((
225 .tdMemberActive { background-color: #d5d7da !important; border-radius : 5px !important; color : black !important; }
226 )))
227
Aurelie Bertrand 5.1 228 **.tdMemberInactive, .spanMemberInactive**
jhurst 1.1 229
230 Description : Change le membre du slicer n’ayant pas de valeurs.
231
232 Exemple :
233
234 (% class="box" %)
235 (((
236 .tdMemberInactive { background-color: white !important; color : gray !important; }
237 )))
238
Aurelie Bertrand 5.1 239 **.tdMemberSelected, .spanMemberSelected**
jhurst 1.1 240
241 Description : Change le membre sélectionné du slicer.
242
243 Exemple :
244
245 (% class="box" %)
246 (((
247 .tdMembeSelected { background-color: #009fa6 !important; border-radius : 3px !important; color : white !important; }
248 )))
249
250 = Filtres =
251
Aurelie Bertrand 5.1 252 **.trHeaderFilter**
jhurst 1.1 253
254 Description : Change l’en-tête de l’objet Filtre.
255
256 Exemple :
257
258 (% class="box" %)
259 (((
260 .trHeaderFilter { background-color: #d5d7da !important; }
261 )))
262
Aurelie Bertrand 5.1 263 **.tdFilter**
jhurst 1.1 264
265 Description : Change le contenu de l’objet Filtre.
266
267 Exemple :
268
269 (% class="box" %)
270 (((
271 .tdFilter { background-color: #f1f1f1 !important; }
272 )))
273
Aurelie Bertrand 5.1 274 **.tdFilterImage**
jhurst 1.1 275
276 Description : Change l’image de suppression d’un filtre.
277
278 Exemple :
279
280 (% class="box" %)
281 (((
282 tdFilterImage { background: url(mon_image.png) no-repeat #009fa6 !important; }
283 )))
284
285 = Commentaires =
286
Aurelie Bertrand 5.1 287 **.comments**
jhurst 1.1 288
289 Description : Change l’objet Commentaire.
290
291 Exemple :
292
293 (% class="box" %)
294 (((
295 .comments { background-color: #f1f1f1 !important; }
296 )))
297
Aurelie Bertrand 5.1 298 **.commentsDisplayAll**
jhurst 1.1 299
300 Description : Change le bouton permettant l’affichage de tous les commentaires.
301
302 Exemple :
303
304 (% class="box" %)
305 (((
306 .commentsDisplayAll { color : #ffffff !important; background-color: #009fa6 !important; }
307 )))
308
Aurelie Bertrand 5.1 309 **.commentsFilter**
jhurst 1.1 310
311 Description : Change l’image permettant d’appliquer la sélection d’un commentaire.
312
313 Exemple :
314
315 (% class="box" %)
316 (((
317 .commentsFilter { background: url(mon_icone.png) !important; }
318 )))
319
Aurelie Bertrand 5.1 320 **.commentsEdit**
jhurst 1.1 321
322 Description : Change l’image permettant d’éditer un commentaire.
323
324 Exemple :
325
326 (% class="box" %)
327 (((
328 .commentsEdit { background: url(mon_icone.png) !important; }
329 )))
330
Aurelie Bertrand 5.1 331 **.commentsRemove**
jhurst 1.1 332
333 Description : Change l’image permettant de supprimer un commentaire.
334
335 Exemple :
336
337 (% class="box" %)
338 (((
339 .commentsRemove { background: url(mon_icone.png) !important; }
340 )))
341
Aurelie Bertrand 5.1 342 **.commentsDate**
jhurst 1.1 343
344 Description : Change la date du commentaire.
345
346 Exemple :
347
348 (% class="box" %)
349 (((
350 .commentsDate { font-family : ‘Open Sans’ !important; color : black !important; }
351 )))
352
Aurelie Bertrand 5.1 353 **.commentsUser**
jhurst 1.1 354
355 Description : Change l’utilisateur du commentaire.
356
357 Exemple :
358
359 (% class="box" %)
360 (((
361 .commentsUser { font-family : ‘Open Sans’ !important; color : black !important; }
362 )))
363
Aurelie Bertrand 5.1 364 **.commentsContent**
jhurst 1.1 365
366 Description : Change le contenu du commentaire.
367
368 Exemple :
369
370 (% class="box" %)
371 (((
372 .commentsContent { font-family : ‘Open Sans’ !important; color : black !important; }
373 )))
374
375 = Curseurs (slicers et variables) =
376
Aurelie Bertrand 5.1 377 **.ui-widget-header**
jhurst 1.1 378
379 Description : Change la barre du curseur en mode intervalle.
380
381 Exemple :
382
383 (% class="box" %)
384 (((
385 .ui-widget-header { background: #009fa6 50% 50% repeat-x !important; }
386 )))
387
Aurelie Bertrand 5.1 388 **.ui-widget-content**
jhurst 1.1 389
390 Description : Change la barre du curseur.
391
392 Exemple :
393
394 (% class="box" %)
395 (((
396 .ui-widget-content { background: #009fa6 50% 50% repeat-x !important; }
397 )))
398
399 = Chargement =
400
Aurelie Bertrand 7.1 401 **.dd-progress-bar**
402
Aurelie Bertrand 8.1 403 Description : Change le fond de la barre de chargement total de la page.
Aurelie Bertrand 7.1 404
405 Exemple :
406
407 (% class="box" %)
408 (((
409 .dd-progress-bar { background-color: white; }
410 )))
411
412 **.dd-progress-bar-content**
413
Aurelie Bertrand 8.1 414 Description : Change le fond de la barre de chargement qui augmente.
Aurelie Bertrand 7.1 415
416 Exemple :
417
418 (% class="box" %)
419 (((
420 .dd-progress-bar-content { background: blue; }
421 )))
422
Aurelie Bertrand 5.1 423 **.loading**
jhurst 1.1 424
425 Description : Change l’affichage du Chargement des objets de type graphiques.
426
427 Exemple :
428
429 (% class="box" %)
430 (((
431 .loading { border : 1px solid #d4d4d4 !important; }
432 )))
433
Aurelie Bertrand 5.1 434 **.loadingImg**
jhurst 1.1 435
436 Description : Change l’image du Chargement des objets de type graphiques.
437
438 Exemple :
439
440 (% class="box" %)
441 (((
442 .loadingImg { background: url(mon_image.png) no-repeat !important; }
443 )))
444
Aurelie Bertrand 5.1 445 **.loadingTxt**
jhurst 1.1 446
447 Description : Change le texte du Chargement des objets de type graphiques.
448
449 Exemple :
450
451 (% class="box" %)
452 (((
453 .loadingTxt { font-family : ‘Open Sans’ !important; }
454 )))
455
abertrand 3.1 456 Les sélecteurs CSS **#dashboard_editor**, **#dashboard_viewer et #dashboard_mobile ** permettent de différencier le tableau de bord en mode édition, du tableau de bord en mode consultation "Desktop" et du tableau de bord en mode consultation "Mobile" .