The Noob's (in)complete guide to CSS for Hubitat

[mluck]

@BrianP

It's a difference in the tile-contents div for the link tile vs. the flex div in the text tile. The text tile contains a div that has display: flex and the link tile has display: table. The div containing the link tile is not centered on the tile, while the flex tile is. It has to do how it was designed to deal with the tile title and edit div in the link tile.

Maybe try adding this:

.tile-contents {
  padding: 0;
  display: table;
  width: 100%;
  height: 100%;
}

It will make the .tile-contents div take up the whole space, so it could overlap with the .tile-edit and .tile-title divs, so it depends on what you want. But it would allow the text to be centered. I'm using that on my dashboards, for basically the same reason. I don't care about the tile-edit divs since I don't use them most of the time, and I don't use the titles, either.

You could also do:

.link .tile-contents {
  padding: 0;
  display: table;
  width: 100%;
  height: 100%;
}

That way it would be specific to the link tiles. You can also adjust padding and margin, but this is what I use.

Boy, this is from a long time go! @BrianP graciously helped me figure out how to vertically center text on a Link tile or a Text tile. Now I’m trying to do the same with a Hub Variable tile. Can’t get it to work.

Here’s the CSS @BrianP helped me with last time that I’m now trying to translate for Hub Variables. Any ideas? For bonus,I’m also trying to append unit-of-measure text to a hub variable. TIA!

/* vertically center Link and Dashboard tiles */
.link .tile-contents {
padding: 0;
display: table;
width: 100%;
height: 100%;
}
.dashboard .tile-contents {
padding: 0;
display: table;
width: 100%;
height: 100%;
}

[mluck]

@markbellkosel84

make them look like real buttons.

Can you share the css that gives it a true button look and feel?

[BrianP]

@mluck

For a Variable Number tile, it should be:

.variable-number .tile-contents {
padding: 0;
display: table;
width: 100%;
height: 100%;
}

Variable Boolean is similar, using .variable-bool, and Variable Date uses .variable-date, Variable Decimal uses .variable-decimal, and Variable Time uses .variable-time in the CSS selection.

It looks to be different for a Variable String tile. This won't work for that. Try right-clicking the tile and choosing "Examine" or "Inspect" on the element. Maybe then you can find the correct CSS selector to make this work. It might be something like .variable-string .items-center or .variable-string .justify-center instead of .variable-string .tile-contents.

Good luck!

[mluck]

Appreciate the ideas @BrianP!

I always struggle finding the correct selector from inspect. Take this variable-string tile as an example. When I expect, I see this (below). Where do I look (and how far up the hierarchy do I look) to try to find the correct version of .variable-string, because .variable-string doesn't seem to work.

EDIT: I noticed in the Inspect view that was a little info note that said, "The display-table property prevents justify-content from having an effect. Try setting display to something other than table." What are the other options?

[BrianP]

You might try adding an exclamation point to force display table... Maybe for the other styles also, removing the exclamation points one at a time if that works until it breaks again.

The CSS selector with .variable-string .text-center will select an element with the class .text-center that is also contained within an element with the class .variable-string. You could also use .text-center as the CSS selector, but that would also modify any element with that class regardless if it overlaps with a .variable-string element or not.

You're looking at the correct divs, starting with tile-48, including the next two divs. You want to pick a class in one of those divs to use in the CSS selector. I'd use text-center, justify-center, or items-center, since the other classes (i.e. flex, flex-col, etc) seem to be less specific.

[william2]

@mluck

variable-string tile

Hi @mluck - Cannot promise you I can help you, but for us visual folks would you mind posting a picture of the tile you are speaking of and identifying the item you are trying to center?

[mluck]

I appreciate the question. Here's one (er, two) of many examples where I'm using a tile on a dashboard to show a hub variable. This particular use-case is tracking whether the dogs have been fed by my oh-so-irresponsible teenagers ;). Note how I can't get the text to vertically center no matter what I try.

[mluck]

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%;
}

[mluck]

@markbellkosel84

Here's an interesting one....

Variable interactions. I assume I can change how they appear. Question is...how?

I figured out how to make it wider but I want to make it overall bigger.

#input-0.text-black.outline-none

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.

[BrianP]

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.

[mluck]

Hmmm this didn’t change the size or position of the input box.

[BrianP]

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.

[mluck]

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.

[BrianP]

@mluck

.variable-number is different from .variable-string. Doesn't this work?

.variable-number .tile-contents {
padding: 0;
display: table;
width: 100%;
height: 100%;
}

[mluck]

@BrianP

.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.

[jwjr]

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).

[sburke781]

For further frustration try looking at overflow

[cj_rezz]

@william2

#tile-14 {
    background-color: rgba(0,0,255,1) !important;
}

#tile-14 .on {
    he-switch_2_flipped; color: black;
}

#tile-14[style*="background-color"] {
    background-color: rgba(255, 0, 0, 1)!important;
}

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...

[sburke781]

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?

[cj_rezz]

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.