Show Off Your Dashboards!

Hey @spelcheck,

It would be nice if you could include a 2 level hierarchy of zones and rooms (see screenshot below). Not sure whether smartly or something similar would be the most appropriate spot to capture this setup, perhaps some kind of helper app may be more appropriate...?

I think @TechMedX may have setup a seperate thread for this request, I might try and post more of my notes, etc, there, rather than clogging up this thread.


Many thanks - just signed up on his website - waiting for Authorisation :slight_smile:

This is my first post anywhere so please bear with my lack of knowledge especially on how to make references.

I finally decided to take a shot at trying to do a custom dashboard.

I lived with one of those basic ones for more than a year but no matter how much I tweaked it, always felt cumbersome and outdated.
I took inspiration from the floor pan dashboards most people do in Home Assistant, but I may not have the skills nor did I wanted to go to another hub / system. I also like what people d with smartly.

I Finally decided to take some time and put my hands and brain to use and ended up with these dashboards.
I am surprised with the outcome as I am not a programmer and have limited skills with css /json.
I tried smartly but struggled with the grid spacing between dashboard links and the rest and since I was mostly after “transparent” tiles , I stayed with the basic Hubitat setup and did some CSS lines.

This is the “before” dashboard set up.

And these are the new ones.

For those curious on how to do this:
The key elements:

  • I did my layouts in Autocad as I am familiar with it, but the can even be done by hand.
    ○ I read about how to identify my screen size and set my drawings to that in mind.
    ○ Very important: I only use 1 phone to access the dashboards, so I didn’t have the problem of the background not scaling properly in different devices.

  • Saved them in google photos.
    ○ Please read about how to create “permanent”hyperlinks to your photos.

  • The layouts are then the background image to the dashboard.

  • I created a dense tile grid : 16x21; it could have been denser, but that was enough.

  • I modified templates for switches and sensors to have transparent backgrounds and use some nicer/simpler icons.

  • I created CSS to get rid of the texts, except for battery status in sensors.

  • I got rid through CSS of the annoying shadow in texts and icons.

  • I played around with “ dash link” “text” and “generic” tiles to create the upper half menus.

  • I realized the importance of copy+paste elements from one dashboard to another through the JSON code.

I struggled and had to work around the background color for specific tiles.

I did not solve (for now) the font size and alignment for specific tiles; so right now all my texts are relatively small.

Let me know what you think of it.


Keep it clean like this. People start with something that looks nice, and then crowd it up with every little sensor they can find to the point it's unusable. Maybe add some scene stuff for the TV Room instead of just an on off, and some redundant status indicators for the garage door.


Voortzetting van de discussie Show Off Your Dashboards!:

I'm a school drop-out. Even my english is from movies and a lot of games.
0.0 skills with any of those coding or anything.
Only had a lot of motivation to learn an willing to fight for what i want.
Last year i got my hubitat (was expensive for a belgian)

And now I am kinda proud on what i achieved.
I have my temprature set that there collor text changes according to there value.
I *** learned that a simple . or , makes a big difference.



Great job getting your temperature chart and tiles setup!! Also, you get a lot of respect from me, I have grown up speaking English and can still find it challenging, so well done for persisting and getting a great result.

