Wiki source code of Editeur de CSS

Last modified by jhurst on 2021/04/21 10:01
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 = Présentation =
6
7 Dans le Web Studio, a fin de faciliter la customisation des graphiques et tableaux, nous avons mis à disposition un Editeur de styles.
8
9 (% class="box warningmessage" %)
10 (((
11 Attention : Pour utiliser cette fonctionnalité vous devez choisir impérativement le thème : digdash_2019_template.
12 )))
13
14 En mode édition :
15
16 - Cliquez sur l'icône "Styles" [[image:1603106749157-659.png||queryString="width=20&height=21" height="21" width="20"]]
17
18 - Sélectionnez le thème "digdash_2019_template"
19
20 - Cliquez sur l'icône "Editeur de styles" : [[image:1603285800917-912.png]]
21
22 Dans l'éditeur de styles sont indiquées les valeurs par défaut que vous pouvez modifier à votre convenance :
23
24 [[image:1603285859560-732.png]]
25
26
27 = Utilisation =
28
29 Les trois premiers onglets concernent les Graphiques (Polices, Axes, info-bulles) , le dernier , comme son nom l'indique, concerne les "Tableaux".
30
31 Dès lors ou vous aurez choisi vos préférences, cliquez sur "Sauver" et "Fermer".
32
33 Vous pourrez ainsi voir le résultat de vos choix : (pour l'exemple ci dessous, nous avons modifié la couleur de la police, la couleur des axes, ... )
34
35 [[image:1603107532965-947.png]]
36
37
38 (% class="box warningmessage" %)
39 (((
40 La partie " :root" doit être obligatoirement présente avec les différents nom de variables par défaut. Le changement du nommage de ces dernières entrainerai un dysfonctionnement de l'éditeur.
41 )))
42
43 Pour retrouver les valeurs d'origines vous pouvez remplacer la partie "root" modifié par celle-ci dessous :
44
45 {{code language="CSS"}}
46 :root {
47 --dd-font-family-fontFamily:Open Sans;
48 --dd-font-weight-fontWeight:inherit;
49 --dd-font-style-fontStyle:Normal;
50 --dd-font-color-fontColor:#000000;
51 --dd-axes-border-borderSize:0.3;
52 --dd-axes-border-borderColor:#888888;
53 --dd-tooltips-fontWeight:inherit;
54 --dd-tooltips-fontStyle:normal;
55 --dd-tooltips-fontColor:#888888;
56 --dd-tooltips-backgroundColor:#ffffff;
57 --dd-table-border-borderSize:0.5;
58 --dd-table-border-borderColor:#888888;
59 --dd-table-header-fontColor:#ffffff;
60 --dd-table-header-backgroundColor:#00b0f0;
61 --dd-table-header-fontWeight:bold;
62 --dd-table-TD-fontColor:#000000;
63 --dd-table-TD-backgroundColor:#ffffff;
64 }
65 {{/code}}
66
67 = Pour aller plus loin =
68
69 Si vous souhaitez modifier d'autres éléments dont vous connaissez la classe (sauf les éléments "font-size"), vous pouvez créer vos propre noms de variable avec leurs propres valeurs qui seraient intégrés à cet éditeur.
70
71
72 Explication :
73
74 Pour tout ce qui est variable des graphiques, elles sont construites comme suit :
75
76 Exemple : ~-~-dd-font-weight-fontWeight:inherit;
77
78 ~-~-dd : indique qu'il s'agit d'une variable de notre éditeur , cet élément devra toujours être présent.
79
80 -font : indique la famille de l'élément. Ici elle indique la famille "Polices".  Si vous donnez un autre nom à votre famille, celle-ci j'ajoutera dans le menu du haut à la suite de "Polices, Axes, info-bulles et Tableaux". Si votre variable concerne une famille existante, conservez la même typographie : "font" pour "Polices" , "axes" pour Axes, "tooltips" pour "Info-bulles" et "table" pour "Tableaux".
81
82 - weight : indique le type, ici c'est l'épaisseur.
83
84 -fontWeight : l'attribut, ici indique qu'il s'agit de l'épaisseur de la police.
85
86 puis la valeur de la variable ":inherit" . C'est la valeur que nous avons choisi par défaut. Si nous aurions souhaité mettre l'épaisseur de la police en gras par défaut nous aurions choisi "bold".
87
88 Pour tout ce qui est variable des Tableaux, elles sont construites comme celle des graphiques :
89
90 Mais elles contiennent une valeur supplémentaire : "header" ou "TD"  afin de nous permettre de différencier les éléments à modifier, les "header" pour les titres, ou les "TD" pour les autres lignes.
91
92 la variable : ~-~-dd-font-weight-fontWeight:inherit; a ensuite été utilisé dans la classe souhaité :
93
94 par exemple :
95
96 {{code language="CSS"}}
97 .axHLblTxt
98 {
99 font-weight :var(--dd-font-weight-fontWeight);
100 }
101 {{/code}}
102
103 La classe "axHLblTxt" correspond au texte horizontal dans les graphiques.