Hero Attribute Tile: Icon Only Display (None for Primary Attribute)

For the Hero Attribute tile, it would be helpful there was an option of “None” for the Primary Attribute that could be selected if you want the tile to be Icon Only.

Hey @kampto - thanks for posting the feature request. I split the two requests out into their own individual posts. The second part of the request can be found here:

Add 'Icon' to Hero Attribute Tile Theme / Style Customizations

@josh Just following on from this feature request. I think my issue is aligned with this request but wanted to confirm. I have a tile that I want to tie to a hyperlink. So I used hero to then select the switch and put two states in for on and off with different icons selected. All looks good but I still get On/Off on the tile. If I am doing this correctly then I would expect to get an icon here? Or is this what the OP is referring to in this feature request? Thanks.

Screen Shot 2021-08-13 at 8.32.22 AM


The states need to be lowercase to match the raw state from Hubitat/SmartThings.

image

This is referring to wanting to only display an icon in as the main content and not display a primary attribute at all. When a tile is configure with an icon, you see the icon and the primary attribute.

image

From what I understand, kampto is looking for a ‘None’ option for the primary attribute, so you would see only the icon.

image

image

Today, you would have to use some Custom CSS to accomplish this. Maybe something like:

/* Hide the 'value' for Hero Attribute Tiles that use 'switch' as the primary attribute */
.tile.hero-attribute [data-attribute="switch"] .value { display: none }
/* Fix the margin of the icon so it's centered */
.tile.hero-attribute [data-attribute="switch"] svg { margin: initial!important }

As usual, any CSS snippets provided are not officially supported and may have to be tweaked with future updates to the SharpTools web app. :slight_smile:

Thanks - I was looking to do exactly what the OP was asking, and the CSS snippet does great. Also, thanks for the cue on the lower case. I was mistakenly looking at the display information not the tile vs. the hubitat device.

1 Like

Awesome. Would love to have this as an option in the hero attribute but this css is a nice workaround.

I agree. This would be a very helpful/useful feature. This would allow creating tiles needing to use Hero Attribute style to look more like the other tiles in Sharptools.

1 Like

Hi. I have succesfully been able to switch of my primary attributes for hero tiles (and thus only show the icon) using below code.

/*prevent showing measurements for hero attributes (e.g. wifi tuya plugs) */
.tile.hero-attribute [data-attribute=“power”] .value { display: none }
.tile.hero-attribute [data-attribute=“battery”] .value { display: none }
.tile.hero-attribute [data-attribute=“switch”] .value { display: none }
.tile.hero-attribute [data-attribute=“humidity”] .value { display: none }
.tile.hero-attribute [data-attribute=“pressure”] .value { display: none }
.tile.hero-attribute [data-attribute=“luminance”] .value { display: none }
.tile.hero-attribute [data-attribute=“noisemeasurement”] .value { display: none }
.tile.hero-attribute [data-attribute=“carbondioxide”] .value { display: none }

However: only for the last 2 entries (noisemeasurement and carbondioxide) it does not work. Both are readings from my Netatmo weather station. Does anybody know the correct CSS settings to also disable display of these primary attributes?

Or maybe a more general question: how do I figure out the CSS code syntax of Sharptools tiles etc?

Update: I have it working now. As it turns out, when the attribute is actually constisting out of 2 words, the 2nd word needs to start with a capitol letter (as is common practice in coding).

So it works by the following adapt:
.tile.hero-attribute [data-attribute=“noiseMeasurement”] .value { display: none }
.tile.hero-attribute [data-attribute=“carbonDioxide”] .value { display: none }

1 Like

This feature is now available in beta. If you have beta access, you can reference this post for details:

:test_tube: https://community.sharptools.io/t/beta-hero-attribute-tile-enhancements/13515

The Hero Attribute Tile enhancements, including the option of setting the primary attribute to -none-, have been released to production:

:tada: Hero Attribute Tile Enhancements