Status-Widgets
status.activelist status.badge status.collapse status.customstyle status.log status.message status.notify status.toaststatus.customstyle
Apply CSS class to an element depending on a trigger item.
Parameters
{{ status.customstyle(id, item_trigger, value, action) }}
id
id or array of ids of the elements to style. Widgets are identified by the plain id while html elements require the format {pagename}-{idname}, e.g. id="mypage-myid" (mandatory)
item_trigger
an item which triggers the styling
value
the values on which the target will be styled. Compare operators are supported, e.g. "<20" (optional, default 0)
action
custom CSS class used for styling (optional, default = blink)
Examples
You may use this widget to apply your own CSS styles to widgets and html elements depending of an items value. If you wish to style a widget give it a unique id and use the same id as parameter in the customstyle widget. Both - the target widget and the customstyle widget - will concatenate the id with the page id. For html elements you need to do this by yourself: use the format {pagename}-{idname} to make the ids match.Add your custom styles to visu.css in the configured pages folder.
<style>
.mystyle {border: dashed red;}
</style>
{{ status.customstyle('w1', 'bath.light.value', '20', 'mystyle') }}
<div id = "{{page}}-w1">
...
</div>
Every simple html element can be styled - here we draw a red dashed border 
...
...
{{ status.customstyle(['w2', 'w3'], 'bath.light.value2', ['<=20','100','>230'], 'blink') }}
<div class="block">
<div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div id="{{page}}-w2" data-role="collapsible" data-collapsed="false">
<h3>Block</h3>
<p>Content</p>
</div>
</div>
</div>
<div class="block">
<div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h3>Block</h3>
{{ icon.battery('w3', '', 'bath.light.value2') }}
</div>
</div>
</div>
Block
Content