Wiki source code of Éditeur de thèmes

Last modified by Aurelie Bertrand on 2026/06/22 16:57
Show last authors
1 {{toc depth="4"/}}
2
3 ----
4
5 The Theme Editor allows you** **to easily create a custom theme for your dashboards without needing any specialist knowledge. It also offers advanced customisation options should you require them.
6
7 It is available from the **Settings **menu in the Dashboard Editor.
8 You can also open it directly using the following link:
9 [[http:~~/~~/localhost:8080/digdash_dashboard/index-theme.jsp?domain=ddenterpriseapi>>http://localhost:8080/digdash_dashboard/index-theme.jsp?domain=ddenterpriseapi]]
10
11 It is possible to create a bespoke base theme and then adapt it into several versions. For example, you could design a theme for the whole company, then create variants with different colour palettes for the Human Resources and Sales roles.
12
13 (% class="box infomessage" %)
14 (((
15 💡If you want to change the styles of the graphics, go to the Studio.
16
17 See the page [[Dashboard Theme Customisation>>doc:Digdash.customization.customization_DDE.custom_style.WebHome]] for more details on fully customising the theme.
18 )))
19
20 = Prerequisites =
21
22 You must have:
23
24 * //the Dashboard > Dashboard Customisation// permission//**.**//
25 * a dashboard to view changes in real time.
26
27 = Create a new theme =
28
29 When opened, the Theme Editor window appears as follows: no theme is selected.
30
31 [[image:1782120540066-135.png||alt="Theme editor" height="473" width="825"]]
32
33
34 To create a new theme:
35
36 1. Click the **Create** button or the **+** button to the right of the **Current Theme** field.
37 ➡ The **New Theme **dialogue box **appears **.
38 1. Enter the name of your choice, then select the base theme: None, a DigDash theme or another existing theme that you wish to customise. By default, your theme will use the same settings and will therefore have the same visual appearance.
39 [[image:New_theme_en.png||alt="Nouveau thème"]]
40 1. Click **OK**.
41 ➡ The style settings and preview window will appear** **:
42 1*. In the top banner, you’ll see the theme name and the base theme used.
43 1*. The style settings are grouped by category.
44 The ‘Additional CSS’ tab allows for advanced customisation for experienced users.
45 1*. The preview window includes a tab containing your full dashboard, which you can navigate, and a tab dedicated to the login page.
46 [[image:My_theme_en.png||alt="Theme_editor_new_FR.png"]]
47 1. Modify the settings as required: see the section [[Modifying style settings>>doc:||anchor="Paramètres"]] for further details.
48 1. Once you are satisfied with the result, click the **Save** button at the bottom right of the editor window.
49
50 = Editing style settings{{id name="Paramètres"/}} =
51
52 (% class="box warningmessage" %)
53 (((
54 ⚠ There is no automatic save. Don’t forget to save your changes regularly by clicking the **‘Save theme’** button at the bottom right of the interface.
55 )))
56
57 Style settings are grouped by category:
58
59 * **Global**: settings for fonts, banners and the dashboard background, as well as settings for the login page.
60 * **Logos: **images and settings for logos used throughout the dashboard.
61 * **Navigation**: settings for navigation menus (tabbed or vertical).
62 * **Objects**: settings for objects (chart containers, filters, comments, captions, etc.) and their titles.
63 * **Content**: settings for the content of objects, the access portal and collapsible objects.
64 * **Other**: list of custom variables.
65 You can add a custom variable by clicking the **‘Create variable’** button: then enter its name and value
66
67 (% class="box infomessage" %)
68 (((
69 ℹ If you are editing an existing custom theme (created in a version prior to 2025R2) that contains CSS variables in addition to the DigDash variables, these will be listed here.
70 )))
71
72 * **Additional CSS**: CSS editor for adding custom CSS.
73
74 When you select a style setting, the affected elements are highlighted in the preview window: they are surrounded by a yellow dotted line.
75
76 [[image:Theme_editor_highlight_en.png||alt="Theme_editor_highlighted_items_logos_FR.png"]]
77
78 If you then change the style setting, you can immediately see the visual result in the preview window.
79
80 [[image:Modified_theme_en.png||alt="Theme_editor_modified_items_logos_FR.png"]]
81
82 == Adding additional CSS ==
83
84 The ‘Additional CSS’ tab contains a CSS editor for more advanced customisation.
85 It can be used if you wish to modify the styles for elements that cannot be edited in the interface, or for a specific element in a specific context:
86
87 (% class="box infomessage" %)
88 (((
89 💡 Click the button [[image:1761668291292-281.png]] to maximise the editor.
90 )))
91
92 * Enter the CSS and then click **Apply: **the result is immediately visible in the preview window.
93 (% id="cke_bm_1664S" style="display:none" %)[[image:Theme_editor_add_CSS_FR.png||alt="Ajout CSS"]](%%) [[image:Additionnal_CSS_en.png||alt="1761668200065-298.png"]] [[image:Display_comments_en.png||alt="Theme_editor_CSS_applied_FR.png"]]
94
95 === Example: Customising styles for a group in an access portal ===
96
97 Where grouping is used (pages grouped by role, etc.) in an access portal, the styles for each group can be customised using the **CSS** selector **//#dd-tiles-menu-content-slider_groupname//**// //in// //the **Additional CSS** tab.
98 For example, below, we are modifying the styles of the tiles in the//Tools// group by adding the following additional CSS:
99
100 {{code}}
101 /*Tiles customization*/
102
103 #dd-tiles-menu-content-slider_Tools .dd-tile
104 {
105 background-color: #D5DFF0;
106 }
107
108 #dd-tiles-menu-content-slider_Tools .dd-tile-text
109 {
110 color: #000;
111 font-weight : bold;
112 }
113 {{/code}}
114
115 [[image:Tiles_custo_en.png||height="603" width="1124"]]
116
117 = Managing themes =
118
119 == Edit a theme ==
120
121 To edit an existing theme:
122
123 * Select the theme of your choice from the **Current Theme** drop-down list and edit it as required.
124
125 == Duplicate a theme ==
126
127 To duplicate an existing theme:
128
129 1. Select the theme of your choice from the **Current Theme** drop-down list**.**
130 1. Click the **Duplicate** button [[image:1755781708142-282.png]] and then name it as you wish.
131
132 == Deleting a theme ==
133
134 To delete a theme:
135
136 1. Select the theme of your choice from the **Current Theme** drop-down list**.**
137 1. Click the **Delete** [[image:1755782140630-171.png]] button.