Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

It is a violation of the License Terms to share (“distribute”) the SmartTiles SmartApp, even older versions.

Drop a note to @625alex via the http://SmartTiles.click website and he’s likely to offer a solution.

I’ve thought of the same idea, and it likely is a code violation, though low voltage (5v?) often has exceptions.

There are “recessed” outlets available, which might be a viable solution… If they included USB power!

1 Like

@tgauchat Wondering how come so little talk about this outlet which has an USB port on the side? No device handler yet in the community and has tons of functionality. I own one but use it as a hallway night light as the LED is so bright. Pairs as zwave metering switch as of now.

Aeon Labs Aeotec Z-Wave Smart Switch 6, Gen5


Yeah was going to say, there are a load of outlets with USB on them but that being said I think you are talking about having the USB outlet inside the wall itself, i.e. behind the dry wall maybe?

I used one of these, along with a normal outlet with USB ports, to get the tablet mounted flush without having the USB inside of the wall - http://amzn.to/1V7XarD


yes behind the outlet … so it is clean in the wall.

yes also thanks… that is my current approach was going to get the stuff from home depot but this is cheaper…
but behind would be cleaner and there should be a solution

I lucked out and found a decent spot in the area between the kitchen and family room where the installation would be easy and inconspicuous. Mounted with a few 3M strips and wired to an outlet not far away under the cabinets. Not the cleanest install, but definitely easy and non-permanent.

I’m debating whether I should try to find another area upstairs where I can install another one, and use Daydream or some other “screen saver” type of app so that the screen is not on all the time.


So, i’m sure I’m missing something, but after spending hours reading custom CSS tutorials both in this thread and via google, I can’t get a single thing to work.

Adding custom CSS code within the app (via my iPhone) doesn’t seem to change anything. I looked at the source code and it looks like the custom css is showing up below where the comments “insert custom css” are.

An example of a code that I tried:

dimmerLight.active .icon {color:#FFFF00}


Not sure if my issue is related but I’ve recently added two devices to my dashboard and my custom CSS changes aren’t sticking either. My previous changes are fine, the order of these two devices keeps resetting too. I think this is a known issue for the developer.

Eagerly awaiting the new version that allows for multiple dashboards again!

Depending on the base theme, try the following CSS rule:
.dimmerLight .icon .active {color:#FFFF00!important}

These might be separate issues. Is the CSS not sticking because it’s suddenly dissipated from your app preferences or is it not taking effect because it’s incorrect? Post a snippet here and we will take a look.

Found out a big portion of my problem was not starting with the base theme. The other themes can be modified too, but not without making reference to that theme. with .theme-quartz for example.

So, here I am. Current issue is figuring out why the hello/goodbye fonts won’t align in the center of the button. Any thoughts on that? Is it possible to make both those buttons the same size sharing 50%/50% of that line?

I’ve tried the below, but this produces what you see below:

I’ve also attached a mock-up of what I’m trying to accomplish

/Hello Program/
.tile.switch[data-device=‘01e9c5f7-e27a-49c8-bcfd-1ad95b38accf’] .icon i.inactive:before {content: “hello.”; text-align: center; font-size: 20vw; color: black; opacity: 1.0;}

.tile.switch[data-device=‘01e9c5f7-e27a-49c8-bcfd-1ad95b38accf’] .icon i.active:before {content: “hey.”; text-align: center; font-size:50%; color: black; opacity: 0.9;}

.tile.switch[data-device=‘01e9c5f7-e27a-49c8-bcfd-1ad95b38accf’] .title {color: white}

.tile.switch[data-device=‘01e9c5f7-e27a-49c8-bcfd-1ad95b38accf’] {display:in-line block; width: 50%;}

/Goodbye Program/
.tile.switch[data-device=‘6cd34048-0685-468f-8d1a-26d2c665880c’] .icon i.inactive:before {content: “goodbye.”; text-align: center; font-size:50%; color: black; }

.tile.switch[data-device=‘6cd34048-0685-468f-8d1a-26d2c665880c’] .icon i.active:before {content: “L8ER.”; text-align: center; font-size:50%; color: black; opacity: 0.9;}

.tile.switch[data-device=‘6cd34048-0685-468f-8d1a-26d2c665880c’] .title {color: white}

.tile.switch[data-device=‘6cd34048-0685-468f-8d1a-26d2c665880c’] {display:in-line block; width: 50%;}

Could only attach one image per post


Trying to change the opacity for the lock icon and I can’t seem to get it to work.

have the following in the CSS page

.fa-lock {opacity: 1}

Any ideas?

If i remember my CSS the opacity property will take a value between 0.0 - 1.0

Etc Etc

… i did 1 and it still is as light as not specifying anything at all.

It needs to be written as “1.0” not just “1”

0.0 = 0% (Not visable)
0.1 = 10%
0.2 = 20%
0.3 = 30%
0.4 = 40%
0.5 = 50%
0.6 = 60%
0.7 = 70%
0.8 = 80%
0.9 = 90%
1.0 = 100%

I hope this helps :slight_smile:

1 Like

well, just changing it to 1.0 didn’t help.

Found another suggestion way back in this thread, and had to use this:

.fa-lock {opacity: 1.0!important}

1 Like

Glad you got it working :slight_smile:

1 Like