For further frustration try looking at overflow 
I'm trying to do something similar to this but I'd like a certain switch (tile# 10) to have a white icon and text whether it's on or off but when it's on have the background color rgba(255,0,0,0.4) and when it's off have the background coloring rgba(60,60,60,0.4).
How would I go about this? I've tried tweaking this CSS code but no luck...
Is it only the one tile where you want that to be the case and you have others using the same template where you don't want that colouring to be applied? Where I'm heading is, could you just use the template colours in the options rather than CSS?
Correct, it's just a single switch that I want to act this way. The rest of the swtiches should follow the template I created.
There will be something here, I feel like I have been involved in working this through with someone else, using posts from others early on it this topic. I'll see what I can find over the weekend unless someone else comes up with a solution for you or you work it out yourself.
1 Like
I think what you are looking for is:
#tile-14 .tile-primary.on {
background-color: rgba(255, 0, 0, 0.4)
}
#tile-14 .tile-primary.off {
background-color: rgba(60,60,60,0.4)
}
You may need to add !important. this should be close. I can’t test it, since I’m doing this from my phone.
1 Like
Thanks @wayne.pirtle, it's close but not quite. For some reason the red background is a smaller square but a larger dark grey square remains.
Also I see my initial post was backwards, I apologize. I'd actually like to have a white icon and text whether it's on or off but when it's off have the background color rgba(255,0,0,0.4) and when it's on have the background coloring rgba(60,60,60,0.4). Sorry for my mistake!
That's right. I believe what is happening there is that the DIV with the tile-primary class sits inside the larger tile DIV, so the change to the background-color is only being applied to the smaller / inner DIV, not the entire tile.
I found one of the earlier posts from @BrianP that I had in mind, which is very similar to what you started with.
One thing that is missing from this specific post, and I believe is what makes this work, is that you need to set the default colors in the template settings in order for the "style*=..." part to work. My interpretation of why and how this works is that the state of the switch is indicated on the inner DIV I was referring to earlier, through the use of a class on that DIV, but there is no equivalent class added to the tile DIV, so we cannot use that like we would normally. What is happening in @BrianP's solution is the template colors that are set on the outer tile DIV, help to indicate the state of the switch, and this is what is being used in the CSS when changing the tile background color.
For example, you set the "on" color for the template to be rgba(255,0,0,0.8), then in the CSS you use something like:
#tile-1[style*="background-color: rgba(255, 0, 0, 0.8)"] { background-color: rgba(0, 200, 0, 0.67) !important; }
to change the color for on, etc.
I say all of this without having tested it myself yet.... But I'm sure I've used it previously and the approach worked.
@cj_rezz the key for formating the "on" state is [style*="background-color"], the below should work for you just change out the tile number.
/* ON */
#tile-7[style*="background-color"] {
width: 120px;
height: 120px;
background-color: rgba(60,60,60,0.4) !important;
}
/* OFF */
#tile-7 {
width: 120px;
height: 120px;
background-color: rgba(255,0,0,0.4) !important;
}
2 Likes
Ah, so the template color settings are likely a more generic approach, but for a typical switch, the background color is only set in the on state for a switch tile? And left out when in the off state?
lol, I was just as perplexed at first and I believe this is the only tile I have come across where this workaround is needed.
As you pointed out when you just set the background-color only the first div is touched.
[style*=] is basically looking for all attributes with a value of background-color and changing them rather than just the first div in that element set.
To answer your question, I never really looked into it but I believe there is a default color for both states that can be overwritten through the template feature, but I've never used it.
Now, I say this while drinking wine in 110-degree weather 
1 Like
Thanks for stepping in with that @william2. I was trying to do it "on the hoof" and remembered the unique div structure of the switch.
Now that I have had more time to think about this, here is an alternate solution.
#tile-7:has(.tile-primary.on) {
background-color: rgba(60,60,60,0.4) !important;
}
Notes about using :has.
- This doesn't work in Firefox. It is a known bug, and its resolution is dependent on the resolution of a number of other bugs. If you use Firefox, see the approach @william2 described.
- Edge will respond to it the way you expect, even without the "!important" keyword, BUT inspecting the page will show the parser indicates it should NOT be displaying it.
CSS is amazing, but it can tie your brain in knots with ease. Try to not get frustrated by it. I have personally spent hours trying to figure out how to select a particular element, so I could modify it for a special situation.
3 Likes
Fabulous thread--thanks to all!
QQ: does anyone know why the tiles that use the template 'variable string' don't honor the following CSS (it works fine for every other template I've used):
}
#tile-217 .tile-title{
visibility: hidden !Important;
display: none !Important;
font-size: 20px;
}
... the tile's title is still displayed and the body text font size is unchanged.
There's likely a good reason... but I would need to look at it in more detail to provide an accurate answer. My suggestion would be to get familiar with drilling through the dashboard structure in what is commonly referred to as the Developer Tools, at least in Chrome. If you drill into the structure and come down to the point of the tiles you will hopefully see the references to classes and make some links to how the Custom CSS is applied. If you are somewhat new, then it would be understandable that it makes no sense.... 
(The reason behind my utility in this space that I have neglected in recent times...)
If you are still stuck in the next couple of days, give me a poke and I can provide some more detailed instructions on what I am describing.
1 Like
@limeypride I just found your question. I have used a number of variable tiles and encountered this same issue.
The reason it doesn't work is the structure of the variable tile is a bit different from the device tiles. I put to gether a quick dashboard to demonstrate this.
The tile on the left is a variable tile, and the tile on the right is a device tile.
Looking at the title object in the device tile first shows it has a CSS class of .tile-title in this line of HTML.
Now let's look at the variable tile.
Notice its title area has a different class. Its CSS class is .flex-grow-0.w-full as shown in this line of the HTML.
Here is how you can hide the "title" of a variable tile.
Be sure to change the tile number, 14 in my case, to the tile number of your vaiable tile.
I also noticed in my work on putting together this reply that there is a built-in method for renaming the tile. Clicking on the tile will give you the opportunity to rename the variable. Fortunately, it renames it everywhere it is used. In actuality the variable has an index reference that is the used behind the scenes, so the name is merely used to help the human keep track of its purpose easier.
BTW, @sburke781 has done an amazing job with his Simple CSS Editor.
3 Likes
Note to self to add this to the "hide tile titles" option in my CSS Editor. Like most of the features of the editor, I am simply implementing the hard work of others here.... Nice work @wayne.pirtle .
3 Likes
I am trying to add a gradient background to my dashboard. I did this once and, for the life of me, cannot remember what I did to make it work. Did anyone else do this?
The background of the dashboard I expect is a slightly different element that needs to be targeted, compared to the tiles, but the CSS references should still be relevant.
I'm pretty sure I've done this before as well, so will try and take a look after work.
You could try either adding the gradient code to the background color option in the dashboard Options, or set the background color and then look for it in the dashboard source to find the element to target in the custom CSS.
1 Like
@Tree.Log - I wasn't suggesting to update the JSON directly, just update the configuration in, what I now realise I quoted as the incorrect tab of Options, it should have been Grid.
If my memory is right, I think I avoided the CSS option previously for my own dashboard and produced a JPG with a gradient applied and used that as a background image.
At this time of night that is likely my suggestion.... Perhaps by the weekend I (or hopefully others) may have a better solution.
EDIT: Try adding something like this to the Custom CSS ....
#app { background-image: linear-gradient(red, yellow); }
Adjust the gradient settings as you want. You can refer to @Tree.Log 's link to W3Schoolds like I did
Another one to add to the list for inclusion in my CSS editor...
1 Like
Wonderful, thank you for pointing me in the right direction! I like doing an offset radial gradient that mimics the look of the Home.app. I ended up with this;
#app {background-image: radial-gradient(ellipse at 85% 90%, #fdbb2d, #b21f1f, #1a2a6c);At some point, I'd love to make a green CRT-like dash with line art buttons, or maybe a mnemonic diagram like in this Chernobyl control panel:
2 Likes
