Icon Only Tile with Multiple Styles

Without anything overly complicated is the the above possible? I need to switch between three separate icons on 1 tile depending on what my device/virtual device is doing but I don’t want any values showing. I tried using the hero attribute, that allowed me to have three separate conditions, each mapped to a different style, however I had to show the value which puts the icon off centre and it didn’t look great.

I have a few uses for this type of “status” tile. One is my bin day reminder - that used to be two tiles, 1 for the standard bin and 1 for the recycling. A rule in Hubitat would switch on the relevant virtual switch/switches according to which collection was due. As it is either black bin only or black bin and blue bin, I want it one tile. My workaround has been to add a virtual thermostat in Hubitat and add that to the dashboard. I now have a rule that sets the temperature to 1 degree, 2 degrees, or 0 degrees and I’ve mapped those values in the tile to Black Bin (pulsating), Blue Bin (pulsating) and one with matching colours for tile and content (to show an empty tile when no collection is due) It works great but I’m still left with an irrelevant fake temperature in the bottom corner. Another use will be my washer (monitored using a power rule) Off, Running, Cycle Complete. From memory this was possible with AT - I remember I could show blinds open, closed, opening, closing.

PS: It would be nice if you add Glow to the animation list… :slight_smile:


Is there any custom css that can be applied to a tile that removes the value from a Temperature Measurement Tile?

Super Tiles (beta)

We also have a new Super Tiles feature in beta. It has nice options for adding icons and data to a tile in a custom layout. And style mappings are on the hit-list for it.

Using Styles

It can be done through configuration as well. You can set the Footer Color to transparent in your style(s):


Using CSS

Using a combination of CSS to Adjust Footer (Community CSS Wiki) and Target CSS to Specific Tile Type, you would get something like:

.tile.temperature-measurement .tile-footer { display: none }

And in case you need it for Hero Attribute tiles, you can also do this using CSS to Hide Hero Attribute Value.

Please note that any custom CSS snippets provided aren’t officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

You might find SharpTools Variables a convenient fit for this as well. You could either use a Number variable with the same 1, 2, 0 concept… or use a Text variable and put whatever word you want in the variable. (eg. “Standard”, “Recycling”, “None”)

The Text variables are a nice fit for this when you want a visual indication and make it easy to read the text too. This is with the native variable tiles:


And the Super Tile (in beta) gives you full customization, so you could only display the icon if you wanted to for example. Or position the text below the icon or at the bottom of the tile in a footer type position.

1 Like

Thanks @josh - I’ve lost track a bit of what I’ve tried so far with this! I previously tried using the Hero layout but didn’t like the icon being not being centred. As the state of the icon gives me all of the information I need using colour or animation, I’d rather not see the value - in my case the value is irrelevant as it is a fake value that I’m applying via a rule in order to change the state.

Changing the footer colour to transparent might be the easiest way - I hadn’t even considered that.

One thing that is a real pain…Every single time I edit the style state on the tile it reverts to the default icon for temperature. I have to then delete all of the style state mappings for that tile, save, change the icon back to what I want (washing machine) and then re add the 3 states with their settings - it’s really time consuming but I can’t seem to avoid the icon reverting back to default?

@Josh The fix for me is just to set the footer colour to the same as the tile colour “removing” the value.

The tile editing losing its icon seems to be a bug. Initially I have to have Icon and Style ticked, select an icon, then select the style and create and edit the three states and save. That works fine. After that if I edit the style - the icon selection is lost, then if I try to reselect the icon it appears to be set but the tile shows the default. The only way to get everything back is to delete all the states and start again.

Thanks for the heads up! I’ll take a look and see what’s going on. :slight_smile:

1 Like

Wow !!!..This is beyond anything a smart home user could wish !!..Congrats !!