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

Very likely, yes. With "icon helper text", what do you mean? For a switch it would be the text "on" and "off", right? In general it is just a matter of prepending your selector with something like this

#tile-57

for the tile-title:

#tile-57 .tile-title {

Per tile-type would be a different thing. That is a bit more complex.

I want to take "Open Closing Closed Open" off Garage

image

found it here

1 Like

Hi, collective wisdom of the forum,

Is there any way to suppress/remove the top banner on a dashboard (the home icon, green tick, + and settings gear icon)? I want to add multiple dashboards into iframes on html pages and they look a bit daft with all these top banners repeating everywhere.

Thanks.

woops - found it. Thanks.

@Angus_M I was given his code which allow the icons only to remain, but hides them in the bottom right of dash. Handy to still allow access to changes but "outta sight"

.dashboard div .header {
    position: fixed;
    bottom: 0;
    right: 1em;
    z-index: 999;
    opacity: .2;
    zoom: .6;
    -moz-transform:scale(.6);
}

.wrapper {
    height: 100%;
    margin-top: 0;
    padding-top: 1em;
}

.dashBack,
.dashName {
    display: none;
}

.dashboard div .header>.flex-auto.justify-end,
.dashboard div .header>.flex-auto.justify-end>.flex {
    display: block;
}

Change the last line to " display: inline-block; " for horizontal.

image image

3 Likes

Ok great, thanks.
Works beautifully!

1 Like

Been playing more with CSS and figured out a few things I wanted to share

To change the thermostat up/down icon size...

.thermostat .pl-3 {
  font-size: 55px !important
}

.thermostat .pr-3 {
  font-size: 55px !important
}

image

This one resizes the music player icons and moves a few things around to make it more usable. I am using this with smartly YMMV

}
#tile-17 .material-icons {
   position: relative;
    top: -7px;
   font-size: 43px !important;
}
#tile-17 .tile-primary > div.dimmer > div.trackDescription {
 position: relative;  
 top: 15px !important;
}
#tile-17 .tile-primary > div.music-player.playing {
 position: relative;  
 top: 3px !important;
}

image

1 Like

is there a way to set all tiles transparent value to the same?

@mark.cockcroft After fusing with this for a while I think the answer is 'sorta, but not really'.

Are you looking to make the background only transparent? Tile background transparency is set with the background-color attribute (from what I can see) as a rgba value, with 'a' being Aplha the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

If you use this...

.tile{
 background-color: rgba(125, 20, 50, 0.3) !important;
}

it will change every tile, but it will also change the color of every tile.

You can also add multiple tiles to each line of CSS like....

#tile-0, #tile-1 {
 background-color: rgba(125, 20, 150, 0.3) !important;
}

that will let you assign separate colors to certain tile types (maybe more helpful)

This one will do as you say and make the entire dash transparent, but EVERYTHING, which I do not think you want (do not go lower then 0.5 or you won't be able to see anything on the dash!!) I ruined a test dash doing this. Posted for community knowledge and a "do not do what I did "

div {
   opacity: 0.9 ;
}

Always keep backups of important dash JSON's.

1 Like

We need a "Don't try this at home kids" icon too :joy:

1 Like

I was looking for a way to set them all the same, but I think this will cock up the on/open/motion states as well, had to go into each one a tweet it per state

where in the code would i drop it

It won't do what you want it to. All dash items, including foreground text, icons, pop-up windows, will be made opaque. It will look all washed out. If you go too far you will not see anything and you will ruin your dash. Back up your JSON if your even remotely thinking about doing this.

You have been warned. Don't moan when it breaks your dash. Put it in....

Settings 'gear' > Advanced > CSS

Correct which is why you should not do this via CSS. The CORRECT way to actually do what you want is it go into each template and set it there. I know it is a pain when you have to it do it for each device type template. However that is the correct way to set transparencies, not via CSS. I do it on this dash and it looks great, but it was a manual process via

Setting 'gear' > Templates > set each one you need for each state.

You should get a long use out of your dashboard, do it right. You should not look for shortcuts to doing things the right way. Just MHO, your hub, your dashboard.

your right ill go through each one

1 Like

Getting there thanks

1 Like

Nice start! Consider using 'Text' tiles to add "Rooms" like above, that might help your long titles (you could remove 'kitchen' from a bunch of them.

Since this is no longer CSS related we should take the conversation to another thread. Like the show off thread.

Yea I think I'm going to drop the weather free up a bit more space to see the live stream

Guess you can't change font colour on mass either

Anybody figure out how to use CSS to change the size of a single tile without changing the number of columns and/or rows in the dashboard?

Assume you mean other than making the til 1x2, 2x2, or 2x3? Could you provide a use case/example?

Yes exactly. Let's say you've already setup a dashboard. And it has a lot of tiles. And you want to make ONE tile half height. One way you could accomplish this is by doubling the number of rows, then doubling the height of every tile, EXCEPT the one you want half height. Viola, done. Except you just spent a ton of time pointing and clicking.

Instead, can I go into the CSS for the one tile in question and shrink it? Just like you can change the size of text or an icon, can you change the size of the tile itself, or at least the boundary line?

This would also support weird cases, like if you wanted to change the tile height not by half but by 37%, for example. (OK, not sure why you'd ever want to do that, but you get the idea :crazy_face:)

I don't think that is possible. Only done right, or poorly faked.

As far as I know it CSS see the dashboard as a grid

no tile can be smaller then 1/ 1/ 1 /1. It will not accept any decimal values.
image

Like you say "the right way" to do it is to make your grid smaller, and increase all other tiles. You may be able to see behind the grid above I have a lot of tiles on a very small grid and work up from there. None of my tiles are 1x1 but the small size gives me freedom to work with all different sizes.

This was done after my dash was "finished " and I had this to work with.

As you can see, I had a bunch of tiles myself, so I know the challenge can seem daunting. However it's not that bad, and well worth it in the end. The process (smartly or not) is documented on this thread.

If you want to "fake it" the only thing I can think of is to make the border invisible and the icon smaller. This would give the appearance of a smaller tile, but it would not change the actual space on the grid it consumed.

However I have never claimed to be an expert, so I'll be watching to see if someone proves me wrong. :wink: