I have some dashboard tiles representing virtual switches and want to set a custom background and hide the icon - is it possible to hide the icon, so the tile is simply represented by the background image?
Check out this post. If that is what your looking for tag @stephen_nutt for the code. I'm sure he's happy to share.
If you looking to just remove the icon you can use this in CSS (change tile # as needed)
#tile-1 .material-icons{display:none}
EDIT: To remove it all
#tile-1 .material-icons, #tile-1 .tile-title, #tile-1 .tile-primary {display:none}
What are you trying to accomplish? You just want a picture of the device for some reason?
You can use Attributes template in some cases to just display a status if that is what you want.
1 Like
There is a blank icon but you have to set it in the Settings --> Advanced --> Layout for the Dashboard.
Then just select a background image for that tile in the normal way.
3 Likes
Thanks!
he-blank works perfectly.
I wanted to hide the switch icon and replace with a background image e.g. in the AppleTV title below
Anyone have any ideas for a neat Sonos interface on a dashboard ?
Thanks for this - I noticed that I remove the icons this way on for example a switch title, the switch no longer functions.
ok this time I tested it (sorry bout that) Try this one if needed
#tile-0 .material-icons, #tile-0 .tile-title, #tile-0 .tile-primary {opacity: 0.0 }
Are you look for a sinlge music tile? Run you dash through smartly and you'll get this style
With CSS you can make some really cool stack tiles, but it takes an expert. A dev much better then I helped me make this (track scrolls across marquee style). I'll share the code, but this was custom made for this dash, so it might not work well for you without tweaking. Posting to show what IS possible. Depending on exactly what your looking for I might be able to help customize some of it.
#tile-17{padding-bottom:8em}
#tile-17 .tile-contents{display:inline-flex}
#tile-17 .material-icons{font-size:43px!important;line-height:1em}
#tile-17 .vue-slider{margin-top:4em!important}
#tile-17 .trackDescription{overflow:hidden;white-space:nowrap;padding-bottom:1em;margin:0 .5em}
#tile-17 .music-player{margin-top:-3px}
#tile-17 .tile-primary,#tile-64 .tile-primary,#tile-65 .tile-primary{width:100%}
#tile-64,#tile-65{border:0 none;background-color:transparent!important}
#tile-65{margin-top:-1em}
#tile-64 .tile-title{padding-bottom:.5em}
#tile-64 .music-player,#tile-65 .music-player,#tile-64 .trackDescription,#tile-65 .trackDescription{display:none}
#tile-17 .music-player>div.previous,#tile-17 .music-player>div.play-pause,#tile-17 .music-player>div.next,#tile-17 .music-player>div.muteControl{margin-top:0;top:unset;width:unset;position:relative}
#tile-17 .music-player>div{top:4.75em;position:absolute;width:100%}
#tile-17 .trackDescription{position:absolute;left:0;top:2.75em;height:100%;width:auto;padding:0;animation:slideshow 10s linear infinite}
@keyframes slideshow {0%{left:100%}100%{left:-150%}}
#tile-17 .tile-primary>.music-player{margin-top:5px}
#tile-66 .tile-primary > div{height:auto!important}
Thanks for sharing!
Tile 17,64,66 - are these originally 3 separate music tiles?
1 Like
Thanks!
1 Like
yep, and they still are separate tiles, just "stacked" to look like one.
I am trying to do something similar with my dashboard. I want to remove the icon and remove the text at the bottom of some of them and change it on others. Any ideas on how to do this for each individual tile? I have included a picture for an example (I want to remove the stuff in the red circles and change the stuff in the yellow circles.
You can do that and more with CSS. Head over to this CSS guide, lots of information to help you get started.
2 Likes
Thank you for that link to that guide. That helped a lot. So through looking through the community I was able to find the CSS codes for what I wanted to do. But was unable to figure out which tile was what number. That guide had that info. And of course, it was as simple as clicking the three dots. lol Looks much better now.
2 Likes
Agreed, that looks nice.
1 Like
