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"
}
​

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

Last modified 1mo ago