Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Sorry for buttng in here but this seems smarttiles post seems to be looked at daily. I have found virtually no info on integrating a weather radar or traffic cam into the smarttiles app. I am able to load a URL but it shows no picture…any idea on how to do this? I want to simply put weather forecast or radar or a traffic cam into smarttiles but am stumped on how to get the url to display or even what url to use really…thanks

Post 1160 in this thread should help:

It will need to go in the Stop Motion Section of Video Streams in SmartTiles.

1 Like

Thanks…trying now…i was able to just get wallpaper to show a few minutes ago…i just googled hd wallpaper and copied the link to that section and the picture showed…so i know it works and in the right spot…i will update on the weather one though.

1 Like

got the weather static forecast jpeg to show! so i assume when the news updates this it will update as well via 5 second increments…what i really want to add is live radar…working on that now.

got the live radar too after inspecting links in a new tab to see if they display anything…some do and some dont…you have to play around with them to see…would of been nice if the developer actually posted what Nezmo did as there is no info on how to do this at all that i could find…thanks Nezmo!!

Kevin should really get the credit. I just reposted his information.

Try using:


.tile.contact[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active{transform: rotate(0deg);}
.tile.contact[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive{transform: rotate(0deg);}

You may need to play with the number. I think this may also be browser dependent.

HA!! I tried 45 degrees, negative 45, 315… everything but zero LOL
It worked. Wish I’d thought of that. Thanks, we are in business. Gonna make a larger image to use and then it’s exactly what I want.

Here’s the thing, on the iPad

1 Like

The rotation you saw before you applied your CSS is because the default CSS rotates an icon that would look odd without the rotation. Setting it to 0 cancels that rotation.

I’m not at my computer. I don’t think you have to drill this deep. Once you click the device look at the Url in the path up top in the browser. The device ID is in the Url.

I hope I am remembering that correctly.

1 Like

Yup, that works too.

Who would have guessed that there’s a default rotation on an icon? Now looking at the thread I see it noted earlier, but I didn’t see it beforehand. Thanks again.

One other question for all: I’m trying to get a single tile’s opacity (the ‘garage’ tile in my earlier post) to 1.0 when inactive so that the icon shows in its natural colors instead of being dimmed. It’s not working. Is this a setting that only applies to an entire class of tiles, such as all switches? Or is there a special way to get it to work on a single tile?

The icon or the whole tile?

Just the icon. The icon is bright when the garage is open, and dims when the garage is closed - I’d like the icon to not dim at all regardless of status. The opacity:1.0 settings that I tried didn’t work no matter where I put them.

Opacity is 1.0 for active and 0.3 for inactive if I recall. If you have it set correctly and it isn’t working there may be some code that changes it back after it is set. I ran into this with some of the theme changes and rearranging seemed to help. What is the line of code you are using to change it?

I tried inserting it into EVERY line lol
It’s really not that important. I’ll play with it and see if I can get it to work.

I haven’t looked at everything you have tried.

Here is the CSS that I have set on my tablet:
tile.inactive .icon i.inactive {opacity: 0.8;} /make icons less opaque/

It makes all my inactive icons less opaque. I realize you want a specific tile. Possibly this will get you on the right path?

Give that a shot. It is the 1st line of my CSS

Here’s the current first line in my CSS:
tile[data-device=‘Xxxxxxxx-xxxx-Xxx-xxx-xxxxxxxxxxxxxxx’] {opacity: 1.0;}
I’ve tried tile.contact with that device, tried tacking the opacity onto other lines, tried !important, etc.
Nothing works.

Btw, for anyone who wants a pair of large garage icons:
http://i65.tinypic.com/voajw4.png

http://i64.tinypic.com/2h81paq.png

1 Like

I’m not very good at this but try something like this:

.tile.switch[data-device=‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’] .icon i.inactive:before {content: url(http://“your image link here”.jpg);position: relative; left: -5px; top: 25px; opacity: 0.8;}

EDIT: This doesn’t exactly work, appears there’s a default that when I edit the individual icon with that I can go below but I can’t seem to get it above. I missed it at first because I have all my inactive tiles set to be 0.8 opacity and I was able to lower it down to .2 and that single icon faded out. But if I remove my main CSS to make all my inactive icons opacity 0.8 I can not get it darker using what I posted above.

This image show an example of part of my dash with my main opacity set to 0.8 and the Fish Tank icon at 0.5. You can see it is lighter.


The fish Tank icon should be dark black like the fan icons since it is currently off.

I believe there’s a way but it escapes me. Maybe @DarcRanger will be able to help. He has ALWAYS bailed me out when I was stuck.

Soooooo, possibly put the CSS I originally posted in your first line. Set it to 0.8 when inactive for ALL the tiles. Then you could edit all your other CSS for each item to have any opacity you wanted for that item below that 0.8 value? Little more work but options are good.

Always more than one way to do things. Some are just the LOOONG way around till you learn the shortcuts.