# Dashboards The following is the Dashboard's Custom Style editor. From here, you can: 1. Set Custom Styles for the **Dashboard**. 2. Set Custom Styles for the **ContextBar**. 3. Set Custom Styles for all of the **Widgets** in the current **Dashboard**, at once.

### 1. Dashboard customization Set the `dashboard` properties inside the `dashboard` key ### Available properties:

Property	Accepted values	Behavior
`color`	Named colors. Hex colors. RGB, RGBa HSL, HSLa	Sets the color of text and text decorations.
`backgroundColor`	Any `color`	Applies solid colors as background on an element.

{% hint style="warning" %} * Applying any styling to a **Dashboard** will override the settings given by the App's style. * Any properties' Accepted Values different than numbers, needs to be wrapped up in double quotes as a String. * The **`ContextBar`**and **`Widget`** components in a **Dashboard** inherit the`color` property from it. {% endhint %} ### 2. ContextBar customization: Set the `contextBar` properties inside the `contextBar` key ### Available properties: | Property | Accepted values | Behavior | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | |

title

A JSON containing the following properties:

fontSize
fontFamily
fontWeight

| Specifies the properties of the selected title. | | `fontSize` |

Keywords: xx-small, x-small, small, medium, large, x-large, xx-large.
Length units: mm, cm, in, pt, pc, em, rem, px.
Percentages.

| Specifies the size, or height, of the font | | `boxShadow` |

Horizontal offset (required): positive or negative number
Vertical offset (required): positive or negative number
Blur radius (required): positive number
Spread radius (optional): positive or negative number
Color (required): named colors, hex, RGB, RGBA, HSL and HSLA.

Family name.
Generic family name.

Named colors.
Hex colors.
RGB and RGBa colors.
HSL and HSLa colors.

| Sets the color of text and text decorations. | {% hint style="warning" %} * Setting the `color` property for the **contextBar** will override its inherited value from the **Dashboard** * Any properties' Accepted Values different than numbers, needs to be wrapped up in double quotes as a String. {% endhint %} ## 3. Widgets customization Set the `widgets` properties inside the `widgets` key. Go to the **Widgets** section to know what properties can be modified for Widgets. {% hint style="warning" %} * This will set the same Custom Style for all the widgets in the dashboard, thus, overriding their individual settings * Modifying the Custom Style globally will only have effect on the Widgets whose default Custom style hasn't been modified. {% endhint %} ## Dashboard Custom Style Examples ### **Example 1:** Set the `backgroundColor` property The following shows how to set background color to "black" for a Dashboard in different ways: * Named colors:
```json { "dashboard":{ "backgroundColor" : "black", "color": "#f2f2f2", }, } ``` * Hex colors:

{
      "dashboard":{
          "backgroundColor" : "#000000",
          "color": "#f2f2f2",
      },
  }

* RGB:

{
      "dashboard":{
          "backgroundColor" : "rgb(0,0,0)",
          "color": "#f2f2f2",
      },
  }

* RGBA:

{
      "dashboard":{
          "backgroundColor" : "rgba(0,0,0,1)",
          "color": "#f2f2f2",
      },
  }

* HSL:

{
      "dashboard":{
          "backgroundColor" : "hsl(0, 0%, 0%)",
          "color": "#f2f2f2",
      },
  }

* HSLA:

{
      "dashboard":{
          "backgroundColor" : "hsl(0, 0%, 0%, 1)",
          "color": "#f2f2f2",
      },
  }

The following is the Dashboard before applying the Custom Style:

Below is the Dashboard after applying the Custom Style:

### **Example 2:** Inherit the `color` property from Dashboards to all the Widgets in it Lets take a Dashboard containing Widgets with no Custom Style set yet:

Go to the dashboard Custom Style editor and do the following: 1. Delete the `color` property inside the `Widget` key in the Style Editor at the Dashboard level:

2. Set the Dashboard's `color` property to **red** and save the changes:

3. If you take a look at the Widgets inside the Dashboard, nothing seems to have changed. That is because each widget's individual settings are overriding the `color` property. With that in mind, remove the `color` property from the Widget that you want to inherit this property from the Dashboard.\

Note that, once the `color` property of the widget is deleted, it will inherit that property from the Dashboard. ## ContextBar Custom Styles examples ### **Example 1**: Change **ContextBar**'s tittle font and size, font size and color, and background color The following is the default Custom Style for every **ContextBar**:

Open the Dashboard Custom Style settings and set the following style for the **ContextBar** in the **Style Editor.** This will change the **ContextBar** background and font color to white and change the font size: ```json "contextBar": { "title": { "color": "#000000", "fontSize": 14 }, "fontSize": 24, "backgroundColor": "#ffffff", "color": "#000000", } ``` The following is the result:

## Widgets Custom Styles examples ### **Example 1:** Set a Custom Style for all the Widget in a Dashboard. By Modifying the elements inside the "widget" key in the Dashboard's Style Editor, you'll be able to apply said style to all the widgets simultaneously on the Dashboard.
Consider the following Dashboard with no Custom Style set yet:

Suppose that you want to apply the following style for all the widget in the current dashboard at once: * Set the header font color to white * Set header border color to black * Set the header border style to Dotted * Set the header border width to 1 * Set the header border radius to 10 * Set the header background color to black * Set the font size to 30 * Set box-shadow to `10px 5px 5px orange` * Set the border border color to `#5e5e5e` * Set the border style to solid * Set border width to 5 * Set border radius to 10 * Set background color to black.
The following is the JSON describing such Custom Style: ```json "header": { "color": "#FFFFFF", "borderColor": "#000000", "borderStyle": "dotted", "borderWidth": 1, "borderRadius": 10, "backgroundColor": "#000000" }, "fontSize": 30, "boxShadow": "10px 5px 5px orange", "borderColor": "#5e5e5e", "borderStyle": "solid", "borderWidth": 5, "borderRadius": 10, "backgroundColor": "#000000" ``` In order to apply this Style for all the Widget at once, go to the Dashboard's Style Editor and paste said style in the "widget" key. It will look something like: ```json { "widget": { "header": { "color": "#FFFFFF", "borderColor": "#000000", "borderStyle": "dotted", "borderWidth": 1, "borderRadius": 10, "backgroundColor": "#000000" }, "fontSize": 30, "boxShadow": "10px 5px 5px orange", "borderColor": "#5e5e5e", "borderStyle": "solid", "borderWidth": 5, "borderRadius": 10, "backgroundColor": "#000000" }, "dashboard": { "color": "#5e5e5e", "backgroundColor": "#f2f2f2" }, "contextBar": { "color": "#000000", "title": { "color": "#000000", "fontSize": 14 }, "fontSize": 24, "backgroundColor": "#ffffff" } } ``` Doing so will result in the following:

Note that all the Widgets in the current Dashboard got the same Custom Style.