Wiki source code of Éditeur de thèmes

Last modified by Aurelie Bertrand on 2025/10/02 09:49
Show last authors
1 {{toc depth="4"/}}
2
3 ----
4
5 L'**Éditeur de thèmes **permet de créer simplement, sans connaissance particulière, un thème personnalisé pour vos tableaux de bord. Il offre néanmoins des possibilités de personnalisation avancée si besoin.
6
7 Il est disponible depuis le menu **Paramètres **de l'Éditeur de tableaux de bord.
8 Vous pouvez également l'ouvrir directement en utilisant le lien sous la forme suivante :
9 [[http:~~/~~/localhost:8080/digdash_dashboard/index-theme.jsp?domain=ddenterpriseapi>>http://localhost:8080/digdash_dashboard/index-theme.jsp?domain=ddenterpriseapi]]
10
11 Il est possible de créer un thème de base sur mesure, puis le décliner en plusieurs versions. Par exemple, vous pourriez concevoir un thème pour l'ensemble de l'entreprise, puis en créer des variantes avec des palettes de couleurs différentes pour les rôles des Ressources Humaines et du Commerce.
12
13 (% class="box infomessage" %)
14 (((
15 💡Si vous souhaitez modifier les styles des graphiques, rendez-vous dans le Studio.
16
17 Consultez la page [[Personnalisation du thème du tableau de bord>>doc:Digdash.customization.customization_DDE.custom_style.WebHome]] pour plus de détails sur la personnalisation complète du thème.
18 )))
19
20 = Pré-requis =
21
22 Vous devez disposer :
23
24 * de l'autorisation //Tableau de bord > Personnalisation du tableau de bord**.**//
25 * d'un tableau de bord afin de visualiser les modifications en temps réel.
26
27 = Créer un nouveau thème =
28
29 À l'ouverture, la fenêtre de l'Éditeur de thèmes s'affiche comme suit : aucun thème n'est sélectionné.
30
31 [[image:Theme_editor_first_empty_FR.png||alt="Editeur thèmes" height="422" width="807"]]
32
33 Pour créer un nouveau thème :
34
35 1. Cliquez sur le bouton **Créer** ou le bouton **+** à droite du champ **Thème courant**.
36 ➡ La boite de dialogue **Nouveau thème **s'affiche.
37 1. Entrez le nom de votre choix puis, sélectionnez le thème de base : Aucun, un thème DigDash ou un autre thème existant que vous souhaitez décliner. Par défaut, votre thème utilisera les mêmes paramètres et aura donc le même rendu graphique.
38 [[image:1755766139891-818.png||alt="Nouveau thème"]]
39 1. Cliquez sur **OK**.
40 ➡ Les paramètres de styles et la fenêtre de prévisualisation** **s'affichent :
41 1*. Dans le bandeau supérieur, vous retrouvez le nom du thème ainsi que le thème de base utilisé.
42 1*. Les paramètres de styles sont groupés par catégorie.
43 L'onglet CSS additionnel permet une personnalisation avancée pour les utilisateurs expérimentés.
44 1*. La fenêtre de prévisualisation comporte un onglet contenant votre tableau de bord complet dans lequel vous pouvez naviguer, et un onglet dédié à la page d'authentification.
45 [[image:Theme_editor_parameters_FR.png||alt="Aperçu"]]
46 1. Modifiez les paramètres comme souhaité : consultez le paragraphe [[Modifier les paramètres de styles>>doc:||anchor="Paramètres"]] pour plus de détails.
47 1. Une fois le résultat satisfaisant, cliquez sur le bouton **Sauvegarder** en bas à droite de la fenêtre de l'éditeur.
48
49 = Modifier les paramètres de styles{{id name="Paramètres"/}} =
50
51 (% class="box warningmessage" %)
52 (((
53 ⚠ Il n'y a pas de sauvegarde automatique. N'oubliez pas de sauvegarder régulièrement vos modifications en cliquant sur le bouton **Sauvegarder le thème** en bas à droite de l'interface.
54 )))
55
56 Les paramètres de styles sont groupés par catégorie :
57
58 * **Global** : paramètres des polices, bannières et arrière-plan du tableau de bord ainsi que les paramètres de la page d'authentification.
59 * **Navigation** : paramètres des menus de navigation (en onglets ou vertical).
60 * **Objets** : paramètres des objets (conteneurs des graphiques, filtres, commentaires, légendes, etc) et de leur titre.
61 * **Contenu** : paramètres de contenu des objets, du portail d'accès et des objets rétractables.
62 * **Autres** : dans le cas où vous éditez un thème personnalisé existant comportant des variables CSS supplémentaires aux variables DigDash, un onglet **Autres** est ajouté avec la liste de ces variables.
63 * **CSS additionnel** : éditeur de CSS pour ajout de CSS personnalisé.
64
65 Lorsque vous sélectionnez un paramètre de style, les éléments impactés sont mis en évidence dans la fenêtre de prévisualisation : ils sont entourés par une ligne pointillée jaune.
66
67 [[image:Theme_editor_highlighted_items_FR.png]]
68
69 Si vous modifiez alors le paramètre de style, vous pouvez visualiser immédiatement le rendu graphique dans la fenêtre de prévisualisation.
70
71 [[image:Theme_editor_modified_items_FR.png]]
72
73 == Ajouter du CSS additionnel ==
74
75 L'onglet CSS additionnel contient un éditeur CSS pour une personnalisation plus avancée.
76 Il peut être utilisé dans le cas où vous souhaitez modifier les styles pour des éléments non éditables dans l'interface ou pour un élément précis dans un contexte précis:
77
78 * Entrez le CSS puis cliquez sur **Appliquer **: le résultat est immédiatement visible dans la fenêtre de prévisualisation.
79 (% id="cke_bm_1664S" style="display:none" %)[[image:Theme_editor_add_CSS_FR.png||alt="Ajout CSS"]](%%) [[image:Theme_editor_add_CSS_FR.png]] [[image:Theme_editor_CSS_applied_FR.png]]
80
81 === Exemple: Personnalisation des styles d'un groupe dans un portail d'accès ===
82
83 Dans le cas où un groupement est utilisé (pages groupées par rôle, etc) dans un portail d'accès, les styles de chaque groupe peuvent être personnalisés en utilisant le sélecteur **CSS #dd-tiles-menu-content-slider_//nomdugroupe//**// //dans l'onglet **CSS additionnel**.
84 Par exemple, ci-dessous, nous modifions les styles des tuiles du groupe** **//Outils// en ajoutant le CSS additionnel suivant :
85
86 {{code}}
87 /*Personnalisation tuiles*/
88
89 #dd-tiles-menu-content-slider_Outils .dd-tile
90 {
91 background-color: #D5DFF0;
92 }
93
94 #dd-tiles-menu-content-slider_Outils .dd-tile-text
95 {
96 color: #000;
97 font-weight : bold;
98 }
99 {{/code}}
100
101 [[image:Tiles_gp_customisation_FR.png]]
102
103 = Gérer les thèmes =
104
105 == Éditer un thème ==
106
107 Pour éditer un thème existant:
108
109 * Sélectionnez le thème de votre choix dans la liste déroulante **Thème courant** et modifiez-le comme souhaité.
110
111 == Dupliquer un thème ==
112
113 Pour dupliquer un thème existant:
114
115 1. Sélectionnez le thème de votre choix dans la liste déroulante **Thème courant.**
116 1. Cliquez sur le bouton **Dupliquer** [[image:1755781708142-282.png]] puis nommez-le comme souhaité.
117
118 == Supprimer un thème ==
119
120 Pour supprimer un thème :
121
122 1. Sélectionnez le thème de votre choix dans la liste déroulante **Thème courant.**
123 1. Cliquez sur le bouton **Supprimer** [[image:1755782140630-171.png]].