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

Adding "!important" worked (sort of). Unfortunately it changed this:
image to this: image

I will go back to the beginning of this thread figure out how change font on a section by section basis instead of trying to be lazy and do it all with one CSS setting.

@stephen_nutt ah, yes, global changes with !important can have some not so desired effects. This thread should help you define the right groups of elements to change. :slight_smile:

Is there CSS to remove the "icon helper text" per tile rather than the entire dashboard?

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


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


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.


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;

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

.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


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


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 > {
 position: relative;  
 top: 3px !important;


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

 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?

Download the Hubitat app