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

[wayne.pirtle]

Thanks for stepping in with that @william2. I was trying to do it "on the hoof" and remembered the unique div structure of the switch.

Now that I have had more time to think about this, here is an alternate solution.

#tile-7:has(.tile-primary.on) {
    background-color: rgba(60,60,60,0.4) !important;
}

Notes about using :has.

1. This doesn't work in Firefox. It is a known bug, and its resolution is dependent on the resolution of a number of other bugs. If you use Firefox, see the approach @william2 described.
2. Edge will respond to it the way you expect, even without the "!important" keyword, BUT inspecting the page will show the parser indicates it should NOT be displaying it.

CSS is amazing, but it can tie your brain in knots with ease. Try to not get frustrated by it. I have personally spent hours trying to figure out how to select a particular element, so I could modify it for a special situation.

[limeypride]

Fabulous thread--thanks to all!

QQ: does anyone know why the tiles that use the template 'variable string' don't honor the following CSS (it works fine for every other template I've used):

}
#tile-217 .tile-title{
visibility: hidden !Important;
display: none !Important;
font-size: 20px;
}

... the tile's title is still displayed and the body text font size is unchanged.

[sburke781]

There's likely a good reason... but I would need to look at it in more detail to provide an accurate answer. My suggestion would be to get familiar with drilling through the dashboard structure in what is commonly referred to as the Developer Tools, at least in Chrome. If you drill into the structure and come down to the point of the tiles you will hopefully see the references to classes and make some links to how the Custom CSS is applied. If you are somewhat new, then it would be understandable that it makes no sense.... (The reason behind my utility in this space that I have neglected in recent times...)

If you are still stuck in the next couple of days, give me a poke and I can provide some more detailed instructions on what I am describing.

[wayne.pirtle]

@limeypride I just found your question. I have used a number of variable tiles and encountered this same issue.

The reason it doesn't work is the structure of the variable tile is a bit different from the device tiles. I put to gether a quick dashboard to demonstrate this.

The tile on the left is a variable tile, and the tile on the right is a device tile.

Looking at the title object in the device tile first shows it has a CSS class of .tile-title in this line of HTML.

Now let's look at the variable tile.

Notice its title area has a different class. Its CSS class is .flex-grow-0.w-full as shown in this line of the HTML.

Here is how you can hide the "title" of a variable tile.

Be sure to change the tile number, 14 in my case, to the tile number of your vaiable tile.

I also noticed in my work on putting together this reply that there is a built-in method for renaming the tile. Clicking on the tile will give you the opportunity to rename the variable. Fortunately, it renames it everywhere it is used. In actuality the variable has an index reference that is the used behind the scenes, so the name is merely used to help the human keep track of its purpose easier.

BTW, @sburke781 has done an amazing job with his Simple CSS Editor.

[sburke781]

Note to self to add this to the "hide tile titles" option in my CSS Editor. Like most of the features of the editor, I am simply implementing the hard work of others here.... Nice work @wayne.pirtle .

[nbrew]

I am trying to add a gradient background to my dashboard. I did this once and, for the life of me, cannot remember what I did to make it work. Did anyone else do this?

[sburke781]

The background of the dashboard I expect is a slightly different element that needs to be targeted, compared to the tiles, but the CSS references should still be relevant.

I'm pretty sure I've done this before as well, so will try and take a look after work.

You could try either adding the gradient code to the background color option in the dashboard Options, or set the background color and then look for it in the dashboard source to find the element to target in the custom CSS.

[sburke781]

@Tree.Log - I wasn't suggesting to update the JSON directly, just update the configuration in, what I now realise I quoted as the incorrect tab of Options, it should have been Grid.

If my memory is right, I think I avoided the CSS option previously for my own dashboard and produced a JPG with a gradient applied and used that as a background image.

At this time of night that is likely my suggestion.... Perhaps by the weekend I (or hopefully others) may have a better solution.

