Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Thanks @Stroh

Using:

.theme-slate .tile.inactive .title {opacity: 0;}

unfortunately kills a few extra titles I’d like to keep in there. Namely Temp sensors and SHM when it’s disarmed.

I’m getting a little more granular and turning off titles by grouping so I went and did the below. Gets me exactly what i’m looking for.

.switch.tile.inactive .title {opacity: 0;}
.motion.tile.inactive .title {opacity: 0;}
.presence.tile.inactive .title {opacity: 0;}
.contact.tile.inactive .title {opacity: 0;}
.light.tile.inactive .title {opacity: 0;}

I have one other touch I’m going to make. I want to remove the title for specific switch tile when it is active. Is that where I’d use (!important)? To override a setting?

Once I can figure that last piece out, I’ll post of a video of this in action, but it’s looking really great.

1 Like

I think you would add a device ID specific without the state.

.theme-slate .tile[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx'] {opacity: 0;}

I believe it would have to be at the end so that precedence didn’t change it back when another line following supersedes it. Not sure if that is the case or not, haven’t tested it out. It is possible that the ID specific tiles retain their settings when general changes are made afterward.

[Edit: I did some rough tests of this and not sure if there is a precedence issue or not. I added code to test it

.theme-slate .tile[data-device='7ca327e3-d920-4c1c-89d5-17e5abd0c634'] .title {color: pink;}

       ... bunch of other CSS changes here ...

.theme-slate .tile .title {color: green;}

The device specific stayed pink, all the other tiles turned green. I expected the device specific to also change but it did not.]

This worked for me:

.tile.switch[data-device=‘6639f75a-e903-440a-8cb8-12daa239568b’].active .title {opacity: 0;}

Like you said, I placed it after the rest of the lines related to .title.

I tried to change the icon of a custom mode via the brute force method last night. The closest I’ve come is changing the icon of the tiny refresh icon for that custom mode…

.mode[data-mode=“Visitors”].tile i::before {content: “”;}

That’s a tiny little calendar icon that rotates and fades out when it refreshes. Only occurs on the “Visitors” mode tile, so we’re on the right track.

I’d think based on @tgauchat’s follow up to your post that this might be done through “mode-name” but “data-mode” seems to be targeting it.

I am trying to add an icon to contact tile (debara door) and when it loads it is rotated 45 degrees. if I open the link, the pic is looking fine, also inside the tinypic website is OK.
i didnt had this problem with other icons that i’m using for lights and motion.

any ideas?

thanks

Do you see this code anywhere concerning the door:

transform: rotate(##deg)

Where “##” is a number.

or even this set of codes:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);

no, i don’t!
i used a web tool to rotate to 315 degrees and then upload the file to tinypic and this did the trick.
but i will use your code instead.

thanks

any way to mash the battery percentage for a sensor and the sensor data into 1 tile?

like for example… a motion sensor tile and the battery for that sensor in 1 tile?

The contact sensors are rotated in the SmartTiles basic CSS. You have to “undo” that.

.tile.contact .icon i.active{transform: rotate(0deg)
.tile.contact .icon i.inactive{transform: rotate(0deg)

Unfortunately, we have to wait for v6 for that. That has been confirmed on here as one of the upgrades.

Perhaps not the most elegant, but my thinking is that technology changes and I don’t want to put a hole in the wall. I replaced an unused switch with a USB receptacle, bought a simple 7" flexible USB cable, and a Koala damage-free tablet wall mount. It’s just attached with 3M strips. I still need to add the faceplate to the switch box.

The tablet is a Kindle 7" with a new Cyanogen Mod 12.1 ROM, with the Dolphin Browser for full-screen. Though the motion detector app wakes it up, I still see the browser bar upon wake up.

5 Likes

Looks nice and clean, even if it’s a basic install.
I’m with you on wanting the ability to change out hardware as needed. I have a touchscreen monitor in the kitchen that will likely be semi-permanent, but tablets are only ever temporary.

1 Like

It’s not a tablet but this what I have in my kitchen, it’s an old iPhone with a wood stand… Works great and actually I think it does dim some when not used but it is set to always on

3 Likes

I’m not completely done yet, but I was inspired by a concept post I saw on this thread.

This is 100% functional, but the CSS code isn’t transferrable to anyone else. Still, the whole thing only took me ~1.5 hrs to get done, and I would have been watching TV otherwise, so I consider it a worthwhile investment.

18 Likes

thank you!

It’s weird to see the tiles taken totally out of context and transformed into this! Great job!

3 Likes

Here is a picture of my full reporting status board. I do have sub-tiles that group things by floors and Environmental screen.
.

Not as fancy as some of the customized like Anthony’s above, but usable.

The only thing not shown is an active motion tile, that would have a red background like the open door contact above, the background color change for the thermostat. When the heat is that tile is light red and the cooling system stays neutral, and when the cooling is on the background tile is light blue with the heating tile keeps the theme’s background color.

I should note the humidity tile for a couple SmartThings sensors gets the “numerical value returned as text” error, but that is a device issue and not SmartTiles.

6 Likes

That looks awesome.

Just don’t click on Event History. That many items will kill it for sure.
I only have 5 rows on mine and it can’t handle it.

Do you have a link on that Dashboard to that Dashboard? Or are you using a 6th from back in the ActiON Dashboard days?

I post about that issue earlier in this topic and the revelation is was the size of the dashboard. But depending on the time of day, I can sometimes get the history to post, not that I pull it often.

I am using the current version of SmartTiles for this main board, but I also have a couple of dashboards using the an early version SmartTiles, but after ActION and before the current version. I will eventually drop the older dashboards, it just hard to give up the two custom tiles I made for a couple of attributes data points for a special device, which gave me a sound level tile and air pressure tile. I do not miss them as much and I want to figure out a way to use a web-link to show the data from the device. At that point I will drop the last of the old dashboard guard.

1 Like

H…hhh… how??

1 Like