Wiki source code of Variabilisation du thème Digdash
Last modified by Aurelie Bertrand on 2021/05/20 10:45
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
4.1 | 1 | {{ddtoc/}} |
| |
1.1 | 2 | |
| 3 | ---- | ||
| 4 | |||
| |
16.1 | 5 | = Context = |
| |
1.1 | 6 | |
| |
16.1 | 7 | Since the 2019R2 version, DigDash allows you to set into variable properties of the default theme by using a css file. |
| |
1.1 | 8 | |
| |
16.1 | 9 | You don’t need to override the default theme by using another CSS file anymore. |
| |
1.1 | 10 | |
| |
16.1 | 11 | = Define CSS constants = |
| |
1.1 | 12 | |
| |
16.1 | 13 | (% class="box" %) |
| 14 | ((( | ||
| |
1.1 | 15 | :root |
| 16 | { | ||
| |
16.1 | 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> | ||
| |
1.1 | 21 | } |
| |
16.1 | 22 | ))) |
| |
1.1 | 23 | |
| |
16.1 | 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 | ||
| |
1.1 | 27 | |
| |
16.1 | 28 | = Example = |
| |
1.1 | 29 | |
| |
16.1 | 30 | DigDash delivers CSS constants with default values that you can set depending on what you need. |
| |
1.1 | 31 | |
| |
16.1 | 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 | ||
| |
1.1 | 36 | |
| |
16.1 | 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" %){ | ||
| |
1.1 | 39 | |
| |
16.1 | 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 | |||
| |
1.1 | 82 | Dans l'éditeur de styles : <nom du thème de base>.css |
| 83 | |||
| |
16.1 | 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 | |||
| |
1.1 | 88 | :root |
| 89 | { | ||
| |
16.1 | 90 | ~-~-<constant name 1 CSS>: <constant value 1 CSS> |
| 91 | … | ||
| 92 | ~-~-<constant name N CSS>: <constant value N CSS> | ||
| |
1.1 | 93 | } |
| |
16.1 | 94 | ))) |
| |
1.1 | 95 | |
| |
16.1 | 96 | The principle is to override CSS constant of the previous slide in the Dashboard style editor. |
| |
1.1 | 97 | |
| |
16.1 | 98 | The first import line is mandatory to ensure compatibility with Internet Explorer browser. |
| |
1.1 | 99 | |
| |
16.1 | 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. |
| |
1.1 | 101 | |
| |
16.1 | 102 | The URL should mention the dashboard application name (by default digdash_dashboard). |
| |
1.1 | 103 | |
| |
16.1 | 104 | = Use in stylesheet = |
| |
9.1 | 105 | |
| |
16.1 | 106 | To use one of the constants previously defined, the constant need to be included in the function ##**var**## : |
| |
9.1 | 107 | |
| 108 | {{code language="css"}} | ||
| |
16.1 | 109 | .my-class{ |
| |
14.1 | 110 | background-color:var(--background-color-select) |
| |
9.1 | 111 | } |
| 112 | {{/code}} | ||
| 113 | |||
| |
16.1 | 114 | = Example of stylesheet = |
| |
1.1 | 115 | |
| |
16.1 | 116 | In the style editor : digdash_2019_template.css |
| |
1.1 | 117 | |
| |
16.1 | 118 | (% class="box" %) |
| 119 | ((( | ||
| 120 | @import url("/digdash_dashboard/file?method=loadTheme&theme=digdash_2019_template.css&~-~-background-color-select=#FF00FF"); | ||
| |
1.1 | 121 | |
| 122 | :root | ||
| 123 | { | ||
| |
16.1 | 124 | ~-~-background-color-select: #FF00FF; |
| |
9.1 | 125 | } |
| |
16.1 | 126 | ))) |