Code source wiki de Styles CSS

Modifié par Aurelie Bertrand le 2025/02/07 10:22
Afficher les derniers auteurs
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
9 **.topPanel**
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
20 **.logoTopPanel**
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
31 **.userLabel**
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
42 **.topPanelIconLabelPanel_Label**
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
55 **#interactBar**
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
66 **.selHierTitleDiv**
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
77 **.selHierTitleDivWhite**
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
90 **.dd-tab-bar**
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
101 **.dd-tab-header**
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
112 **.dd-tab-header-selected**
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
123 **.dd-tab-header-text**
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
136 **.portlet**
137
138 Description : Change la portlet.
139
140 Exemple :
141
142 (% class="box" %)
143 (((
144 .portlet { border : 1px solid #d0d0d0 !important; }
145 )))
146
147 **.portlet-header**
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
158 **.portlet-header-text**
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
169 **.portlet-content**
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
180 **.x-tool-maximize, .x-tool-gear, .x-tool-help, .x-tool-restore, .x-tool-alert, .x-tool-comment**
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
191 = Fil d’ariane =
192
193 **.breadcrumbImg**
194
195 Description : Change l’image de réinitialisation du fil d’ariane.
196
197 Exemple :
198
199 (% class="box" %)
200 (((
201 .breadcrumnImg { background-image : url(mon_image.png !important; }
202 )))
203
204 **.unclickablebreadcrumb, .clickablebreadcrumb**
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
217 **.tdMemberActive, .spanMemberActive**
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
228 **.tdMemberInactive, .spanMemberInactive**
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
239 **.tdMemberSelected, .spanMemberSelected**
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
252 **.trHeaderFilter**
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
263 **.tdFilter**
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
274 **.tdFilterImage**
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
287 **.comments**
288
289 Description : Change l’objet Commentaire.
290
291 Exemple :
292
293 (% class="box" %)
294 (((
295 .comments { background-color: #f1f1f1 !important; }
296 )))
297
298 **.commentsDisplayAll**
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
309 **.commentsFilter**
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
320 **.commentsEdit**
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
331 **.commentsRemove**
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
342 **.commentsDate**
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
353 **.commentsUser**
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
364 **.commentsContent**
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
377 **.ui-widget-header**
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
388 **.ui-widget-content**
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
401 **.dd-progress-bar**
402
403 Description : Change le fond de la barre de chargement total de la page.
404
405 Exemple :
406
407 (% class="box" %)
408 (((
409 .dd-progress-bar { background-color: white; }
410 )))
411
412 **.dd-progress-bar-content**
413
414 Description : Change le fond de la barre de chargement qui augmente.
415
416 Exemple :
417
418 (% class="box" %)
419 (((
420 .dd-progress-bar-content { background: blue; }
421 )))
422
423 **.loading**
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
434 **.loadingImg**
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
445 **.loadingTxt**
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
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" .