Variability of the DigDash theme
- Context
- Define CSS constants
- Example
- Defining in the styles Dashboard editor
- Use in stylesheet
- Example of stylesheet
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 :
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;
}