Ubidots Developer Guides
Help CenterAPI ReferenceData APICommunity
  • Welcome to our Dev Guides
  • ⚡️ Getting Started
    • What is Ubidots?
    • Devices, Variables, and Dots
    • Technical FAQs
    • Business FAQs
  • 🧩Integration Guides
    • Industrial IoT
      • Advantech
      • Amplified Engineering
      • AWS
      • Azimut
      • Balena
      • Bivocom
      • CESVA
      • Controllino
      • Digital Communications Technologies (DCT)
      • Everactive
      • Golioth
      • Kepware
      • Kunbus
      • Monnit
      • MultiTech
      • NCD.io
      • Node-RED
      • Omicron IoT
      • Red Lion
      • Robustel
      • Senquip
      • Sielco
      • Siemens
      • Strega
      • vNode
      • WAGO
      • Weintek
      • YuDash
    • Cellular
      • Blues Wireless
      • Digi International
      • Hologram
      • Monogoto
      • Particle
      • Quectel
      • Soracom
    • LoRaWAN
      • AonChip
      • Chirpstack
      • Decentlab
      • Helium
      • ioThings
      • LORIOT
      • Milesight
      • MOKOSmart
      • RAKwireless
      • Sagemcom
      • Seeed Studio
      • Senet
      • The Things Industries
        • The Things Stack
        • The Things Network
    • Sigfox
      • Digital Matter
      • McThings
      • Sigfox
      • Suntech
      • Thinxtra
      • UnaBiz
    • Satellite
      • Swarm
    • Dev Kits
      • Adafruit
      • Advantech
      • AloriumTech
      • Arduino
      • Blues Wireless
      • DFRobot
      • Dragino
      • Electric Imp
      • Espressif Systems
      • McThings
      • Microchip Technology
      • Onion
      • Particle
      • Pycom
      • RAKwireless
      • Raspberry Pi
      • Seeed Studio
      • Sodaq
      • STMicroelectronics
      • Texas Instruments
      • Thinxtra
      • Verse Technology
    • Weather
      • Weather Plugins
      • Ambient Weather
    • Tools
      • Gambit Communications
      • PubNub
  • 📊Dashboards & Widgets
    • HTML Canvas
      • 3rd party packages
      • Preload Dashboard data
      • Built-in library
        • Properties
        • Methods
        • Listening events
        • API
      • Examples
        • Basics
        • Create an LCD screen with the HTML Canvas
        • Interacting with dashboard data
        • Change header's custom style
        • Adding real time using Socket.IO
        • Delete Variable data from a Device
        • Delete Variable data from Groups or Types of Devices
        • Navigation through Dashboard
        • Using a React library
      • Code editor
        • HTML Tab
        • CSS Tab
        • JavaScript Tab
    • Custom UI
      • Paragraph
      • Input combo
        • Text
        • Numeric
        • Numeric with buttons
        • Date
        • Time
        • Toggle
        • Dropdown
        • Multiple selection dropdown
      • Button
    • Custom Style
      • Dashboards
      • Widgets
    • Line chart
    • Pages
      • Getting started
      • Development
      • API
        • Page creation
        • Publish
  • 🤖UbiFunctions
    • Getting Started
      • Creating an UbiFunction
      • Coding an UbiFunction
      • Testing an UbiFunction
      • Authentication
      • Execution Time
      • Logs
    • Runtimes
      • Python
      • NodeJS
      • Custom Runtimes
    • Invocation
      • Time-based Trigger
      • HTTPS
      • MQTT Publish
      • Ubidots Event
    • Advanced
      • Account Token
      • Execution time
      • Raw Functions
      • CORS Policy
      • Async Execution
      • DaaS (Decoder as a Service)
      • Developing and Managing UbiFunctions with Ubidots CLI
    • Examples
    • Specs and Limits
    • Storage
      • File Storage API
      • Mutiple files
  • 🧩Plugins
    • What is a plugin?
    • Public vs. Private
    • Public plugins
      • Cron
      • Webhook
    • Private Plugins
      • Cron
      • Webhook
      • Widget
      • Device
    • Plugins development
      • Getting started
      • Cron
      • Webhook
      • Widget
      • Device
      • view.xml
      • view_widget.xml
    • Plugins deployment
      • Cron and Webhook
      • Widget
      • Device
    • Using the plugins
      • Cron and Webhook
      • Widget
      • Device
  • 📈SYNTHETIC VARIABLES
    • Getting started
      • Creating synthetic variables
      • Synthetic Variables' editor
    • Expressions
      • Mathematical
      • Date range
      • Rolling
      • Special functions
    • Specs and limits
    • Examples
      • Mathematical
      • Date range
      • Rolling
      • Special functions
  • ⌨️Developer tools
    • Javascript SDK
      • Overview
      • Getting started
      • Ubidots class
        • Get methods
        • Filter methods
        • Ubidots objects
          • Entity object
          • Paginator
      • Examples
    • CLI
      • Overview
      • Installing
      • Usage
      • SDK for UbiFunctions
  • 🏗️Apps
    • App builder
      • Custom sidebar
