Skip to content

Tile style

A tile style says how a tile looks. Every property is optional. Where a tile leaves one out, the dashboard’s tileStyle gives it; where that leaves it out too, the default below.

A tile style is written in these places:

  • a dashboard’s tileStyle: every tile’s style;
  • a tile’s or a group’s style: over the dashboard’s;
  • a value tile’s style rules (styleRules[].style): over the tile’s own, while the rule holds;
  • a tile style to pick (tileStyles[].style in a dashboard, and style files).

Sizes are in pixels. A colour may be none where its type says so: no background, border or icon background at all.

Field Type Default What
background colour or none #151515 Background.
padding number, at least 0 5 Padding. Room inside the tile, in pixels.
radius number, at least 0 4 Corner radius. In pixels.
border colour or none none Border.
borderWidth number, at least 0 2 Border width. In pixels.
title colour #ffffe0 Title. The title and its icon.
titleHeight number, at least 0 26 Title height. In pixels.
titleBackground colour or none none Title background. Out to the edges of the tile.
titleUppercase true or false true Title in capitals.
titleAlign one of left, center (Centre), right center Title alignment. Across its row.
text colour the tile type’s own Text. Where the tile has no colour of its own for it.
gaugeStyle one of ticks, arc, marker, needle, half, ring, rings, blocks, glow, bar, cells, thermometer, tank, bullet, dots, minimal ticks Gauge style. How a gauge or dial is drawn.
valueAlign one of left, center (Centre), right center Value alignment. A value tile’s number and its unit; a gauge stays in the middle.
captionSize number, 10 to 400 60 Caption size. In percent of the title height.
captionColor colour #808080 Caption colour.
captionAlign one of left, center (Centre), right the value’s Caption alignment. As the value when left out.
iconPosition one of top-left, top-center (Top middle), top-right, bottom-left, bottom-center (Bottom middle), bottom-right top-right Icon position. A corner, or the middle of the top or bottom edge; over the title and the content.
iconSize number, at least 0 30 Icon size. In pixels; with a background, the size of the background.
iconColor colour the title’s Icon colour. The title’s when left out.
iconBackground colour or none none Icon background.
iconRadius number, at least 0 0 Icon corner radius. Of its background, in pixels; half the icon size makes a circle.
iconMargin number, at least 0 0 Icon margin. Room between it and the tile’s edges, beyond the padding, in pixels.
showBackground true or false true Background, border and shadow. Off: none of them, whatever they are set to; for a tile laid over others.
shadow true or false false Shadow.
shadowColor colour #30000000 Shadow colour. With its opacity: #aarrggbb.
shadowX number 0 Shadow across. In pixels; below 0 to the left.
shadowY number 0 Shadow down. In pixels; below 0 upwards.
shadowBlur number, at least 0 2 Shadow blur. In pixels.

The background, the border and the shadow are not drawn when showBackground is false, whatever they are set to.