Icons in Supertiles with glow effect

It would be great if i could add a glo effec tin the conditions of thing icons. so it would be possible to use the same icon and have it glow if the thing is switched on. even better for me would be the possibility to add a custom css class for the icon. so it would also be possible to have different glow colors.
And to top this request. maybe it would even be possible to use the lights color for the glow =)

here is a better description of my usecase:

This is my SuperTile and i want to use light bulb icons instead of the switches. And then i want the bulb glow if the light is switched on.

image

2 Likes

I achieved this effect by using this custom css.

.--theme-style-[YOUR TILE THEME NAME] .icon {
    -webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0);
    filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow);}

This is a supertile with that effect.

1 Like

Is this getting any traction for development?

Alternatively, can the glow be set conditionally via CSS? The use case is pretty straightforward. Individual light icons should glow when on.

You can’t do it conditionally via css. You would need to handle this in the styles of the tile it’s self and have a glow state and a non glow state .

Agreed. The limitation is encountered when there are multiple icons in a single Supertile. The glow would be applied to all icons. The request is for control at the icon level.

There’s a separate feature request for that here which you can cast a vote on (and comment with your use-case to bump) if you’d like:

2 Likes

You can target individual icons/items inside a super tile you will need to know the icons order number. You will change the ? to the number of your icon is based on its order in the super tile.

.--theme-style-YOURSTYLENAME.super-tile  .item:nth-child(?) {
-webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0);
    filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow);}

I agree this would be nice if it was native, but I personally believe there are features that are more important to be developed first.