If you are interested, there is also a Temperature Charting thread (if you haven't seen it already), you may find some more inspiration:

Das ist mega geil

1 Like

I had seen a topic about the color changing value but it was for F instead of C... Since we use C and meters :exploding_head::shushing_face:

I used that code but changed the value and found a online tool die color codes (RGB).
15.0 to 31.9C and ever 0.1 in between :crazy_face:

@gertjan.deprez I have a complete code for Celsius too (-18 to 49) . PM me if you want it. (see below first)

The current code is large as mention in the link posted above this post. The full code is too big for cloud dashboard limits. We are working on a shorter code now for use with smartly 2.0.


wow what switch is this ?

I know this doesn't compare to other dashboards around here but this is my meager attempt at a house wide consolidated Alexa music control dash with the Smartly touch. Not super practical as I can tell Alexa to do the same thing, it was more of an enhanced dashboard creation exercise, passing variables between RM rules, etc. Right now it's setup to be able to select the music service and the Artist to search for then play on whatever Alexa is chosen. The album and song displays below the audio controls and it all actually works. :stuck_out_tongue:


Looking for some ideas to slim down my motion sensor tiles. Anyone have any slick looking tiles to show off?

I used float:left on the device image and was able to slim my contact sensors:

Here is my custom CSS:

.tile.window .tile-title {
font-size: 11px;

.tile.switch .tile-primary .material-icons, .tile.door .tile-primary .material-icons, .tile-primary .material-icons, .tile.motion .tile-primary .material-icons, .tile.window .tile-primary .material-icons {
float: left;
padding-top: 0px !important;

.tile.switch .tile-primary, .tile.door .tile-primary, .tile-primary, .tile.motion .tile-primary, .tile.window .tile-primary {
font-size: 20px;

.tile-primary>div {
margin-top: 0;

.tile.switch .tile-tertiary, .tile.door .tile-tertiary, .tile.window .tile-tertiary, .tile-tertiary, .tile.motion .tile-tertiary {
left: 40px;


Probably not what you want to hear, but you could use a 3rd party app that only displays the sensors that are actually active.

Here's an example of Homekit on iOS.


I used the battery hack listed here

1 Like

Mine are like this:


I have quite a bit of custom CSS but following is what I think is relevant. My dashboard changes sizes, so I can use the same one on my PC and my tablets, and everything scales. That's what attributes like font-size: 2.25vh; are for. I use color/icon to differentiate open/closed, so I got rid of the text. I just have location + icon + color, and battery % for battery-operated sensors.

.tile.dashboard > .tile-title {
  display: none;

.tile-contents {
  padding: 0;
  display: table;
  width: 100%;
  height: 100%;

.tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;

#tile-44 .tile-title, #tile-46 .tile-title, .tile.motion .tile-title, #tile-35 .tile-title, #tile-35 .tile-title, #tile-29 .tile-title, #tile-16 .tile-title, #tile-37 .tile-title, #tile-33 .tile-title, #tile-2 .tile-title, #tile-1 .tile-title, #tile-17 .tile-title, #tile-31 .tile-title, #tile-51 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
#tile-1 .tile-title:after {
    content: 'Porch';
#tile-2 .tile-title:after {
    content: 'Kitchen';
#tile-16 .tile-title:after {
    content: 'Basemt';
#tile-17 .tile-title:after {
    content: 'Flood Lights';
#tile-29 .tile-title:after {
    content: 'Liv.Rm';
#tile-31 .tile-title:after {
    content: 'Basemt';
#tile-33 .tile-title:after {
    content: 'Fam.Rm';
#tile-35 .tile-title:after {
    content: 'Din/M.Ba';
#tile-37 .tile-title:after {
    content: 'Sunrm';
#tile-34 .tile-title:after {
    content: 'Motion';
#tile-47 .tile-title:after {
    content: 'Entry';
#tile-48 .tile-title:after {
    content: 'Mudroom';
#tile-49 .tile-title:after {
    content: 'Upstairs';

div {
    font-size: 2.25vh;
.material-icons {
    font-size: 5vh !important;
.material.icons {
    font-size: 4vh !important;
.tile-tertiary {
    font-size: 2vh;

.closed > div {
    display: none;
.open > div {
    display: none;
.motion .tile-primary > div:nth-child(2) {
    display: none !important;
.smoke .tile-primary > div:nth-child(2) {
    display: none;
1 Like

I'm glad that worked out well even though my concept was just for battery levels originally. You might be able to scale down the image if you really wanted to minimize the tile footprint.

Worked perfect for my use case. I have automated pretty much everything. Now with SSL support I am starting to put up some local dashboards. The CSS has made what I do use much better.

By any chance could you tell me how you set this up? Like the Tiles for searching and selecting provider and such?

Sure, I'll send something later tonight after work and my honey-do list is over :slight_smile: