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
I am working on something where I can enter a grocery item as a variable and add it to Alexa using the Custom Command. However, the text entry box is narrow. Can it be enlarged to entire width of tile using CSS? I am struggling looking in the code when Inspecting to determine code for this.
Obviously, it's fine once I hit Save but I would like to be able to see entire text while entering.
I was asked (by @Gdust) about the look of the dashboard links on some of my dashboards, so thought I would post the details here:
The tile at the bottom are Dashboard Link tiles with the following CSS to remove rounding and placing the border at the bottom. The first set of tiles are the majority of the links with a grey line underneath, and the dashboard being displayed has a white line underneath.
/* ****** Dashboard Links ******** */
#tile-11, #tile-12, #tile-13, #tile-14, #tile-15, #tile-16 {
border-radius: 0px !important;
border-bottom: 3px solid gray;
background-color: rgba(0,0,0,0) !important;
}
#tile-17 {
border-radius: 0px !important;
border-bottom: 3px solid white;
background-color: rgba(0,0,0,0) !important;
}
The only other things of note is the TV "tile", which is just a set of overlayed tiles (yes, they aren't restricted to sitting next to one another...).
/* TV Background Accent Tile */
#tile-4 { background-color: rgba(234,234,234,0.25) !important; }
/* TV Tile Title */
#tile-7 { border-radius: 0px !important;
border-bottom: 3px solid white;
color: rgba(230,230,230,0.7);
background-color: rgba(0,0,0,0) !important; }
The TV station logos are just PNG images at this point that had transparent background already. I plan to have them trigger activities on my Harmony hub.
There's a few other font colours and sizes I have adjusted on other tiles, and some template settings, so can post some of those if anyone is interested. I may do another wiki page for this when it is more complete.
3 Likes
Hi @mark.cockcroft, apart from lamenting the time I spent on formatting my dashboard I didn't actually answer your question...
What type of tile are you trying to centre?
Thanks for responding, it is actually for the iframe advanced driver, when you press it at the moment it comes up in the top right, you can move it with px, but I thought there should be a command to center it .
They manage to do it with pop ups on the Internet some how
I've managed to centre it at the top of my screen, but not centre it entirely. I plan to play with this some more myself, I will post back when I have something more.
1 Like
Could try something like:
position:absolute;
top:50%;
left:50%;
width:400px; /* change to actual width */
height:400px; /* change to actual height */
margin-left:-200px; /* change to negative 1/2 of width */
margin-top:-200px; /*change to negative 1/2 of height */
1 Like
