Variabilisation du thème Digdash

Modifié par Aurelie Bertrand le 2021/05/20 10:45

Contexte

A partir de la version 2019R2, DigDash propose une personnalisation du thème plus simple à partir du thème de base (digdash_2019_template), via le principe de fichier CSS variabilisé.

Fini donc la surcharge du thème de base en passant par un autre fichier CSS dans un autre emplacement !

Définition des constantes CSS

:root
{
    --<nom de la constante 1 CSS>: <valeur de la constante 1 CSS>
   --<nom de la constante 2 CSS>: <valeur de la constante 2 CSS>

   --<nom de la constante N CSS>: <valeur de la constante N CSS>
}
  • 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 doivent être nommées de manière claire et compréhensive.

Exemple

DigDash livre des constantes CSS avec des valeurs par défaut personnalisables au besoin :

:root
{
--background-color-banner: #FFFFFF;
--background-color-page: #FFFFFF;
--background-color-portlet: transparent;
--background-color-popup: #FFFFFF;
--background-color-select: #11A0D9;
--background-color-item: #F4F4F4;
--background-color-label: #E2E2E2;
--color: #515151;
--color-select: #FFFFFF;
--border-color: #CDD1D3;
--logo-url: icons/digdash_2019/logo-dd-dark.svg;
--font-family: 'Open Sans', arial;
}

Définition dans l'Éditeur de styles du Dashboard

Dans l'éditeur de styles : <nom du thème de base>.css

@import url("/<dashboard app>/file?method=loadTheme&theme=<nom du thème de base>.css&--<nom constante 1 CSS>=<valeur constante 1 CSS>&...&--<nom constante N CSS>=<valeur constante N CSS>");
: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>
}

Le principe est de surcharger les constantes CSS du bloc d'exemple dans l’éditeur de styles de l’éditeur du Dashboard.

La première ligne d’import est obligatoire pour la prise en charge du navigateur Internet Explorer. 

On précisera dans les paramètres de l’URL d’import le nom du thème CSS de base ainsi que la liste des constantes CSS définies dans le bloc :root.

L’URL devra mentionner le nom de l’application dashboard (par défaut digdash_dashboard).

Utilisation dans une feuille de style

Si on souhaite utiliser une des constantes définies dans une feuille de style, il faut utiliser la fonction var : 

.ma-classe{
  background-color:var(--background-color-select)
}

Exemple de feuille de styles

Dans l'éditeur de styles : digdash_2019_template.css

@import url("/digdash_dashboard/file?method=loadTheme&theme=digdash_2019_template.css&--background-color-select=#FF00FF");

:root
{
    --background-color-select: #FF00FF;
}