Presence Icon Removal

Support
#1

Happy Holidays @spelcheck to you, your family, and your team! Hopefully an easy answered question for ya. On my presence tile I’d like to remove the icon as I just have a photo on the tile and it gets obscured. I can change the icon with Smartly but there was no way to eliminate it completely. And for the life of me I can’t get the correct syntax to do it in CSS. I searched around but couldn’t find the answer. The closest I came, which works, was to set the icon’s font-size to 0, but that just doesn’t seem right. What’s the magic to do that the correct way? Thanks!

#2

@spelcheck is super busy, so I’ll field this one for him since I use this code myself. So first your answer… (change the tile # to be your presence tile)

#tile-123 .material-icons{
   display:none
}

But it’s the Holidays so you get a bonus.

These codes can be used to change the tile image if present/not. As listed it will change all tiles, add #tile-123 to specify a tile. The URL listed is a smartly example. It could be changed to be the local file manager URL of the hub, and display a given custom pic that way. Note file manager images are not available via cloud dashboards

Enjoy the season!!

Present

.tile.presence.present {
background-image: url("https://hubitat.ezeek.us/smartly-base/assets/images/room_8.jpg") !important
}

Not

.tile.presence.not {
 background-image: url("https://hubitat.ezeek.us/smartly-base/assets/images/bg_smartly.jpg") !important
}
3 Likes
#3

Cool, Thanks @TechMedX! I’ll give this a try!

Ah, It was ‘display’ I was trying ‘visibility’. Thanks again and Happy Holidays!

1 Like
#4

Then you were very close…

#tile-123 .material-icons{
   visibility: hidden; 
}

That will do the ‘same’ thing. However it does leave the space since the icon is there just “hidden”. Using “display:none” means it’s not there so the space is also free. When displaying an image this does not matter, just something I learned and tend to use.

TBH I suck at spelling so ‘display’ is easier than ‘visibility’ for me but that’s probably TMI :rofl:

#5

Oh I should have noted, that code will not remove a smartly icon (but if you set a smartly icon why would you remove it?). If you did set one, make sure you remove it before the code above will work correctly. You can do this on the smartly site.

#6

Visibility didn’t work but, as I can see now, I was using the wrong header with it (I was using F12 to view the source and I picked something different). And yes, this is a much better solution as it centered the text, soothing my OCD :slight_smile: .

Edit: I didn’t want to set a Smartly icon, I tried ‘reset icon’ but that didn’t work so I temporarily picked an icon, saved it (it worked as expected), then I went back, deleted it but then the (company not to be named :slight_smile:) default icon took over.

2 Likes
#7