Image tile on top of another tile

So I'm playing around with my dashboard heating page. I have a tile with an image of a thermometer on the page (I'm nothing if not radical) and discovered that if I moved it over one of my temperature reading tiles it became a background for it and the temperature data sits on top which I think looks great. But here is the thing, when I created an exact copy of the image tile and put it over another temperature tile it sits on top of it so the temperature is not visible. I've tried moving one on top of the other in a different order but it makes no difference. Then I discovered that if I move my original image tile over any other tile it becomes a background to it, but any newly created image tile using the same image obliterates any tile it sits on. I do have custom colours set for image tiles but surely all image tiles on the same dashboard page should have the same settings anyway. I'm confused!

I had the same thing happen to me. It seems you must click on "update tile" after each move or resize, before you go to the next tile you wish to edit.


1 Like

The layered order of the tiles depends on the order in which each tile is created.
So essentially you would have to create a new foreground tile and then place it on top of the image tile. A pita but it works, and I only discovered after much trial and error myself.


Thank very much, that's definitely it. I've just created a new copy of the temperature tile, put it over an existing image and it works perfectly. I wonder if this is how it's meant to work? But at least now I know I can sort it how I want.

I am re-working several existing Dashboards where tile layering is involved. Is there any other means of getting existing tiles to the foreground other than re-creating them?

Thank You.

You can add something like this to the CSS section under the Advanced Settings of the dashboard, replacing the tile I'd of 87 with your own tile I'd, and adjusting the index value of 900 with whatever value you need to put the tiles in front of behind each other.

#tile-87 {z-index: 900; !important;}

You may also find my Simple CSS editor useful for some simple stuff like this.

1 Like

I was unaware of the CSS z-index property. Thank you so much.

1 Like

There's a whole range of things you can do with CSS on your dashboard....