Code source wiki de Editeur de CSS
Modifié par jhurst le 2021/04/21 10:01
Afficher les derniers auteurs
author | version | line-number | content |
---|---|---|---|
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. |