Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Grid power meter reports < 0 when I’m sending excess solar back into the grid


Ah. Okay. That makes sense. I was thinking in terms of a standard smart power outlet or something similar.

.tile.power {background-color: green;}
.tile.power[data-value=‘0W’] {background-color: white;}
.tile.power[data-value|=’-’] {background-color: red;}

Maybe this if your <0 starts with a negative symbol.

Hey! Just wanted to say thanks for SmartTiles. I’ve occasionally played with it in the past, but now I just put my first kindle fire up on the wall next to the thermostat with it. Your simple looking, complex acting display tech is really awesome. Soon they’ll be one out in the pool shed, next to my bed, down the basement… :wink:


i have 2 issues i cannot find the answer:

  1. how can I move a tile to a desired position, like for example position: relative; top: 15px; left: 20px?
    it doesn’t matter what values i enter, it remains in the same position :frowning2:
  2. how to remove the spaces between tiles? i would like to have all tiles connected to each other.

thank you!

I haven’t noticed this from the screenshots I’ve seen so thought I’d share, you can add weather radar to SmartTiles. You just have to poke around your favorite weather site (try local tv station) and find the animated gif you like. Avoid the interactive maps that let you pan around, try the weather blog or animated thumbnail image at the main website. Also at a lot of local TV stations, you can find the 7 day forecast as an image, or a nice weather/traffic camera image.

Then you can either:
(1) right click in chrome, open image in new tab, if it looks good, copy that URL
(2) sometimes the gif is behind an overlay, so once you find the image you want, right click it in chrome and Inspect, to the right you will see the html and look for the gif URL buried in the html, copy it.

** Test the URL in browser window and make sure the image loads as expected before going into SmartTiles. Extra text or spaces around the URL caused big problems in SmartTiles for me. The URL should start with “http” and end with “.gif” or “.jpg”

Now go into SmartTiles - Video Stream - Stop Motion and paste it in.


Has anyone come across charging cables that have micro USB connectors like these Qi Micro USB Receivers referenced earlier in this thread…

I don’t need Qi, just would like a flush / thin / wrap behind micro USB charging cable. I have found 90°/right/left angle ones and even one bulky 180° but not a flush / thin one like this.

Also what about the thin super magnets I’ve seen on at least one of the examples here? I found one magnet specialty site, but prefer a cheaper price on amazon/ebay if available.


1 Like

Last year I had a weather radar tile, but the link I used stopped functioning and I have not replace it until you inspired me today.

Great idea @DarcRanger! Do you know if I can concatenate two different data fields so I can pick a specific device ID AND do the evaluation? Something like this…

.tile.power.inactive[data-device=‘DEVICE ID’; data-value|=’-’] {background-color: red}

Try this

.tile.power.inactive[data-device='DEVICE ID'][data-value^='-'] {background-color: red}

Darold, you are probably the only SmartTiles user that has solar panels!


I think this should be trademarked! Enjoy your tiles, Keith.


I had just figured this out and was about to post it.

1 Like

I have two problems.

  1. When I rotate my tile icons 45 degrees, they are a different rotation on my iPad compared to iPhone. So I can get my tile icons rotated straight on one device, but my other device has them really messed up (rotated-wise).

  2. I followed the SmartTiles instructions for the weather device. Works and everything but I am finding it is highly inaccurate compared to weather stations for my zip. I did input my zip code and everything…

SmartTiles only displays what your ST Weather Tile displays. ST takes weather data from Weather Underground.[quote=“dseg, post:1176, topic:11222”]
When I rotate my tile icons 45 degrees, they are a different rotation on my iPad compared to iPhone. So I can get my tile icons rotated straight on one device, but my other device has them really messed up (rotated-wise).

How do you rotate your icons? The CSS that SmartTiles uses to rotate icons is below:

.r45 {

Thanks @625alex for the reply. I am just using the code below:

.tile.light .icon i.inactive{transform: rotate(0deg); vertical-align: middle;}

Also, is there a way to change the color of an icon when inactive/active?

Is the best way to edit the CSS custom code, to take it out and put it in Notepad? The box on the browser is pretty small to edit.

1 Like

CSS custom code is really the only way to change it.

The following code will change everything with an active/inactive state.

.tile .icon i.active:before {color: purple; }
.tile .icon i.inactive:before {color: pink; }

Directly after .tile , no space, you could add .light or .switch or .dimmer or .power ect. to give device different color states.

You could also change the tile background-color base on an active/inactive state.

As for the CSS browser window, some browsers like Foxfire will allow you to size the CSS window, length and width, to help with editing. IE is the only browser that does not allow that. Chrome will only let you change the length of the CSS window.

I still tend to use Notepad or even Excel for complex manipulations. I actually wish there was an export to *.txt button on the CSS page to save details without the copy and paste steps.


Very good find. I went crazy with it just now. This will be perfect for my setup! :ok_hand::thumbsup:


I think so too… there are others in the forum that are working on device handlers, smart apps, etc to better report solar data (thats where I got the negative power reporting code!). This is one of the (many) reasons I I love SmartTiles… the work the rest of the community does trickles down cleanly into this app and you don’t have to reinvent (much) of the wheel!

Try this

.tile.power.inactive[data-device=‘DEVICE ID’][data-value^=’-’] {background-color: red}

Closer… i’ll keep messing with it tonight when I have some time.



Thank you sir.
So it does change the icons I DO NOT have custom icon pictures for.
Is there a way for my customer icons to change?

If you icons are link to URLs then those need to be manually modified for each state.

If you are using font Awesome icons then this should work:

.presence[data-device=‘Your Code’] .icon i.active:before {color: #cc0000; content: “” }
.presence[data-device=‘Your Code’] .icon i.inactive:before {color: yellow; content: “” }