Variability of the DigDash theme

Last modified by Aurelie Bertrand on 2021/05/20 10:45

Context

Since the 2019R2 version, DigDash allows you to set into variable properties of the default theme by using a css file.

You don’t need to override the default theme by using another CSS file anymore.

Define CSS constants

:root
{
--<constant name 1 CSS>: <constant value 1 CSS>
--<constant name 2 CSS>: <constant value 2 CSS>
 …
--<constant name N CSS>: <constant value N CSS>
}

  • CSS constants must be defined in a single bloc :root
  • Constant names must begin with -- as naming convention
  • Constants must be named clearly and must be understandable

Example

DigDash delivers CSS constants with default values that you can set depending on what you need.

: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;

}

Defining in the styles Dashboard editor

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

@import url("/<dashboard app>/file?method=loadTheme&theme=<basic theme name>.css&--<constant name 1 CSS>=<constant value 1 CSS>&...&<constant name N CSS>=<constant value N CSS>");

:root
{
--<constant name 1 CSS>: <constant value 1 CSS>
 …
--<constant name N CSS>: <constant value N CSS>
}

The principle is to override CSS constant of the previous slide in the Dashboard  style editor.

The first import line is mandatory to ensure compatibility with Internet Explorer browser.

We will set in the import URL parameters the name of CSS theme and the list of CSS constants defined in the :root section.

The URL should mention the dashboard application name (by default digdash_dashboard).

Use in stylesheet

To use one of the constants previously defined, the constant need to be included in the function var :

.my-class{
  background-color:var(--background-color-select)
}

Example of stylesheet

In the style editor : 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;
}