I figured out the mystery of vertically centering string variables. With @BrianP's awesome help, the CSS below works, but only if you use "display: none" rather than "visibility: hidden" when hiding the tile name text at the bottom of the cell. I have no idea why this is required, but I just tried everything I could think of and this was the combo that worked. Hope this helps the next person.
.variable-number .justify-center {
padding: 0;
display: table;
width: 100%;
height: 100%;
}
Curious if anyone has cracked the code on manipulating an inbox box like @markbellkosel84's example above? Like him, I'd like to change the size, but I'd also like to keep the input box horizontally centered in the tile when it's interacted with. Every time I try to change the value in an inbox (even a value with one or two characters), it scrolls off the left edge of the tile, rendering the input box useless.
If you want the text input box bigger, I might use something like this:
.variable-string .justify-center input.text-black.outline-none {
font-size: 2rem !important;
}
Since the input box has font-size: 1rem; coded in the HTML instead of in the CSS, you need to use !important.
Hmmm this didn’t change the size or position of the input box.
I only tried this in Firefox, where it worked fine on the input box.
If you wanted to change the text that appears before clicking to get the input box, it would also be something like:
.variable-string div.flex.flex-col.w-full.text-center.h-full div.flex.flex-grow.w-full.justify-center.items-center {
font-size: 2rem !important;
}
If I put both of those in,. I got a larger text size, and a larger input box after clicking the text. For example, default:
With custom CSS:
.variable-string .justify-center input.text-black.outline-none {
font-size: 2rem !important;
}
.variable-string div.flex.flex-col.w-full.text-center.h-full div.flex.flex-grow.w-full.justify-center.items-center {
font-size: 2rem !important;
}
You can also make that first bit of CSS more specific, but what I included got the job done.
I really appreciate your multiple attempts at helping me, but I just can't get this to work, and I don't want to impose further. My tile is a number variable, so when I used your CSS, I replaced variable-string with variable-number, but still no joy.
.variable-number is different from .variable-string. Doesn't this work?
.variable-number .tile-contents {
padding: 0;
display: table;
width: 100%;
height: 100%;
}
I noticed that this CSS works for a device that is a global variable (number), but doesn't work for a Hub Variable that's a number. If you know what I mean.
Guess that's my work around. I could add a connector to my hub variable and use that device in the dashboard, rather than using the variable itself. For some reason, CSS seems much more difficult when the tile comes from a variable rather than a device.
Thanks again for your generosity.
Something interesting I've just run across - the following construct:
#tile-3 {.tile-title {visibility: visible}; .tile-primary {visibility: hidden}}
works exactly as you'd hope when viewed through the Hubitat android app - both of the "visibility" modifiers are applied.
But, when viewed through a browser (every one I've tried, PC and 'droid), neither modifier is applied - it's as though the line didn't exist. Splitting it into two, like
#tile-3 .tile-title {visibility: visible}
#tile-3 .tile-primary {visibility: hidden}
works perfectly on both app and browser(s). 
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.
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.
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;
}
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 
Download the Hubitat app
