Last modified by Aurelie Bertrand on 2021/05/20 10:45
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 = Context =
6
7 Since the 2019R2 version, DigDash allows you to set into variable properties of the default theme by using a css file.
8
9 You don’t need to override the default theme by using another CSS file anymore.
10
11 = Define CSS constants =
12
13 (% class="box" %)
14 (((
15 :root
16 {
17 ~-~-<constant name 1 CSS>: <constant value 1 CSS>
18 ~-~-<constant name 2 CSS>: <constant value 2 CSS>
19 …
20 ~-~-<constant name N CSS>: <constant value N CSS>
21 }
22 )))
23
24 * CSS constants must be defined in a single bloc :root
25 * Constant names must begin with ~-~- as naming convention
26 * Constants must be named clearly and must be understandable
27
28 = Example =
29
30 DigDash delivers CSS constants with default values that you can set depending on what you need.
31
32 (% class="box" %)
33 (((
34 (% style="line-height:1.38" %)
35 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %):root
36
37 (% style="line-height:1.38" %)
38 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %){
39
40 (% style="line-height:1.38" %)
41 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-banner: #FFFFFF;
42
43 (% style="line-height:1.38" %)
44 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-page: #FFFFFF;
45
46 (% style="line-height:1.38" %)
47 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-portlet: transparent;
48
49 (% style="line-height:1.38" %)
50 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-popup: #FFFFFF;
51
52 (% style="line-height:1.38" %)
53 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-select: #11A0D9;
54
55 (% style="line-height:1.38" %)
56 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-item: #F4F4F4;
57
58 (% style="line-height:1.38" %)
59 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-background-color-label: #E2E2E2;
60
61 (% style="line-height:1.38" %)
62 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-color: #515151;
63
64 (% style="line-height:1.38" %)
65 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-color-select: #FFFFFF;
66
67 (% style="line-height:1.38" %)
68 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-border-color: #CDD1D3;
69
70 (% style="line-height:1.38" %)
71 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-logo-url: icons/digdash_2019/logo-dd-dark.svg;
72
73 (% style="line-height:1.38" %)
74 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)~-~-font-family: 'Open Sans', arial;
75
76 (% style="line-height:1.38" %)
77 (% style="color:#3f3f3f; font-family:~"Open Sans~",sans-serif; font-size:11pt; font-style:normal; font-variant:normal; font-weight:400; text-decoration:none; white-space:pre-wrap" %)}
78 )))
79
80 = Defining in the styles Dashboard editor =
81
82 Dans l'éditeur de styles : <nom du thème de base>.css
83
84 (% class="box" %)
85 (((
86 @import url("/<dashboard app>/file?method=loadTheme&theme=<basic theme name>.css&~-~-<constant name 1 CSS>=<constant value 1 CSS>&...&<constant name N CSS>=<constant value N CSS>");
87
88 :root
89 {
90 ~-~-<constant name 1 CSS>: <constant value 1 CSS>
91 …
92 ~-~-<constant name N CSS>: <constant value N CSS>
93 }
94 )))
95
96 The principle is to override CSS constant of the previous slide in the Dashboard style editor.
97
98 The first import line is mandatory to ensure compatibility with Internet Explorer browser.
99
100 We will set in the import URL parameters the name of CSS theme and the list of CSS constants defined in the :root section.
101
102 The URL should mention the dashboard application name (by default digdash_dashboard).
103
104 = Use in stylesheet =
105
106 To use one of the constants previously defined, the constant need to be included in the function ##**var**## :
107
108 {{code language="css"}}
109 .my-class{
110 background-color:var(--background-color-select)
111 }
112 {{/code}}
113
114 = Example of stylesheet =
115
116 In the style editor : digdash_2019_template.css
117
118 (% class="box" %)
119 (((
120 @import url("/digdash_dashboard/file?method=loadTheme&theme=digdash_2019_template.css&~-~-background-color-select=#FF00FF");
121
122 :root
123 {
124 ~-~-background-color-select: #FF00FF;
125 }
126 )))