Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

I have more than Home, Night and Away. For example if I have a Company mode I can do
.mode.Company{background-color: #******;}

It does not work if I had the CSS. It seems to be limited to the default modes.
Any ideas?

Some guesses at how this might be done.

.mode.Home .icon i.active:before {content: “Home”} or
.mode.Home .icon i.inactive:before {content: “Home”}

These are slightly modified from changing the icon for my fan switches. Im not sure if it will even work for the mode tile or whether it is active or inactive, or both. Another method might be;

.tile.mode[data-device=‘’] .icon i.active:before{color: #ffffff; content: “Home”} or
.tile.mode[data-device=‘’] .icon i.inactive:before{color: #ffffff; content: “Home”}

These are from changing the icon and color of my garage door contact switch. Again, not sure if it will work or whether to use active, inactive, or both.

Using @Noah_Humphrey’s approach perhaps this will work:

.mode.Home{background-color: #006400; content: “Home”;}
.mode.Away{background-color: #FF0000; content: “Away”;}
.mode.Night{background-color: #000099; content: “Night”;}

Trial and error, play and see… Warning, this can be addicting!

1 Like

I have to still work on hiding the power cord, but this was a cheap setup. $50 for the tablet, $2 for the frame, $2 for the matte, $3 for the Velcro on the back. I will post pictures of the back later where I carved the space for the tablet and cable.

8 Likes

I have a question for the group.

Is anyone else using CopyNinja’s MyQ code with SmartTiles? Right now each door needs 2 tiles, One tile shows open or close, like a contact sensor, the other is a momentary Switch for opening is closing. Has anyone figured out a way to combine these? I have 2 garage doors, so I am using 4 tiles to monitor and check if they are open or closed.

What type/model contact are you using for your garage doors? I started with the motion sensor and it did not work. Then I used an open/closed sensor and it worked for a couple of weeks and now it quit working. What kind do people use for a garage door?

I am using MyQ (http://www.chamberlain.com/smartphone-control-products/myq-smartphone-control) with Copy Ninja’s code ([WITHDRAWN] MyQ LiftMaster/Chamberlain) it was a little buggy but is better with the latest update.

Thank you!!!

I use and would still recommend a SmartThings Multi for open/close/temp/accelerometer.

Try this .fa-toggle-off {opacity: 1!important}

You can try this:
.icon.Home i::before {content: "Home"; font-family: Mallanna;}

Icons only show for default modes: Home, Night, Away. If you name you mode anything else, it will display full text rather than icon.

1 Like

Try this for example:
.mode.tile[data-mode="Company"] {color: red}

I will implement this feature eventually.

1 Like

Yes that works great, thanks for the assistance.

@625alex perfection! Thank you very much!!

Addiction is an understatement lol.

Alex responded and using the below works perfect.

.icon.Home i::before {content: “Home”; font-family: Mallanna;}

2 Likes

@625alex Is there any way to create a tile like the Mode or Hello Home tiles, where you touch the tile and a menu of options pops up? Currently I have a switch tile to arm or disarm my alarm. I would like an alarm tile that would pop up a menu with Arm, Disarm, Arm-Stay, and Panic Alarm when touched. I bet I have to create an app for that, but have not found a code sample of how the Mode tile does it.

2 Likes

Thank you for an excellent dashboard! I’ve done some custom CSS theming…

Home Dashboard

Doors Dashboard

…however, I can’t seem to get the event history to acquire the custom CSS attributes…

Doors Event History

I’ve browsed “style.css” on github, but I got lost! Is there a way to theme the event history?
Thank you, again for adding to the WAF!

2 Likes

This will be included in the next release.

5 Likes

@625alex what css element modifies the theming of the words at the top of the tile?

.title, but you might have to be more specific.