# Dashboards

The following is the Dashboard Custom Style editor. From here, you can:

1. Set a Custom Style for the **Dashboard**.
2. Set a Custom Style for the **ContextBar**.
3. Set a Custom Style for all **Widgets** in the current **Dashboard** at once.

<figure><img src="/files/QUI0OCbwfBvCpOxzGczr" alt="" width="563"><figcaption></figcaption></figure>

### 1. Dashboard customization

Set the `dashboard` properties inside the `dashboard` key.

### Available properties:

<table><thead><tr><th width="260">Property</th><th width="240">Accepted values</th><th>Behavior</th></tr></thead><tbody><tr><td><code>color</code></td><td><ul><li>Named colors.</li><li>Hex colors.</li><li>RGB, RGBa</li><li>HSL, HSLa</li></ul></td><td>Sets the color of text and text decorations.</td></tr><tr><td><code>backgroundColor</code></td><td>Any <code>color</code></td><td>Applies solid colors as background on an element.</td></tr></tbody></table>

{% hint style="warning" %}

* Applying any styling to a **Dashboard** overrides the settings defined by the App style.
* Any accepted value other than a number must be wrapped in double quotes as a string.
* The **`ContextBar`** and **`Widget`** components in a **Dashboard** inherit the `color` property from it.
  {% endhint %}

### 2. ContextBar customization: <a href="#h_ba8fc29b1f" id="h_ba8fc29b1f"></a>

Set the `contextBar` properties inside the `contextBar` key.

### Available properties: <a href="#h_ba8fc29b1f" id="h_ba8fc29b1f"></a>

| Property                      | Accepted values                                                                                                                                                                                                                                                                                                                 | Behavior                                                 |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| <p><code>title</code><br></p> | <p>A JSON containing the following properties:</p><ul><li><code>fontSize</code></li><li><code>fontFamily</code></li><li><code>fontWeight</code></li></ul>                                                                                                                                                                       | Specifies the properties of the selected title.          |
| `fontSize`                    | <ul><li>Keywords: xx-small, x-small, small, medium, large, x-large, xx-large.</li><li>Length units: mm, cm, in, pt, pc, em, rem, px.</li><li>Percentages.</li></ul>                                                                                                                                                             | Specifies the size, or height, of the font               |
| `boxShadow`                   | <ul><li>Horizontal offset (required): positive or negative number</li><li>Vertical offset (required): positive or negative number</li><li>Blur radius (required): positive number</li><li>Spread radius (optional): positive or negative number</li><li>Color (required): named colors, hex, RGB, RGBA, HSL and HSLA.</li></ul> | Puts shadows on elements                                 |
| `borderRadius`                | Numeric value.                                                                                                                                                                                                                                                                                                                  | Gives any element “rounded corners”                      |
| `fontFamily`                  | <ul><li>Family name.</li><li>Generic family name.</li></ul>                                                                                                                                                                                                                                                                     | Defines the font that is applied to the selected element |
| `backgroundColor`             | Any `color`                                                                                                                                                                                                                                                                                                                     | Applies solid colors as background on an element.        |
| `color`                       | <ul><li>Named colors.</li><li>Hex colors.</li><li>RGB and RGBa colors.</li><li>HSL and HSLa colors.</li></ul>                                                                                                                                                                                                                   | Sets the color of text and text decorations.             |

{% hint style="warning" %}

* Setting the `color` property for the **contextBar** overrides the value inherited from the **Dashboard**.
* Any accepted value other than a number must be wrapped 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 sets the same Custom Style for all widgets in the Dashboard, overriding their individual settings.
* Modifying the Custom Style globally only affects Widgets whose default Custom Style has not been modified.
  {% endhint %}

## Dashboard Custom Style Examples

### **Example 1:** Set the `backgroundColor` property

The following examples show how to set the background color to `"black"` for a Dashboard in different ways:

* Named colors:<br>

  ```json
  {
      "dashboard":{
          "backgroundColor" : "black",
          "color": "#f2f2f2",
      },
  }
  ```
* Hex colors:<br>

  <pre class="language-json"><code class="lang-json"><strong>{
  </strong><strong>    "dashboard":{
  </strong><strong>        "backgroundColor" : "#000000",
  </strong>        "color": "#f2f2f2",
      },
  }
  </code></pre>
