Éditeur de thèmes
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.
Il est disponible depuis le menu Paramètres de l'Éditeur de tableaux de bord.
Vous pouvez également l'ouvrir directement en utilisant le lien sous la forme suivante :
http://localhost:8080/digdash_dashboard/index-theme.jsp?domain=ddenterpriseapi
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.
Pré-requis
Vous devez disposer :
- de l'autorisation Tableau de bord > Personnalisation du tableau de bord.
- d'un tableau de bord afin de visualiser les modifications en temps réel.
Créer un nouveau thème
À l'ouverture, la fenêtre de l'Éditeur de thèmes s'affiche comme suit : aucun thème n'est sélectionné.
Pour créer un nouveau thème :
- Cliquez sur le bouton Créer ou le bouton + à droite du champ Thème courant.
➡ La boite de dialogue Nouveau thème s'affiche. - 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.
- Cliquez sur OK.
➡ Les paramètres de styles et la fenêtre de prévisualisation s'affichent :- Dans le bandeau supérieur, vous retrouvez le nom du thème ainsi que le thème de base utilisé.
- Les paramètres de styles sont groupés par catégorie.
L'onglet CSS additionnel permet une personnalisation avancée pour les utilisateurs expérimentés. - 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.
- Modifiez les paramètres comme souhaité : consultez le paragraphe Modifier les paramètres de styles pour plus de détails.
- Une fois le résultat satisfaisant, cliquez sur le bouton Sauvegarder en bas à droite de la fenêtre de l'éditeur.
Modifier les paramètres de styles
Les paramètres de styles sont groupés par catégorie :
- 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.
- Navigation : paramètres des menus de navigation (en onglets ou vertical).
- Objets : paramètres des objets (conteneurs des graphiques, filtres, commentaires, légendes, etc) et de leur titre.
- Contenu : paramètres de contenu des objets, du portail d'accès et des objets rétractables.
- 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.
- CSS additionnel : éditeur de CSS pour ajout de CSS personnalisé.
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.
Si vous modifiez alors le paramètre de style, vous pouvez visualiser immédiatement le rendu graphique dans la fenêtre de prévisualisation.
Ajouter du CSS additionnel
L'onglet CSS additionnel contient un éditeur CSS pour une personnalisation plus avancée.
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:
- Entrez le CSS puis cliquez sur Appliquer : le résultat est immédiatement visible dans la fenêtre de prévisualisation.
Exemple: Personnalisation des styles d'un groupe dans un portail d'accès
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.
Par exemple, ci-dessous, nous modifions les styles des tuiles du groupe Outils en ajoutant le CSS additionnel suivant :
#dd-tiles-menu-content-slider_Outils .dd-tile
{
background-color: #D5DFF0;
}
#dd-tiles-menu-content-slider_Outils .dd-tile-text
{
color: #000;
font-weight : bold;
}
Gérer les thèmes
Éditer un thème
Pour éditer un thème existant:
- Sélectionnez le thème de votre choix dans la liste déroulante Thème courant et modifiez-le comme souhaité.
Dupliquer un thème
Pour dupliquer un thème existant:
- Sélectionnez le thème de votre choix dans la liste déroulante Thème courant.
- Cliquez sur le bouton Dupliquer
puis nommez-le comme souhaité.
Supprimer un thème
Pour supprimer un thème :
- Sélectionnez le thème de votre choix dans la liste déroulante Thème courant.
- Cliquez sur le bouton Supprimer
.