Last modified by Aurelie Bertrand on 2026/06/22 11:16
Hide last authors
Aurelie Bertrand 53.1 1 {{ddtoc/}}
2
3 ----
4
Aurelie Bertrand 87.1 5 When Digdash is first installed, the //digash_2024 //theme //is //set by default as the server theme and is used to display the dashboards.
Aurelie Bertrand 38.1 6
Aurelie Bertrand 87.1 7 It is easy to customise the theme used for your dashboards. You can use a template provided by DigDash (//digdash_2019 or digdash_2024//) as the basis for your theme and modify it as you wish.
Aurelie Bertrand 1.1 8
Aurelie Bertrand 87.1 9 Customising the entire theme requires several settings.
10 It is recommended that you start by creating the theme in the dashboard editor. You can then modify the styles of the charts in Studio.
11 Finally, you can set the new theme as the server theme if you wish to apply it to all dashboard elements for all users.
Aurelie Bertrand 19.5 12
Aurelie Bertrand 87.1 13 = Creating the theme in the Dashboard Editor =
Aurelie Bertrand 1.1 14
Aurelie Bertrand 87.1 15 The Theme Editor allows you to easily create a new theme via an intuitive interface, whilst also offering a CSS editor for more advanced customisation.
Aurelie Bertrand 33.1 16
Aurelie Bertrand 87.1 17 See the page [[Theme Editor>>doc:Digdash.user_guide.dashboard.theme_editor.WebHome]] for more details.
Aurelie Bertrand 33.1 18
Aurelie Bertrand 87.1 19 = Define chart styles in Studio =
Aurelie Bertrand 19.2 20
Aurelie Bertrand 87.1 21 The theme in Studio allows you to modify the styles of the charts. To do this, you can either:
Aurelie Bertrand 19.2 22
Aurelie Bertrand 87.1 23 * use the theme creation wizard: this allows you to easily modify the theme via a user interface. See the [[Theme Editor Wizard>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Modify_style.style_editor.WebHome]] for further details.
24 * import a theme to use as a template and modify the constants.
Aurelie Bertrand 19.2 25
Aurelie Bertrand 50.1 26 (% class="box warningmessage" %)
27 (((
Aurelie Bertrand 87.1 28 ❗It is recommended that you use the same theme name as in the editor. This will be necessary if you subsequently wish to set the theme as a server theme.
Aurelie Bertrand 50.1 29 )))
30
Aurelie Bertrand 87.1 31 == Importing a theme ==
Aurelie Bertrand 19.2 32
Aurelie Bertrand 87.1 33 To use an existing theme:
Aurelie Bertrand 19.2 34
Aurelie Bertrand 87.1 35 1. When configuring flows (charts), go to the **Themes** tab. By default, the server theme is selected if one has been defined.
36 1. Click the **+ **button to the right of the list of themes to display the advanced interface.
37 1. Click the **+** button, then **Add** to create a new theme.
38 [[image:1782119337819-218.png]]
39 ➡ A **New **dialog box appears.
40 1. Enter the Theme **Name**: the same as the editor theme.
41 1. From the **Role** drop-down list, select** a **role to restrict the theme to, or select **None to **make the theme available to all roles, then click **OK**.
42 💡 Select **None **if** **you wish to use the theme as the server theme.
43 ➡ The theme is added to the list.
44 1. Select it and click the [[image:Edit_button.png]] to edit it.
Aurelie Bertrand 19.5 45 1. (((
46 (% style="line-height:1.38" %)
Aurelie Bertrand 87.1 47 The new theme is empty by default. You must specify the Digdash theme to be used as a template. To do this, add the following line as the first line:
Aurelie Bertrand 19.2 48
Aurelie Bertrand 19.5 49 {{code language="css"}}
Aurelie Bertrand 87.1 50 @import url "<name of the Digdash template>.css";
Aurelie Bertrand 19.5 51 {{/code}}
Aurelie Bertrand 19.2 52
Aurelie Bertrand 87.1 53 where **<name of the Digdash template>** should be replaced with the name of the theme you wish to use as the style base: //digdash_2019// or //digdash_2024//.
Aurelie Bertrand 19.5 54 )))
55
Aurelie Bertrand 87.1 56 You can then specify the constants you wish to modify. To do this, add a root block after the import line in the following format:
Aurelie Bertrand 19.5 57
Aurelie Bertrand 87.1 58 {{{:root { --<name of CSS constant 1>: <value of CSS constant 1> … --<name of CSS constant N>: <value of CSS constant N> }}}}
Aurelie Bertrand 19.5 59
60 (% class="box infomessage" %)
61 (((
62 **Note**
63
Aurelie Bertrand 87.1 64 CSS constants must be defined within the (one and only) **//:root//** block.
65 Constant names must begin with **~-~-** in accordance with naming conventions.
Aurelie Bertrand 19.5 66 )))
67
68 (% class="wikigeneratedid" %)
Aurelie Bertrand 87.1 69 The available constants are as follows (with example values):
Aurelie Bertrand 19.5 70
Aurelie Bertrand 19.6 71 (% class="wikigeneratedid" %)
Aurelie Bertrand 87.1 72 :root {
73 ~-~-dd-font-family-fontFamily:Open Sans;
Aurelie Bertrand 64.1 74 ~-~-dd-font-weight-fontWeight:inherit;
75 ~-~-dd-font-style-fontStyle:Normal;
76 ~-~-dd-font-color-fontColor:#000000;
77 ~-~-dd-axes-border-borderSize:0.3;
78 ~-~-dd-axes-border-borderColor:#888888;
79 ~-~-dd-tooltips-fontWeight:inherit;
80 ~-~-dd-tooltips-fontStyle:normal;
81 ~-~-dd-tooltips-fontColor:#888888;
82 ~-~-dd-tooltips-backgroundColor:#ffffff;
83 ~-~-dd-table-border-borderSize:0.5;
84 ~-~-dd-table-border-borderColor:#888888;
85 ~-~-dd-table-header-fontColor:#ffffff;
86 ~-~-dd-table-header-backgroundColor:#00b0f0;
87 ~-~-dd-table-header-fontWeight:bold;
88 ~-~-dd-table-TD-fontColor:#000000;
89 ~-~-dd-table-TD-backgroundColor:#ffffff;
90 }
Aurelie Bertrand 19.5 91
Aurelie Bertrand 56.1 92 (% class="wikigeneratedid" %)
Aurelie Bertrand 87.1 93 If these variables are not sufficient, you can search for the CSS classes and add them.
Aurelie Bertrand 21.1 94
Aurelie Bertrand 87.1 95 = Configuring the server theme =
Aurelie Bertrand 56.1 96
97 (% class="box infomessage" %)
98 (((
Aurelie Bertrand 87.1 99 💡Using a server-wide theme allows for ‘standardised’ customisation of the dashboard, with the same settings applied to all users and all charts.
100 It is also possible to define a theme at user level (see the page [[Manage Users>>doc:Digdash.deployment.configuration.administration.User_management.User_management.WebHome]]) or at page level (see the section [[Editing page settings>>doc:Digdash.user_guide.dashboard.dashboard_editor_guide.edit_dashboard.edit_dashboard_pages.WebHome||anchor="Parametres_page"]]).
101 Please note that the theme set at page level takes precedence over the user-level theme, which in turn takes precedence over the server-level theme.
Aurelie Bertrand 56.1 102 )))
103
Aurelie Bertrand 87.1 104 It is therefore possible to set the theme created in the Dashboard Editor as the server-wide theme so that it applies to all dashboard elements and all users. To do this:
Aurelie Bertrand 56.1 105
Aurelie Bertrand 87.1 106 1. From the home page, go to **Configuration** > **Server Settings** >**Additional parameters **> **Miscellaneous**.
107 1. From the **Theme** drop-down list, select the theme you have created.
108 The available themes are those provided by Digdash or created in the Dashboard Editor.
109 [[image:Server_theme_en.png||alt="Thème serveur"]]
110 1. Click **Save.**