[Pro][Dashboard] SmartDash - a dashboard for Homey

Developers
, , , ,
2

HOW TO CUSTOMIZE CSS:

NOTE: CSS are saved in local database, so there is a limit to the number of lines that depends on the OS.

Every line of custom css must include .content. Every line not correct are removed when saving.

The basic widget template is:

<div class="content">		
  <div class="box"></div>
  <div class="name"></div>
  <div class="update"></div>
  <div class="battery"></div>	
</div>

“box” is the main object, describe it is complicate, but it can contain:

<div class="value"></div> (it can contain a capability value)

or

<div class="state"></div> (it can contain an icon)

or 

<div class="range h"><input class="slider" type="range"></div> (slider of GenericLight,  GenericFan, LightRGB)

or

<div class="range v"><input class="slider" type="range"></div> (slider of BlindCurtain)

or

<ul class="list"><li></li>...</ul> (Timeline)

or

<div class="canvas"><canvas class="chart"></canvas></div> (Insight)

or

<div class="image"><img class="img" /></div> (VirtualCamera)

When widget has left and right elements the structure is

<div class="fl">some things</div><div class="fr">some things</div> (THSensor, SolarPanel)

A widget that changes state has “on” class or “active” class or “alarm” class
A very simple example is:

.content { color: #ffffff; background-color: red !important }
.on .content .state { color: #ffffff }

.content { color: #ffffff; background-color: magenta !important }
.active .content .state { color: #ffffff }

.content { color: #ffffff; background-color: green !important }
.alarm .content .state { color: #ffffff }

default widget on is:
Screenshot 2024-03-06 alle 11.12.20

with custom css is:
Screenshot 2024-03-06 alle 11.12.56

SOME USEFULL CSS

Disable shadow and remove rounded border in single widget

.content { box-shadow: none; border-radius: 0 }

Hide the dim slider in GenericLightWidget / GenericFanWidget and show it only if light/fan is on:

.content .range { display: none }
.on .content .range { display: block }

Interact with the iframe:

.content iframe { pointer-events: auto }

Customize date or time in ClockWidget

.content .date { display: none }
.content .time { color: #000000 }

Customize range slider dimension

.content .range { width: 300%; left: -100% }

Make a widget circle

.content { border-radius: 0; box-shadow: none; background-color: transparent }
.content .box { position: initial; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; background-color: lime }

HOW TO GROUP CSS BY WIDGET TYPE

Every widget has a type class:

clock, genericcapability, genericalert, genericsensor, genericsocket, genericlight, genericfan, genericthermostat, genericspeaker, presencesensor, thsensor, comfortsensor, smsensor, virtualcamera, iframe, insight, timeline, virtualbutton, powerwall, jsonvariable, weather, solarpanel, blindcurtain, separator, dummy

You can group CSS by widget type, have to work in the panel custom CSS:

 .dashboard .widget.clock .content { background: url("$image.jpg") no-repeat center center; background-size: cover }

LINKS TO SOME USEFULL CSS

MAKE ATTENTION:
Please don’t change width, height, display property of .content { }: it involves having glitch
If some CSS rules don’t work, add !important after property