Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
48

@Eduardo_Veras asked me to post what I had done to create SmartAlarm Arm, Disarm and Stay tiles in SmartTiles. I showed it here

Basically what I did was created 3 separate on/off virtual switched in the IDE for each of the mode. Then I wrote a 3 smartapps (with the help from others), one for each mode. Since I use Magic Home, I basically have 4 different modes I use: Home Day, Home Night, Away Day, Away Night and Bedtime. The smartapp switches to the correct mode based off of Sunrise/Sunset. The apps also monitor mode changes and changes the tiles if the mode has been changed other ways. This is my first smartapp creation and I have no programming skills so it was a struggle and I needed help so don’t mind how it looks or works :slight_smile: I had to hard code the modes in the apps since I didn’t know how to do it otherwise, I do plan to fix that later since @chuck_pearce gave me alot of help.
Here are the apps I made:

I could probably combine all of these into one, but dont know how yet…lol
You would have to change the mode names in each to adapt to your setup.

and then here is the custom css for SmartTiles for those 3 tiles:

.tile.switch[data-device='fb5ed1c6-0b3d-404d-a303-7ec74e65998b'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='fb5ed1c6-0b3d-404d-a303-7ec74e65998b'] .icon i.active:before {content : "";color:#00FF00}
.tile.switch[data-device='70128288-f048-4700-b20c-c1eaee22130f'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='70128288-f048-4700-b20c-c1eaee22130f'] .icon i.active:before {content : "";color:#FF0000}
.tile.switch[data-device='71c4d9de-0cd2-4a67-ae32-7782e805ea2e'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='71c4d9de-0cd2-4a67-ae32-7782e805ea2e'] .icon i.active:before {content : "";color:#FA500}
1 Like