Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Someone else mentioned the idea and I decided to create it. Thanks to @625alex we have a very sweet dashboard. However I want to see others ideas on themes or CSS code they implemented for their setup. Maybe even mounting ideas.

7 Likes

Love this idea! I will post mine as soon as I have a chance

Thank you @korban_hadley for starting this thread. I think it would be a good idea to change the title to also include discussion on mounting hardware and tablets.

I went with all gray tiles
Here is my custom CSS at the bottom of the smartapp:

def customCSS() {
"""
<style>
/*** Custonm CSS Start ***/
.tile {background-color: grey}
.weather {background-color: #333333;}
.clock {background-color: #333333;}/*blue gray*/
.presence {background-color: #333333;}/*indigo*/
.lock {background-color: #333333;/*red*/}
.hello-home {background-color: #333333;}/*purple*/
.switch, .dimmer, .momentary, .light {background-color: #333333;} /*green*/
.contact {background-color: #333333;}/*pink*/
.refresh {background-color: #333333;} /*blue gray*/
.temperature {background-color: #333333;} /*amber 900*/
.mode {background-color: #333333;}/*deep purple*/
.motion {background-color: #333333;}/*blue*/
.humidity {background-color: #333333;}/*brown*/
.link {background-color: #333333;}
.thermostat {background-color: #333333} /*teal*/
.energy {background-color: #333333} /*l green 800*/
.power {background-color: #333333} /*l green 900*/
.water {background-color: #333333} /*cyan a900*/
.music {background-color: #333333} /*purple a700*/
.battery {background-color: #333333}
.camera{background-color: #333333} /*lime*/
.video {background-color:#333333} /*dropcam grey*/
.blank.tile{background:none;}
.dashboard {background-color: #FE0002;} /* red */

.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.lock.active .icon {color:#990000}
.dimmer.active .icon {color:#00FF00}
.motion.active .icon {color:#990000}
.contact.active .icon I {color:#990000}
.presence.active .icon {color:#59FF00}
/*** Custonm CSS End *****/
</style>
"""
}

I also changed some of the icons manually around line 701 but this may not be necessary anymore since I think 625 Alex may have either updated or showed how to do it in the CSS. I have not made those changes yet:

def getTileIcons() {
    [
        dimmer : [off : "<i class='inactive fa fa-fw fa-toggle-off'></i>", on : "<i class='active fa fa-fw fa-toggle-on'></i>"],
        switch : [off : "<i class='inactive opaque fa fa-fw fa-lightbulb-o'></i>", on : "<i class='active fa fa-fw fa-fw fa-lightbulb-o'></i>"],
        light : [off : "<i class='inactive opaque fa fa-fw fa-lightbulb-o'></i>", on : "<i class='active fa fa-fw fa-lightbulb-o'></i>"],
        lock : [locked : "<i class='inactive fa fa-fw fa-lock'></i>", unlocked : "<i class='active fa fa-fw fa-unlock-alt'></i>"],
        motion : [active : "<i class='active fa fa-fw fa-exchange'></i>", inactive: "<i class='inactive opaque fa fa-fw fa-exchange'></i>"],
        presence : [present : "<i class='active fa fa-fw fa-user'></i>", notPresent: "<i class='inactive opaque fa fa-fw fa-user'></i>"],
        contact : [open : "<i class='active r45 fa fa-fw fa-expand'></i>", closed: "<i class='inactive r45 fa fa-fw fa-compress'></i>"],
        water : [dry : "<i class='inactive fa fa-fw fa-tint'></i>", wet: "<i class='active fa fa-fw fa-tint'></i>"],
        momentary : "<i class='fa fa-fw fa-circle-o'></i>",
        camera : "<i class='fa fa-fw fa-camera'></i>",
        refresh : "<i class='fa fa-fw fa-refresh'></i>",
        humidity : "<i class='fa fa-fw wi wi-sprinkles'></i>",
        temperature : "<i class='fa fa-fw wi wi-thermometer'></i>",
        energy : "<i class='fa fa-fw wi wi-lightning'></i>",
        power : "<i class='fa fa-fw fa-bolt'></i>",
        battery : "<i class='fa fa-fw fa-fw batt'></i>",
        helloHome : "<i class='fa fa-fw fa-comment-o'></i>",
        link : "<i class='fa fa-fw fa-link'></i>",
        dashboard : "<i class='fa fa-fw fa-th'></i>",
        holiday: getHolidayIcon()
    ]
}

I think I only changed the switch and presence icons.

6 Likes

Just updated to the latest version and decided to use @625alex’s method for changing everything in the custom CSS only.
Here is what I have in the Custom CSS section:

/*** Custonm CSS Start ***/
.tile {background-color: grey}
.weather {background-color: #333333;}
.clock {background-color: #333333;}/*blue gray*/
.presence {background-color: #333333;}/*indigo*/
.lock {background-color: #333333;/*red*/}
.hello-home {background-color: #333333;}/*purple*/
.switch, .dimmer, .momentary, .light {background-color: #333333;} /*green*/
.contact {background-color: #333333;}/*pink*/
.refresh {background-color: #333333;} /*blue gray*/
.temperature {background-color: #333333;} /*amber 900*/
.mode {background-color: #333333;}/*deep purple*/
.motion {background-color: #333333;}/*blue*/
.humidity {background-color: #333333;}/*brown*/
.link {background-color: #333333;}
.thermostat {background-color: #333333} /*teal*/
.energy {background-color: #333333} /*l green 800*/
.power {background-color: #333333} /*l green 900*/
.water {background-color: #333333} /*cyan a900*/
.music {background-color: #333333} /*purple a700*/
.battery {background-color: #333333}
.camera{background-color: #333333} /*lime*/
.video {background-color:#333333} /*dropcam grey*/
.blank.tile{background:none;}
.dashboard {background-color: #FE0002;} /* red */

.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.lock.active .icon {color:#990000}
.dimmer.active .icon {color:#00FF00}
.motion.active .icon {color:#990000}
.contact.active .icon I {color:#990000}
.presence.active .icon {color:#59FF00}
.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.active:before {content : ""}
.tile.switch[data-device='0efbbf1e-0e00-42c8-9d5a-f5e497f36af5'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='0efbbf1e-0e00-42c8-9d5a-f5e497f36af5'] .icon i.active:before {content : ""}
.tile.switch[data-device='6102c684-898c-404b-b469-23882d33c827'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='6102c684-898c-404b-b469-23882d33c827'] .icon i.active:before {content : ""}
.tile.presence[data-device='2295e34d-0666-4515-a093-4dfbb539bcd5'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='2295e34d-0666-4515-a093-4dfbb539bcd5'] .icon i.active:before {content : ""}
.tile.presence[data-device='5f181f7a-ca13-47a6-96c4-ddc3b05b147f'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='5f181f7a-ca13-47a6-96c4-ddc3b05b147f'] .icon i.active:before {content : ""}
.tile.presence[data-device='b40cff46-b4c1-4079-b8bb-72e8d82c22b7'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='b40cff46-b4c1-4079-b8bb-72e8d82c22b7'] .icon i.active:before {content : ""}
/*** Custonm CSS End *****/

Some of the background colors are unnecessary for me currently as I don’t have all of those devices but I left them in anyway.

Now when there is a new version I just overwrite everything but the Custom CSS.
Much easier, thanks @625alex!!

i’m lazy, i use the stock CSS and i have digiland tablets stuck to the wall with 3M velcro strips. i use an app called redeye to keep the tablets from going to sleep and i just keep the dashboard open all the time.

1 Like

Has anyone thought of an elegant way of mounting a cheap android tablet which displays the action dashboard? Assuming it has a power supply from the wall (internally wired) - Wasn’t able to find a tablet which has the power connection hidden somewhere behind it…so that when it is mounted on the wall , we see just the tablet - How about using the camera on the tablet for security monitoring?

1 Like

Yes, apparently unusually large picture frame borders do the trick. :flushed:



3 Likes

I’m hacking a Qi wireless charger to mount a Nexus 7 on a wall with no visible hardware or cables and minimal damage to the wall. I will post a picture once I finish.

I’m trying to relocate my Nest thermostat so that it would take a more focal point together with the dashboard.

1 Like

I created a frame similar to this. https://www.youtube.com/watch?v=nunw20h6W0I. So far it has worked well. I put a USB outlet in the wall.

8 Likes

I’m in the process of hacking a QI charger and using some magnets to mount mine. Parts are in the mail will post pics when I’m done to…

1 Like

I considered using magnets, but command strips will do for now. I didn’t want to wait a month for magnets to be shipped.

@swindmiller I copied your CSS overrides and I love it. I just added a couple of Cree bulbs but I can’t the tiles to look like your background.

Any pointer as to what to edit? Thanks!

Glad it worked for you.
I don’t have any bulbs…only switches. Can you copy the icon I show for switch to your bulb section?
Let me know.

Korban, I love your sweet kitchen! + how clean this looks.

Funny you should ask did alot of research and best value tablet is the Amazon Fire HD 6,

99$ and has almost retina display (252 ppi)!

Here’s it running ActiON:

Now unfortunately there is no wall mounting enclosures so I decided to make my own!

Going to get it 3d printed :wink:

5 Likes

Looks good. The price of the Fires is tempting but I worry about buying something that can’t be rooted, you know just in case.

3d printers is a great idea for making a wall mount.

1 Like

I got the bulb tile to look the same as the rest, too bad I can’t do any edits on IDE, it won’t let me save my changes. I will wait until Alex publishes his new version,

What browser are you using? I do everything thru Firefox but for some reason I can only save once in IDE thru Firefox. IE works great with IDE so I use that.