* RGB:<br>

  <pre class="language-json"><code class="lang-json"><strong>{
  </strong><strong>    "dashboard":{
  </strong><strong>        "backgroundColor" : "rgb(0,0,0)",
  </strong>        "color": "#f2f2f2",
      },
  }
  </code></pre>
* RGBA:<br>

  <pre class="language-json"><code class="lang-json"><strong>{
  </strong><strong>    "dashboard":{
  </strong><strong>        "backgroundColor" : "rgba(0,0,0,1)",
  </strong>        "color": "#f2f2f2",
      },
  }
  </code></pre>
* HSL:<br>

  <pre class="language-json"><code class="lang-json"><strong>{
  </strong><strong>    "dashboard":{
  </strong><strong>        "backgroundColor" : "hsl(0, 0%, 0%)",
  </strong>        "color": "#f2f2f2",
      },
  }

  </code></pre>
* HSLA:<br>

  <pre class="language-json"><code class="lang-json"><strong>{
  </strong><strong>    "dashboard":{
  </strong><strong>        "backgroundColor" : "hsl(0, 0%, 0%, 1)",
  </strong>        "color": "#f2f2f2",
      },
  }

  </code></pre>

The following is the Dashboard before applying the Custom Style:

<figure><img src="/files/gxKqCGNIkaHmwPj7SPUO" alt=""><figcaption></figcaption></figure>

The following is the Dashboard after applying the Custom Style:

<figure><img src="/files/XdJ796JeQA7COLkHwcYB" alt=""><figcaption></figcaption></figure>

### **Example 2:** Inherit the `color` property from the Dashboard to all Widgets in it

Let's take a Dashboard containing Widgets with no Custom Style set yet:

<figure><img src="/files/0GyolyQA16fUk94GfO5H" alt=""><figcaption></figcaption></figure>

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:

   <figure><img src="/files/N4UmHLmg1iinK66NP6iW" alt="" width="563"><figcaption></figcaption></figure>
2. Set the Dashboard `color` property to **red** and save the changes:

   <figure><img src="/files/0ipsPTdjtl9Rq6oprvfQ" alt="" width="563"><figcaption></figcaption></figure>
3. If you look at the Widgets inside the Dashboard, nothing seems to have changed. This happens because each Widget's individual settings override the `color` property. With that in mind, remove the `color` property from the Widget that you want to inherit this property from the Dashboard.

   <figure><img src="/files/UaMSAxDJSYecQvDQmYzS" alt=""><figcaption></figcaption></figure>

Once the Widget `color` property is deleted, it inherits that property from the Dashboard.

## ContextBar Custom Style examples

### **Example 1**: Change the **ContextBar** title font, size, color, and background color

The following is the default Custom Style for every **ContextBar**:

<figure><img src="/files/JKWbdktIEGw8AencSKdA" alt=""><figcaption></figcaption></figure>

Open the Dashboard Custom Style settings and set the following style for the **ContextBar** in the **Style Editor**. This changes the **ContextBar** background to white, changes the font color to black, and updates the font size:

```json
"contextBar": {
        "title": {
            "color": "#000000",
            "fontSize": 14
        },
        "fontSize": 24,
        "backgroundColor": "#ffffff",
        "color": "#000000",
    }
```

The following is the result:

<figure><img src="/files/vd02b9Gpsv4iJCXvsdBG" alt=""><figcaption></figcaption></figure>

## Widget Custom Style examples

### **Example 1:** Set a Custom Style for all Widgets in a Dashboard

By modifying the elements inside the `widget` key in the Dashboard Style Editor, you can apply the same style to all widgets on the Dashboard.<br>

Consider the following Dashboard with no Custom Style set yet:

<figure><img src="/files/954u1LyqsSAAcvQdYNcn" alt=""><figcaption></figcaption></figure>

Suppose you want to apply the following style to all widgets 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 the box shadow to `10px 5px 5px orange`
* Set the border color to `#5e5e5e`
* Set the border style to solid
* Set the border width to 5
* Set the border radius to 10
* Set the background color to black.<br>

The following JSON describes that 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"


```

To apply this style to all Widgets at once, go to the Dashboard Style Editor and paste it into the `widget` key. It will look like this:

```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 results in the following:

<figure><img src="/files/jidD5wnA0fdEOsi9G5tr" alt=""><figcaption></figcaption></figure>

All Widgets in the current Dashboard now share the same Custom Style.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.ubidots.com/dashboards-and-widgets/custom-style/dashboards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.