# \[Pro\]\[Dashboard\] SmartDash - a dashboard for Homey \[CLOSED\]

**URL:** <https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385>\
**Category:** Apps\
**Tags:** flow, dashboard, ios, homey-pro, android\
**Created:** [June 27, 2023, 8:41pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385 "2023-06-27T20:41:13Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\
**Post date:** [June 27, 2023, 8:41pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/2 "2023-06-27T20:41:31Z")

</div>

**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:

```auto
<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:

```auto
<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:

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

```

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

```

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

```

> default widget on is:  
> ![Screenshot 2024-03-06 alle 11.12.20](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/7/17af770f39d7cf89b8cf8b0104c1be59b755cb47.png)

> with custom css is:  
> ![Screenshot 2024-03-06 alle 11.12.56](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/4/c46cab26ebb72d07dfb308e48fd0d6622bbdd919.png)

> **SOME USEFULL CSS**

> Disable shadow and remove rounded border in single widget

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

```

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

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

```

> Interact with the iframe:

```auto
.content iframe { pointer-events: auto }

```

> Customize date or time in ClockWidget

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

```

> Customize range slider dimension

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

```

> Make a widget circle

```auto
.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:

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

```

> **LINKS TO SOME USEFULL CSS**
> 
> - [Change the css of a widget when another widget changes state (Valid only for next widget)](https://community.homey.app/t/pro-dashboard-android-ios-smartdash-a-dashboard-for-homey/83385/825)
> - [Complex layout](https://community.homey.app/t/pro-dashboard-android-ios-smartdash-a-dashboard-for-homey/83385/759)

> **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

---

_[View the full topic](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385)._