I am trying to change the switch to the old and my custom css looks like this but the color still is gray. Any ideas why it will not change?
/enter custom css here/
.fa-toggle-off {opacity: 1}
It is my understanding opacity will only work if you use rgb numbers. If you strictly use hexadecimal code, you can’t use opacity. see below:
.tile.presence[data-device=‘YOUR DEVICE ID’] .icon i.inactive:before {content : “”;color:#DC143C}
.tile.presence[data-device=‘YOUR DEVIDE ID’] .icon i.active:before {content : “”;color:rgb(0,255,0); opacity: 0.6;}
in the first instance, I used hexadecimal. In the second instance, I used rgb so I could identify the opacity.
BTW, hexadecimal is the wrong term, but I don’t know the correct term! so don’t shoot!!!
is it possible to change the color on the Mode tile so that Away is red and Home is Green? and the icon of the house to text “home” and the away icon to “away”?
2 Likes
some help from a developer friend and trial and error, got this working:
.mode.Home{background-color: #006400;}
.mode.Away{background-color: #FF0000;}
.mode.Night{background-color: #000099;}
3 Likes
Sweet! Thanks for posting it.
@Noah_Humphrey I like this A LOT thank you for sharing.
Can I change the display from an icon to text? I’d like to put my own custom saying if that’s possible.
I don’t know if this has been addressed already. I am looking to modify 2 things, most likely using css. I want to have text only on the buttons and to center the text in the buttons. I may look to change the size of the buttons to rectangles at some point. I am playing with the theming trying to see if I can create a star trek control panel with it just as a project for the dashboard to learning what’s possible with the theming of the smart tiles product.
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