How would someone manipulate the layering of tiles? I know it has to do with the id but is it as simple as changing the numbers around. I have a contact sensor that I want to make a background of a dashboard so the whole background changes with it's state.
I've had that issue before. The larger tile ID number will overlay the smaller tile ID number. If you want to make the a contact sensor the whole background, then probably use tile ID 0 and change the one currently using 0 to the next available highest one. IIRC you have to do this in the advance section, under the layout JSON, just edit the tile ID's.
You want to change the z-index of the tile, from memory, the higher the number the closer tile is to the top.
2 Likes
Yeah, I'm gonna need some guidance on that I think.
Hi Mark, @markbellkosel84
I did it a different way then using the z-index (actually I didn't know that existed, lol) Learning everyday!
First, delete whatever tile / device on your dashboard is using tile id 0, you can add it back afterwards and it will get assigned a new number automatically later.
So lets say I want tile my original tile ID 46 to be under everything else. Click the 3 dots on the tile to find out tile ID
Once tile ID is confirmed, then you need to find it in the Advanced settings Layout JSON, click the gear icon then click Advanced,
then scroll down the code to find the tile id, in this case 46,
Now, change the number to 0, in my case the 46 circled above gets deleted and I will replace it with just 0. Hit Save JSON Layout in the bottom left of the window. I usually tap it a few times, lol. That tile is now at the first level of the dashboard, everything else is on top of it.
Now add back the tile / device you deleted in the first step as you would normally add it to the dashboard.
Try it out, let me know if it worked for you as it did me.
To change the z-index, open the custom CSS section (click the cog icon in the top right, select Advanced, CSS), then paste in something like the example below. I have shown an example of applying this to two tiles in one line, but you can reference just one if you want. The z-index value of 1 I have used was for tiles displaying images on my dashboard. Other tiles that I wanted to appear on top of the image tiles had a higher z-index value, e.g. 10.
#tile-38, #tile-40 {z-index: 1; !important;}
I just tried this and it actually had the total opposite effect. It's now on top of everything.
Maybe I need to re-read your question...
Try zero?
Turns out I had to set the desired background tile AND the foreground tiles.
1 Like
Just a reminder for dev's and users who may not be as fluent in CSS/HTML as others - back in 2014 or so color codes specified in css whether inline or by external have been supporting an Alpha channel that allows for transparency.
Syntax
Eight-digit hex notation consists of a hash symbol (#), followed by eight characters. The first six characters represent the RGB (red, green, blue) value of the color, the last two represent the alpha chanel of the color.
So, the syntax is like this:
#RRGGBBAA
- The
RRrepresents the red component. - The
GGrepresents the green component. - The
BBrepresents the blue component. - The
AArepresents the alpha channel.
So for example - You can specify Red as :
#FF0000
When we apply a 4 hex value pair we can make the item (text, background color etc) transparent or opaque to varying degree's. so:
#FF000088 gives us a Red with 1/2 level opacity. (All my drivers support this btw!)
Caveat: When you use a full opacity (#xxxxxx00) you get a fully transparent object. However IT IS STILL THERE so when you take up space and can't figure out why a table won't format well - look for invisible text 
1 Like
is it possible to make the entire background of a dashboard transparent? I have a dashboard I am adding into another one via iframe and really want the whole thing to have more of a free standing elements feel.
I have tried rgba(0,0,0,0) in multiple places with no success. Is this maybe a JSON only thing?
Have you tried
.dashboard {
background-color: transparent
}
No I didn't but that didn't work either. I also tried that with the !important tag.
Are you using a custom color for the background on the settings box, if so try removing it and replacing it with the word transparent (it's just a place holder) and then add to CSS @thebearmay snip above.
4 Likes
GREAT! It works! Thank you!
I'm sure I will be chiming in about something else before too long. 
1 Like
We are all learning along the way. One more trick, if you want to control the transparency, you can do so be replacing
background-color: transparent
with
background-color: rgba(0,0,0,0.3)
the 0.3 defines how much transparency there should be.
3 Likes
I had seen this question about background color then later saw all the answers. An interesting trick for sure - I was going to suggest just using .wrapper which also works. I dislike using classes except in more complex structures but as there isn't an ID you've no choice.
Taking it further, take a peek at Smartly which gives a much more robust granular control.
I have and the issue with that is that I am so deep with this way that the idea of starting over is not something I would do.
I completely understand - and not to kick a dead horse - but smartly is a mod to HE dashboards, not a complete change - really just an enhancement.
1 Like
