CSS Recipe for single-height Smarttiles thermostats

Wiki Projects & Stories
, ,
1

Hi all!

I’m relatively new here, so let me know if this post should go somewhere else.

I’ve really been enjoying Smarttiles (thanks @tgauchat, @625alex, etc). I have it running on the Fully browser, with developer mode keeping the screen from sleeping, on a $39 Amazon Kindle Fire, attached to my refrigerator with magnets.

With only 7" of real estate and an ever growing collection of connected “things” in my house, the double-height Smarttiles thermostats were taking up too much space on the screen. Mostly I just want to monitor when the heat and air conditioning is being activated. Sacrificing extra tile space for 3 thermostats seemed like a waste.

So I’ve put together a CSS recipe to convert your Smarttiles thermostats to take up only a single tile space each. And I thought I’d share it with the community!

Here’s what the end result looks like. You may want to tweak things to match your Smarttiles setup.

Tapping on the thermostat tile will expand it to double size (like the original) and the arrows will appear again so you can adjust temperature. Tap anywhere outside of the thermostat tile to shrink it back down to single size. When thermostat is cooling, tile background is blue. When heating, it’s red. It’s a simple change, but I think it improves usability quite a bit.

Just paste this into your Smarttiles “Custom CSS” field.

div.thermostat {
  height: 120px;
}

div.thermostat div.icon.up,
div.thermostat div.icon.down {
  display:none;
}

div.thermostat[data-operating-state="cooling"] {
  background-color: #0306a9;
}

div.thermostat[data-operating-state="heating"] {
  background-color: #9f030a;
}

div.thermostat:hover,
div.thermostat:focus {
  height: 240px !important;
  z-index: 1001;
}

div.thermostat:hover div.icon.up,
div.thermostat:focus div.icon.up,
div.thermostat:hover div.icon.down,
div.thermostat:focus div.icon.down {
  display:block;
}

Enjoy!

13 Likes
2

Very nice…Thank You!!!

1 Like
3

Wow you have taken CSS modification to a whole new level!

I’m saving this to a file to use later when I have more time.

BTW there is a SmartTiles CSS thread. It is about 1500 posts long. :slight_smile:

Here is a link to it: Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

4

Thanks Machael,

Yeah, I saw that thread, but I was daunted by its size. I wanted to make sure this post showed up in search. But I’ll go post a link over there so people who are following that thread find this.

5

@jjeff Could you please get a full screen shot to show off your custom CSS? I will start to create a section on our SmartTiles.Click site Custom CSS page for your hard work. Thank you for contributing to the community! It looks awesome from what I can see of it so far!

1 Like
6

Thanks for this it’s awesome! However the background color change function doesn’t work on mine, any idea why? Maybe because I am using one of the default themes (cobalt)?

7

Hi Phille,

I’m going to guess that it’s a CSS target specificity issue. You could try adding !important to the end (in the same way that the height: 240px !important; uses it.

So it would look more like background-color: #0306a9 !important;

That often fixes problems when CSS styles don’t seem to be working.

Good luck!
-Jeff