Wiki source code of Styles CSS

Last modified by jhurst on 2021/04/21 10:01
Show last authors
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 = File 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 **.loading**
402
403 Description : Change l’affichage du Chargement des objets de type graphiques.
404
405 Exemple :
406
407 (% class="box" %)
408 (((
409 .loading { border : 1px solid #d4d4d4 !important; }
410 )))
411
412 **.loadingImg**
413
414 Description : Change l’image du Chargement des objets de type graphiques.
415
416 Exemple :
417
418 (% class="box" %)
419 (((
420 .loadingImg { background: url(mon_image.png) no-repeat !important; }
421 )))
422
423 **.loadingTxt**
424
425 Description : Change le texte du Chargement des objets de type graphiques.
426
427 Exemple :
428
429 (% class="box" %)
430 (((
431 .loadingTxt { font-family : ‘Open Sans’ !important; }
432 )))
433
434 Les sélecteurs CSS **#dashboard_editor** et **#dashboard_viewer** permettent de différencier le tableau de bord en mode édition du tableau de bord en mode consultation.
435
436 = {{id name="css_migration"/}}Migration des styles CSS (avant 2017R2 vers 2017R2 et plus) =
437
438 Suite à un changement de technologie pour la réalisation du tableau de bord, certaines classes CSS (ne provenant pas de DigDash) ne sont pas compatibles, voici une liste de classes CSS non compatibles avec leurs classes équivalentes :
439
440 * **#viewportPanel** doit être remplacé par **#dashboard_viewer**
441 * **.x-tab-strip-inner, .x-tab-left, .x-tab-right** doivent être remplacé par **.dd-tab-header**
442 * **.x-tab-strip-active .x-tab-strip-inner, .x-tab-strip-active .x-tab-left, .x-tab-strip-active .x-tab-right** doivent être remplacé par **.dd-tab-header-selected**
443 * **.x-tab-strip span.x-tab-strip-text** doivent être remplacé par **.dd-tab-header-text**
444 * **.x-panel** doit être remplacé par **.portlet**
445 * **.x-panel-header** doit être remplacé par **.portlet-header**
446 * **.x-panel-bwrap, .x-abs-layout-item, .x-panel-body **doivent être remplacé par** .portlet-content**