Personnalisation du thème du tableau de bord

Last modified by Aurelie Bertrand on 2025/09/04 15:55

Lors de la première installation de Digdash, le thème digash_2024 est défini par défaut comme thème serveur et utilisé pour l'affichage des tableaux de bord.

Il est possible de personnaliser simplement le thème utilisé pour vos tableaux de bord. En effet, vous pouvez utiliser un modèle fourni par DigDash (digdash_2019 ou digdash_2024) comme base de votre thème et le modifier à souhait.

La personnalisation du thème complet nécessite plusieurs paramétrages.
Il est recommandé de commencer par créer le thème dans l'éditeur de tableaux de bord. Vous pouvez ensuite modifier les styles des graphiques dans le Studio.
Enfin, vous pouvez définir le nouveau thème comme thème serveur si vous souhaitez le propager à l'ensemble des éléments du tableau de bord pour tous les utilisateurs. 

Créer le thème dans l'Éditeur de tableaux de bord

L'Éditeur de thèmes permet de créer simplement un nouveau thème via une interface intuitive tout en proposant un éditeur CSS pour les besoins de personnalisation plus avancée.

Consultez la page Éditeur de thèmes pour plus de détails.

Définir les styles des graphiques dans le Studio

Le thème dans le Studio permet de modifier les styles des graphiques. Pour cela, vous pouvez soit :

  • utiliser l'assistant de création de thème : il permet de modifier simplement le thème via une interface. Consultez la page Assistant d'édition de thème pour plus de détails.
  • importer un thème à utiliser comme modèle et modifier les constantes.

❗Il est recommandé d'utiliser le même nom de thème que dans l'éditeur. Cela sera nécessaire si vous souhaitez ensuite définir le thème comme thème serveur.

Importer un thème

Pour utiliser un thème existant:

  1. Lors de la configuration des flux (graphiques), allez dans l'onglet Thèmes. Par défaut, c'est le thème serveur qui est sélectionné s'il y en a un de défini. 
  2. Cliquez sur le bouton + à droite de la liste des thèmes pour afficher l'interface avancée.
  3. Cliquez sur le bouton + puis Ajouter pour créer un nouveau thème.
    Nouveau thème
    ➡ Une boite Nouveau s'affiche.
  4. Entrez le Nom du thème : le même que celui du thème éditeur.
  5. Dans la liste déroulante Rôle,  sélectionnez un rôle auquel restreindre le thème ou Aucun pour partager le thème à tous les rôles puis cliquez sur OK.
    💡 Choisissez Aucun si vous souhaitez utiliser le thème comme thème serveur.
    ➡ Le thème est ajouté à la liste.
  6. Sélectionnez-le et cliquez sur le bouton Edit_button.png pour l'éditer.

  7. Le nouveau thème est vide par défaut. Il faut spécifier le thème Digdash à utiliser comme modèle. Pour cela, ajoutez la ligne suivante en première ligne :

    @import url "<nom du template digdash>.css";

    dans laquelle <nom du template digdash> est à remplacer par le nom du thème que vous souhaitez utiliser comme base de style : digdash_2019 ou digdash_2024.

Vous pouvez alors renseigner les constantes que vous souhaitez modifier. Pour cela, ajoutez un bloc root après la ligne d'import sous la forme :

:root { --<nom de la constante 1 CSS>: <valeur de la constante 1 CSS> … --<nom de la constante N CSS>: <valeur de la constante N CSS> }

Note

Les constantes CSS doivent être définies dans le (seul et unique) bloc :root.
Les noms des constantes doivent commencer par -- par convention de nommage.

Les constantes disponibles sont les suivantes (avec valeurs d'exemple) :

:root { 
 --dd-font-family-fontFamily:Open Sans;
 --dd-font-weight-fontWeight:inherit;
 --dd-font-style-fontStyle:Normal;
 --dd-font-color-fontColor:#000000;
 --dd-axes-border-borderSize:0.3;
 --dd-axes-border-borderColor:#888888;
 --dd-tooltips-fontWeight:inherit;
 --dd-tooltips-fontStyle:normal;
 --dd-tooltips-fontColor:#888888;
 --dd-tooltips-backgroundColor:#ffffff;
 --dd-table-border-borderSize:0.5;
 --dd-table-border-borderColor:#888888;
 --dd-table-header-fontColor:#ffffff;
 --dd-table-header-backgroundColor:#00b0f0;
 --dd-table-header-fontWeight:bold;
 --dd-table-TD-fontColor:#000000;
 --dd-table-TD-backgroundColor:#ffffff;
}

Si ces variables ne sont pas suffisantes, vous pouvez chercher les classes css et les ajouter.

Paramétrer le thème serveur

💡L'utilisation d'un thème serveur permet une personnalisation "industrialisée" du tableau de bord avec les mêmes paramètres pour tous les utilisateurs et tous les graphiques.
Il est également possible de définir un thème au niveau utilisateur (consultez la page Gérer les utilisateurs) ou d'une page (consultez la paragraphe Modifier les paramètres d'une page). 
À noter que le thème défini au niveau de la page prévaut sur le thème au niveau utilisateur qui prévaut lui-même sur le thème serveur.

Il est alors possible de définir le thème créé dans l'Éditeur de tableaux de bord comme thème serveur afin de le propager à tous les éléments du tableau de bord et tous les utilisateurs. Pour cela :

  1. Depuis la page d'accueil, allez dans Configuration -> Paramètres Serveurs -> Paramètres supplémentaires -> Divers.
  2. Dans la liste déroulante Thème, sélectionnez le thème créé.
    Les thèmes disponibles sont ceux livrés par Digdash ou créés dans l'Éditeur de tableaux de bord.
    Thème serveur
  3. Cliquez sur Enregistrer.