All Collections
User Guides
Application Branding: Custom styles for your dashboards and widgets
Application Branding: Custom styles for your dashboards and widgets

Learn how to customize your dashboards and widgets beyond the available options at the App's branding level.

David Sepúlveda avatar
Written by David Sepúlveda
Updated over a week ago

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

Table of Contents

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:

  1. Applying a Custom Style will override any App level styling.

  2. Applying a Custom Style for widgets at the dashboard level will cause all widgets to change equally.

  3. To learn more about boxShadow, borderRadius, borderStyle, borderWidth and borderColor, please refer to the respective hyperlink.

  4. 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"
}

3. Custom style: HTML canvas widget

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



Did this answer your question?