EDIT: Try adding something like this to the Custom CSS ....

#app { background-image: linear-gradient(red, yellow); }

Adjust the gradient settings as you want. You can refer to @Tree.Log 's link to W3Schoolds like I did

Another one to add to the list for inclusion in my CSS editor...

[nbrew]

Wonderful, thank you for pointing me in the right direction! I like doing an offset radial gradient that mimics the look of the Home.app. I ended up with this;

#app {background-image: radial-gradient(ellipse at 85% 90%, #fdbb2d, #b21f1f, #1a2a6c);

At some point, I'd love to make a green CRT-like dash with line art buttons, or maybe a mnemonic diagram like in this Chernobyl control panel:

[user996]

I had a weather dashboard that's been running fine the past few months with a black background and tiles with a 0.7 alpha, but about 2 days ago these red tiles which mark the single tiles started to show up behind my Dashboard tiles. Not sure if something changed on the Hubitat software side to do this, but it doesn't show up on other Dashboards. Anyone have a solution or idea if some kind of CSS is being ignored? Thanks!

[Sebastien]

I’ve got the same thing on one of mine. My wife was just asking me what’s going on with the dashboard… I didn’t even realized she ever looked at it or used it! lol

Are you using Smartly?

@gopher.ny, any chance this might be related to the latest dashboard update with .150?

[user996]

Nope, no Smartly here, but this particular dashboard is being used on an old Fire tablet using Fully Kiosk Browser to display it via a local Dashboard link. I don't see the red tiles when I view it on my laptop's web browser or my Android phone though. Did we unlock a special KITT mode?

[Sebastien]

@user996

Did we unlock a special KITT mode?

Lol. Maybe!

[user996]

It looks like it's possibly related to the update using a new CSS (See post 5) 2.3.9.150 update caused issues with dashboard/s on iPad Air - #5 by user1025

I guess I'll see if I can get this old tablet to update so it is compatible. If that doesn't work, maybe I need to make one big dummy tile that is all black that the other tiles overlap.

[user1025]

@user996

If that doesn't work, maybe I need to make one big dummy tile that is all black that the other tiles overlap.

lol

[Sebastien]

Yea, that seems to be the case. I just tried on a newer iPad and don’t have that issue with it.

Will try the big tile in the background - Hopefully, that will fix the issue.

[user996]

RIP using cheap old tablets off Ebay as dashboard displays.

[user996]

I got it to work. It's truly the most kludgy way, but reminds me of the old days of "we can't get this error window to go away, let's just put a background color window over it so you don't see it anymore."

I uploaded a 1x1 black (or whatever bg color you want) pixel image file to the Hubitat through the file manager. Then I found the lowest numbered tile on that Dashboard and changed it to an Image tile using the 1x1 pixel as the Image. I moved that tile to position top left and then changed its size to match the whole dashboard.

Last thing was to make a new replacement tile duplicating the old function of the tile that was used to create the background. I attached a photo with the image tile 1 column smaller than the dashboard to show it successfully covering up all the other red blocks.

[user996]

Latest update has fixed this issue, so now I can delete the big bg file that was covering up the red tiles. Thanks!

[Haven]

Anyone know how I can align the Groups on the left to be left aligned?

I'm also struggling with getting the keypad to fill the entire tile that it's sitting in. The top and bottom padding doesn't seem to go away regardless of what I set in the CSS.

Here's the CSS I have so far, all of the tiles are currently TEXT but will eventually be replaced with links to individual dashboards.

#tile-30 .tile-title {
display:none;
object-fit: cover;
background-color:transparent;
border: none;
}
#tile-30 .tile-contents {
padding: 0px;
height:100%;
width:100%;
background-color:transparent;
border: none;
}
#tile-30 .tile-primary {
padding: 0;
height:100%;
width:100%;
object-fit: cover;
background-color:transparent;
border: none;
}

#tile-11 .tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-11 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}