Styling widgets: colours, labels, fonts and element layout
Most widgets share the same appearance settings in the Widget tab. Set them once on one widget, then duplicate it to keep a page consistent.
Widget properties
| Setting | Options | Notes |
|---|---|---|
| Widget name | Free text | The label text shown on the widget |
| Column span / Row span | Whole cells | Same as dragging the resize handles |
| Background colour | Theme token or Custom... | Off / resting colour |
| On or Active state colour | Theme token or Custom... | Shown when the widget is on, pressed or active |
| Border radius | 0 to 100, in steps of 10 | 0 = square corners; higher = rounder |
| Background opacity | 0 to 100% | Lower it to let a page background show through |
| Button image | Choose image | Uses an image as the widget's background |
Theme colour tokens
Colour fields offer nine tokens from the current theme plus Custom...:
| Token | Typical use |
|---|---|
| Button Colour | Default widget background |
| Alt Button Colour | Secondary widgets, inactive slider levels |
| Button Pressed Colour | Pressed / on state |
| Background Colour | Page background |
| Menu Colour | Menu bar |
| Label Colour | Text and icons |
| Error, Warning, Success | Status colours, for example an all-off or alarm button |
Stick to tokens where you can. Changing the theme later recolours every widget that uses a token; a Custom... colour stays fixed.
Label
Show label turns the text on or off.
Text colour: a theme token or custom colour.
Font family: Roboto, Ubuntu, Arial, Helvetica, Verdana, Trebuchet MS, Inter, Calibri, Aptos or Roboto Condensed.
Font style: B (bold) and I (italic).
To make every label on a page the same size or font, use Widget consistency on the Page tab (see Pages and grid settings).
Element layout
Inside each widget, the icon, label and value are separate elements you can move and resize.
Select the widget and click Edit Layout under Element layout.
In the Edit element layout window, drag an element to move it and drag its corners to resize it.
Use the alignment buttons to align the selected element left, centre or right, and top, middle or bottom. Set its text Size, or leave it on Auto.
Use the Icon and Label switches to hide or show each element.
Press Esc or click Done Editing in the panel to finish. Reset returns the elements to the default layout.
Tips
Keep one corner radius per page (for example 20 on everything) for a tidy look.
Check On / Active colours in Preview: the label switches to the theme's background colour on the active state, so make sure the two contrast.
Icons have their own settings; see Icons: library, custom uploads, glow and backgrounds.
