When it comes to deploying an IoT application to end-users, a big portion of the user reception and adoption of the solution is related to the look and feel of whatever they're using, if it's catchy and nice to the eye, this undoubtedly helps changing the perspective and makes the on-boarding easier.

For that reason, besides Ubidots' basic customization options at the App branding level, there's an advanced editor for dashboards and widgets providing additional options to change their aspect even further.

The advanced customization feature is a JSON-based editor where users can input element-defined keys to set parameters for the look and feel of each of the available elements. Here's an example of how it looks at the dashboard level:

IMPORTANT NOTES:

– This feature will override any customization set at the App level.

Requirements

Active Ubidots account.

1. Custom style from Dashboards

The elements available to customize on a dashboard are:

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

ContextBar

You can also customize your context bar, this is where the dashboard title, date time picker and device dropdown selector –if dynamic dashboard– are located.

Property	Accepted values	Behavior
`title`	JSON with the properties (`fontSize`, `fontFamily` and `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.	Puts shadows on elements
`borderRadius`	Numeric value.	Gives any element “rounded corners”
`fontFamily`	- Family name. - Generic family name.	Defines the font that is applied to the selected element
`backgroundColor`	- Named colors. - Hex colors. - RGB and RGBa colors. - HSL and HSLa colors.	Sets the color of text and text decorations.
`color`	Applies solid colors as background on an element.

Following the below steps you'll be able to customize the appearance, to further extend, of the below dashboard and widget elements:

Step 1: Open the Dashboard Drawer.
Step 2: Open the settings by clicking the sprocket option on the right side.
Step 3: Click on the "Custom Style" option, located in the Appearance section.
Step 4: Input the JSON-based file in the editor to indicate the desired customization.
Example: Note that every text different from a number needs to be wrapped up in double quotes as a string.

{
    "widget": {
        "color": "#5e5e5e",
        "header": {
            "color": "#ffffff",
            "backgroundColor": "#202d4d",
            "borderRadius": 0
        },
        "fontSize": 14,
        "fontFamily": "Helvetica",
        "boxShadow": "3px 3px 5px 6px #cccccc",
        "fontWeight": "normal",
        "borderRadius": 7,
        "borderStyle": "solid", 
        "borderColor": "#5e5e5e",
        "borderWidth": 1,
        "backgroundColor": "#ffffff"
    },
    "dashboard": {
        "color": "#5e5e5e",
        "backgroundColor": "#f2f2f2"
    },
    "contextBar": {
        "color": "#ffffff",
        "title": {
            "fontSize": 30,
            "fontFamily": "Helvetica",
            "fontWeight": "bold"
        },
        "fontSize": 14,
        "fontFamily": "Helvetica",
        "boxShadow": "3px 3px 5px 6px #ccc",
        "borderRadius": "0px 0px 7px 7px",
        "backgroundColor": "#192c54"
    }
}

Step 5: Click on the "Accept" button.
Step 6: Click the green check-mark button in the dashboard settings.

IMPORTANT NOTES:

Applying a Custom Style will override any App level styling.
Applying a Custom Style for widgets at the dashboard level will cause all widgets to change equally.
To learn more about boxShadow, borderRadius, borderStyle, borderWidth and borderColor, please refer to the respective hyperlink.
By default, the unit for the numerical key is px. If other is to be used, it needs to be specified.
Examples: "fontSize": "1.5rem" – "fontSize": "1.5em" – "fontSize": "70%"

2. Custom style from Widgets

Similarly to the customization at the Dashboard level, widgets also allow individual look and feel options and just as in that case, applying a styling to a widget will not only override the settings given by the App's style but also any "Custom Style" set at the dashboard level.

Here the case is the same, the elements available to customize are:

Property	Accepted values	Behavior
`color`	- Named colors. - Hex colors. - RGB and RGBa colors. - HSL and HSLa colors.	Sets the text's color
`backgroundColor`	Applies solid colors as background on an element.
`borderColor`	Sets the color of an element's four borders
`borderRadius`	Numeric value.	Give any element rounded corners
`borderStyle`	- Solid. - None. - Hidden. - Dashed. - Dotted. - Double. - Groove. - Ridge. - Inset. - Outset.	Specifies the type of line drawn around the element
`borderWidth`	- Numeric value: px, em, rem, vh and vw units. - Thin: The equivalent of 1px. - Medium: The equivalent of 3px. - Thick: The equivalent of 5px.	Specifies the thickness of the border.
`header`	JSON with the properties (`color`, `backgroundColor`, `fontweight`, `boxShadow` and `borderRadius`).	Specifies the properties of the selected header
`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
`fontFamily`	- Family name. - Generic family name.	Defines the font that is applied to the selected element
`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.	Puts shadows on elements
`fontWeight`	- Keyword value: normal, bold, bolder, lighter. - Predefined numeric value: 100, 200, 300, 400, 500, 600, 700, 800, 900	Sets the weight, or thickness, of a font

Step 1: Open the widget settings by clicking the three top-right dots and then "Edit".
Step 2: Click on the "Custom Style" option, located in the Appearance section.
Step 3: Input the JSON-based file in the editor to indicate the desired customization.
Example:

{
    "color": "#5e5e5e",
    "header": {
        "color": "#ffffff",
        "backgroundColor": "#F47373",
        "borderRadius": 7,
        "fontWeight": "bold",
        "boxShadow": "3px 3px 5px 6px #cccccc"
    },
    "fontSize": 15,
    "fontFamily": "Helvetica",
    "boxShadow": "3px 3px 5px 6px #cccccc",
    "fontWeight": "bold",
    "borderRadius": 7,
    "borderStyle": "solid", 
    "borderColor": "#FFC4E1",
    "borderWidth": 2,
    "backgroundColor": "#ffffff"
}

Step 4: Click on the "Accept" button.
Step 5: Click the green check-mark button in the dashboard settings.

Add a linear gradient overlay to a background image

You can add a color gradient or a semi transparent color on top of a background image in Widgets and Dashboards by using the key background in the custom style, where the first parameter is linear-gradient(), and the second one is the image's URL. Learn more here.


{
    "color": "#5e5e5e",
    "header": {
        "color": "#5e5e5e",
        "backgroundColor": "#ffffff"
    },
    "fontSize": 14,
    "background": "linear-gradient(to right, transparent, mistyrose), url(<IMAGE_URL>)",
    "borderRadius": 20,
    "backgroundColor": "#ffffff"
}

The HTML canvas widget allows users to create their own widgets in order to fit visualization needs that are not necessarily available within Ubidots default widget palette.
In this section, you'll learn to change this widget's header styling in a dynamic fashion right from the JavaScript code.

Step 1: Create a HTML canvas widget.
Step 2: Open the HTML editor.
Step 3: Paste the below code in the corresponding tab
HTML

<button id="color">Click here to change header styling</button>

JavaScript

const button = document.querySelector("#color");
button.addEventListener("click", () => {
    const event = new CustomEvent("widget_changeHeaderColor", {
        detail:{
            "backgroundColor": "#00bcd4",
            "borderRadius": 7,
            "color": "#ffffff",
            "boxShadow": "3px 3px 5px 6px #cccccc",
            "fontWeight": "bold"
        }
    });
    document.dispatchEvent(event);
});

Step 4: Click on the green check-mark button
Step 5: Click the green check-mark button in the dashboard settings.

Other users also found helpful...

Create a Ring Gauge Widget

Create a Heatmap Table Widget

Create a Text Widget

Application Branding: add background images to your dashboards and widgets