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

📱 Mobile Apps
146

Probably because your background size is set to cover, so they look the same.

Try the following:

html {
    background-position: right center !important;
    background-size: 300px 100px !important;
}
2 Likes
147

@BrianP Thanks a ton. it worked !

149

I'd have to look more closely to know what's going on, but I'm guessing that you've centered a div inside another div that is not centered vertically. You might need to go up the hierarchy.

1 Like
151

Try this:

#tile-93.tile.level-step .tile-primary > div:nth-child(1) { display: none; }
or:
#tile-93.tile.level-step .material-icons.he-settings1 { display: none; }

You can only us collapse on table elements. Using it on a div or an icon, it ends up being visibility: hidden, which means the element is hidden but still takes up the same amount of space.

If you use display: none it just disappears completely.

1 Like
153

Glad to hear!

I typically look at:
https://www.w3schools.com/css/default.asp

and:
https://www.w3schools.com/cssref/default.asp

I always need refreshers on CSS when I'm trying something.

3 Likes
154

Quick question, is not possible to change the background color of a individual tile? It is a "link" device. I tried this:

#tile-17 .tile-primary {background-color: rgb(200,200,200) !important;}

155

What do you mean by that?

Whipped up a quick dashboard and this works perfectly fine:

Screen Shot 2020-11-16 at 8.27.59 PM
Screen Shot 2020-11-16 at 8.27.59 PM845×438 21 KB

1 Like
156

Thank you, it was ".title.primary" that I was the mistake. Do not know why I put it there.
The tile is a dashboard link basically.

157

In a dashboard link tile, is there a way to hide the name of the dashboard in the tile that appears right in the center of the tile?

158

For most I believe you would reference the class .tile-title

and set that to display:none;

159

Argh, this seems so simple, but I'm stumped. I'm trying to use CSS to vertically center the main text on a Text Tile or Link Tile, in a way that keeps it vertically centered across different screen formats. In the generic HE dashboard, it looks like the bottom of the text is vertically centered by default, but the text itself isn't vertically centered. Anyone else cracked this?

160

You may be vertically centering the text, but the div it is contained in isn't vertically centered. Make sure the containing div is centered relative to the tile. I'd have to look at the structure of those tiles to figure out what the CSS would be, this is just a hint for now.

162

I played with the vertical centering some more and here's what I noticed....

  • when you create a text tile, it vertically centers the text by default.
  • when you create a link tile. it (oddly) vertically centers the bottom of the text by default.
    As a result the text of equal-height tiles don't align with one another, leading to sloppiness of the dashboard visual.

I looked in the "inspect" view and I can see the div, but I can't figure out how to vertically-center it. I tried the below CSS, but no joy.

#tile-[tilenumber] .tile-primary > div {
vertical-align: middle;
}

163

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.

1 Like
164

First I would like to apologize for asking this question, it's probably been answered somewhere, but for the life of me I can't find it. I have been working on my tiles and have been learning CSS. I can see we have some folks here with great knowledge and I have used many of their tips!

I would like to change the label on the thermostat tile like you can on say a switch tile but I don't understand the difference. Can anyone show me how to accomplish this with CSS?

165

If you want to add text to the front of the label one way

#tile-xx .text-center::before {
         content:"Hallway "
         }
166

Nice, I will add that to tip list I am buidling, but is there a way to replace the text on the tile, I don't want to append it. Specifically the thermostat tile. I have gotten the others done (switches, doors, etc).

167

The label is driven from the device name, and you can either hide, prepend or append to it using CSS (also color and size options).

168

Can I 'hide' it and then replace it?

169

@shawn.foist Not really but you could do this:

#tile-xx .absolute{
         font-size:0;
         }
#tile-xx .absolute:after {
          content:"Hallway";
          font-size:12px;
         }
2 Likes