Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

kevin · April 15, 2016, 12:51pm

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.

Thanks!

DarcRanger · April 15, 2016, 1:19pm

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.

Deanderson2 · April 15, 2016, 2:24pm

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}

625alex · April 15, 2016, 2:46pm

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!

625alex · April 15, 2016, 2:47pm

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

DarcRanger · April 15, 2016, 2:47pm

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

dseg · April 15, 2016, 4:01pm

I have two problems.

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).
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…

625alex · April 15, 2016, 4:06pm

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).
[/quote]

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

.r45 {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}

dseg · April 15, 2016, 4:10pm

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.

DarcRanger · April 15, 2016, 4:47pm

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.

Automatic00 · April 15, 2016, 6:11pm

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

Deanderson2 · April 15, 2016, 6:28pm

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.

dseg · April 15, 2016, 6:38pm

@DarcRanger

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?

DarcRanger · April 15, 2016, 6:41pm

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: “” }

dseg · April 15, 2016, 7:05pm

@Automatic00 @625alex
Wow I am having no luck finding a good radar gif for my zip code (34990).

Does anyone know how I can edit my Nest thermostat?
Also, do I need to take up four tiles? Two for cooling adjustments and two for heating adjustments?

Another one - any way to get a Nest Protect tile on SmartTiles?

sgnihttrams · April 15, 2016, 7:45pm

IGNORE THIS POST UNLESS YOU WANT TO SEE HOW STUPID PEOPLE (i.e. me, in this case) SOMETIMES READ FORUM POSTS…

@kevin

Until I, for some reason, went back up and actually read your post, all I saw was that radar pic, and was about to post this question…

How are you doing that radar tile? Is that simply a URL to a weather page or something?
Sorry if this is already obvious and I missed it.

One of the SmartTiles dashboards that I have up and running is at my folks’ house. Even though their SmartThings ecosystem is still pretty small, having one of these set up as a weather station has been really cool for them. If I could add their local weather radar to the mix, all the more so.

lol

So, needless to say, thanks a lot for posting this!!

sgnihttrams · April 16, 2016, 3:16pm

After clicking a link to a different website (a weather page, or google, or news, or something), when I want to go ‘Back’, I have to locate and click the super-tiny ‘Back’ button on the bottom of my goofy tablet.

It would be nice if it were possible to somehow build a ‘Back’ button into other SmartTiles dashboard pages (to make going Back easier when on a different dashboard from the main one for the given room), AND it would be cool to be able to always have a ‘floating’ Back button on the screen (to make it easier to go Back while on an external website).

Are either of these possible yet?

tgauchat · April 16, 2016, 6:32pm

This sort of concept (and related) has come up during @625alex’s design work on SmartTiles V6, and we hope you’ll be pleased with the ideas we built in when we finally release it.

Porting back to V5 is unlikely; gotta focus forward !

sgnihttrams · April 16, 2016, 6:38pm

So, to accomplish that, will SmartTiles basically retain some kind of hold/lock on the browser (or whatever) in order to maintain some kind of control of the browsing experience even when surfing away from the actual SmartTiles URL?

jdawson · April 16, 2016, 7:05pm

@tgauchat Speaking of V6, and I’m not asking for any commitment or really anything all that firm, but are you expecting the release of V6 to be weeks, months, or years from now? Just trying to set my excitement level appropriately. Love SmartTiles and eagerly looking forward to the next version!

Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Customers

Developers

Download the SmartThings App