Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Next question. Trying to get fan icons on my fan dimmer switches, but only the inactive is working. What do I need to do for the active?


.tile.dimmerLight[data-device=‘Xxx’] .icon i.active:before {content : url(http://www.smarttiles.click/wp-content/uploads/2016/04/ceiling_fan.png);}
.tile.dimmerLight[data-device=‘Xxx’] .icon i.inactive:before {content : url(http://www.smarttiles.click/wp-content/uploads/2016/04/ceiling_fan.png);}[/code]

Try dropping the light portion?

.tile.dimmer[data-device=’???’] .icon i.active:before {color: yellow; content: “✼”; font-size: 1.8em; line-height: 2em; width: 100%; margin-top: 1em; position: relative; left: -10px; top: -25px;}

.tile.dimmer[data-device=’???’] .icon i.inactive:before {color: white; content: “✼”; font-size: 1.8em; line-height: 2em; width: 100%; margin-top: 1em; position: relative; left: -10px; top: -25px;}

Didn’t work either. Both icons were stock when I dropped Light

If you are using the same icon for active and inactive (which is what you posted based on the content URL), then leave out the i.active:before and i.inactive:before

So that worked, but the icon was all white when active and inactive. When I had the inactive set it would be grayed out like I would expect, but then the active icon was the stock.

Do I need two icons, one colored, one not to do this?

Ah. I see what you are going for.

You should be able to do it with the same one.

Try using the CSS you already tried, but 1 line at a time.
See if the Active works alone. Then see if Inactive works alone.

If you have any CSS above that line that also impacts dimmerlight tiles (in general), it can sometimes prevent other CSS from being applied.

If you copied exactly what I posted that is stock. You would have to add your icon into that.

Active will not work on its own. Dimmer or dimmerLight

This is the CSS I use for my ceiling fan icons. It works on my screen. I just copied it from my CSS I am using.

You’ll have to edit in your icon url and Device ID

/Living Room Ceiling Fan Icon/
.tile.dimmer[data-device=‘397164cc-b5d0-4faa-a2eb-83fb17s588ce’] .icon i.active:before {content: url(http://i64.tinypic.com/e8lct56dv6.jpg);position: relative; left: -5px; top: 25px;}
.tile.dimmer[data-device=‘397164cc-b5d0-4faa-a2eb-83fb17s588ce’] .icon i.inactive:before {content: url(http://i68.tinypic.com/33w8t75rb7.jpg);position: relative; left: -5px; top: 25px;}

If you want the fan icon to change you will need 2 icons. Or else you’ll have to use one of the font icons and alter the color for the different states.

My icons are black and green (I think) prior to that I was using the font icon and using yellow for Active.

Been a while since I edited any of this so I may not be 100% correct.

if you’re using just white, and greyed out, on the inactive icon, you should add: opacity: 0.3;

Looks good! Have you powered this or just charge it back up when needed?

Can someone help me out on this ?
I have setup my smarttiles in my android tablet. Everything works as fine.

I would now like to add a local 5-dayweather and a live radar to display it on my tablet. The below are my local weather stations


Can somehelp tell me how to edit and add the local weather to display in my tablet. It would be great if you could post the code for me.

Thanks in advance.

1 Like

I think it’s further up in the thread.

I can search here in a little bit.

1 Like
1 Like

Thank you @TN_Oldman.


I tried to enter a custom code to display the local 5-day forecast/Radar as shown below. But after saving the changes i dont see any difference in my dashboard. ?
Am’I doing anything wrong here ? Pls help.

The below is the code for 5-day forecast which i need.

It doesn’t go in your CSS, it goes in your video section someplace. I did it a while ago. I’ll have to look back.

1 Like

It goes in the stop motion video part of smarttiles.

I tried opening the links you posted, the forcast opens in chrome on my phone but radar does not.

You then put those items, each as a separate stop motion video.

1 Like

Open smarttiles
Open your dashboard

Select video streams

Select stop motion video

Paste your working url into the fields.

Save everything as you close it up.
If your links were correct type they should show up.