# Custom Style

## **Introduction**

When deploying an IoT application to end users, a large part of user perception and adoption depends on its look and feel. If the interface is visually appealing, it can improve perception and make onboarding easier.

For that reason, in addition to Ubidots' basic customization options at the App branding level, there is an advanced editor for Dashboards and Widgets that provides more ways to customize their appearance.

## Definition

Custom Style is an editor available for all Dashboards and Widgets that lets you modify their style.

The editor expects a JSON object with root-level keys for each component (`Widget`, `Dashboard`, and `ContextBar`). Inside each key, define the properties you want to modify.

The following is an example of the default Custom Style JSON for a recently created dashboard:

```json
{
    "widget": {
        "color": "#5e5e5e",
        "header": {
            "color": "#5e5e5e",
            "borderColor": "inherit",
            "borderStyle": "none",
            "borderWidth": 0,
            "backgroundColor": "#ffffff"
        },
        "fontSize": 14,
        "borderColor": "inherit",
        "borderStyle": "none",
        "borderWidth": 0,
        "borderRadius": 0,
        "backgroundColor": "#ffffff"
    },
    "dashboard": {
        "color": "#5e5e5e",
        "backgroundColor": "#f2f2f2"
    },
    "contextBar": {
        "color": "#ffffff",
        "title": {
            "fontSize": 24
        },
        "fontSize": 14,
        "backgroundColor": "#192c54"
    }
}
```

## When to use Custom Styles?

Use Custom Styles whenever you need to customize a Widget or Dashboard beyond the default style.

## Which elements can be customized?

* Dashboards, along with their ContextBar
* All the Widgets in a dashboard at once
* Widgets, individually

## How to set Custom Style on Dashboards?

Custom Style is available in the Dashboard **Appearance** tab, as shown below. When you click it, a text editor appears where you can enter valid JSON to create a custom style.

{% hint style="warning" %}
The Dashboard custom style overrides any customization set at the [app level](https://help.ubidots.com/en/articles/830962-application-branding-how-to-customize-your-ubidots-user-interface).
{% endhint %}

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

## How to set Custom Style on all the Widgets in a dashboard, at once?

At the dashboard customization level, place the JSON for the Custom Style you want to apply to all Widgets inside the `widget` key.

<figure><img src="/files/3eRSbvko2e1uUaiWtUiR" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
This overrides every Widget's individual Custom Style.
{% endhint %}

## How to set Custom Style on Widgets individually?

On the Widget's **Appearance** tab, there is an option labeled **Custom Style**. When you click it, a text editor appears where you can enter valid JSON to create a custom style.

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

{% hint style="warning" %}

* The current Custom Style only applies to this Widget.
* Setting a Widget Custom Style after setting it globally at the Dashboard level overrides the global settings.
  {% endhint %}


---

# 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.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.