Powered by GitBook
On this page
  • Examples.
  • Example 1: Set a Widget's header Custom Style
  • Example 2: Set a Widget's Body Custom Style
  • Example 3: Using linear gradient background

Was this helpful?

Export as PDF
  1. Dashboards & Widgets
  2. Custom Style

Widgets

The following is the Widget's Custom Style editor. From here, you can:

  1. Set Custom Style for the Widget.

Property
Accepted values
Behavior

color

  • Named colors.

  • Hex colors.

  • RGB, RGBa

  • HSL, HSLa

Sets the text's color

backgroundColor

Any color

Applies solid colors as background on an element.

background

sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

borderColor

  • Any color

  • inherit

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 values: 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

A JSON containing the following properties along with valid values for each one:

  • color

  • backgroundColor

  • fontWeight

  • boxShadow

  • borderRadius

  • borderStyle

  • borderWidth

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

  • Keywords: normal, bold, bolder, lighter.

  • Predefined numeric value: 100, 200, 300, 400, 500, 600, 700, 800, 900

Sets the weight, or thickness, of a font

  • Any Accepted Values different than numbers, needs to be wrapped up in double quotes as a String.

  • Setting any of these properties will override the value inherited from the Dashboard

  • Setting any of these properties will render it unable to modify its Custom Style at the Dashboard level

Examples.

Example 1: Set a Widget's header Custom Style

Let's give a metric widget a Custom Style that modifies the following:

  • Rounded corners with a border radius of 10

  • Outset border style

  • A blue-ish background color

  • Font color as white

  • Border width to 1

The following is the JSON for such Custom Style:

{
    "color": "#FFFFFF",
    "header": {
        "color": "#FFFFFF",
        "backgroundColor": "#165a72",
        "borderStyle": "dotted"
    },
    "fontSize": 14,
    "borderRadius": 15,
    "backgroundColor": "#000000"
}

In order to apply the dotted border to the whole widget, you can change the line "borderStyle": "dotted" from the "header" section and put it in the root, however, it is mandatory to the borderWidth property in order for it to be displayed correctly:

{
    "color": "#FFFFFF",
    "header": {
        "color": "#FFFFFF",
        "backgroundColor": "#165a72"
    },
    "fontSize": 14,
    "borderColor": "white",
    "borderStyle": "dotted",
    "borderRadius": 15,
    "borderWidth": 5,
    "backgroundColor": "#000000"
}

This is the Widget with no Custom Style applied yet:

The following is the same Widget after applying the Custom Style above:

Example 2: Set a Widget's Body Custom Style

Let's modify the Widget's body for the metric widget above. The following properties will be set:

  • Black font color

  • Font size to 20

  • Border radius to 10

  • Background color to #38b01e

  • Box shadow to 60px -16px teal

The following is the JSON representing the custom style above:

{
    "color": "black",
    "header": {
        "color": "white",
        "borderStyle": "outset",
        "borderWidth": 1,
        "borderRadius": 10,
        "backgroundColor": "#10435b"
    },
    "fontSize": 20,
    "borderRadius": 10,
    "backgroundColor": "#38b01e",
    "boxShadow": "30px -8px teal"
}

After applying the Custom Style above the Widget will look like:

Example 3: Using linear gradient background

Let's take again the previous metric Widget for this example. In this case, instead of setting a flat green background color, a linear gradient will be used.

Set the background property to linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c) as shown below:

The following is the resulting Widget:

The background property can also be used in the Widget's Header as shown below:

{
    "color": "black",
    "header": {
        "color": "white",
        "borderStyle": "outset",
        "borderWidth": 1,
        "borderRadius": 10,
        "background": "linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%)"
    },
    "fontSize": 20,
    "borderRadius": 20,
    "background": "linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)",
    "boxShadow": "30px -8px teal"
}

PreviousDashboardsNextLine chart

Last updated 1 year ago

Was this helpful?

📊