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

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:

Yes, the layout is using a grid, so you can't make one less than 1x1.

However, for a given tile you could change the layout and position it independently using CSS. It won't work well with the overall layout, and could cause problems, but it is possible. You can do lots with the custom CSS option.

I wouldn't bother, and would increase the number of grid elements as TechMedX said, but if you know enough CSS you can make the tile div do what you want.

Thanks for the feedback. Think I'll suck it up and just increase the grid count.

1 Like

If you want a fall back. Copy your entire JSON to a new dash before you start. If you get sick of it, you can use the old one until you complete the transition. Or just forget the safety net and dive in! Lack of a dash will be motivation :rofl:

1 Like

FYI, for positioning something like tile #0:

#tile-0 {
  position: absolute;
  left: 50px;
  top: 50px;
  height: 200px;
  width: 200px;
}

That would position a tile relative to the previously positioned ancestor. For tiles, that would be relative to the wrapper div containing all the tiles. If you don't want it to scroll, it can be something like:

#tile-0 {
  position: fixed;
  left: 50px;
  top: 50px;
  height: 200px;
  width: 200px;
}

I'd recommend the larger grid, though. The px element can be replaced with other length units, like %, em, cm, pt, vw, etc. For length unit examples see:
https://www.w3schools.com/css/css_units.asp

1 Like

I like your thermostat mod and I am trying to do the same, but I am missing the CSS to enlarge the up/down buttons. Are you willing to share that as well ?

Edit: Read down a little more and found the answer in the thread here: The Noob's (in)complete guide to CSS for Hubitat

I like the approach for the up/down arrows. I played around with it and it turns out that you can address both arrows in one line:

.thermostat .pl-3, .pr-3 {
font-size: 30px !important
}

1 Like

How would I do this with a dimmer tile?
I want to hide the "open" and "100%"
Screenshot 2020-07-30 11.34.31

Here is the code from inspector.
Screenshot 2020-07-30 11.55.30

it would be something like this, you'll need to replace "tile-12" with whatever the ID for that tile is for you (it will be the

surrounding the html in your screen shot)
#tile-12 .tile-primary > div:not(.dimmer) {
	display: none;
}

if you want to hide the text but keep the spacing, use this instead

   #tile-12 .tile-primary > div:not(.dimmer) {
    	visibility: hidden;
    }
1 Like

So close! This got rid of the text like I wanted but also got rid of the icon. How do I keep the icon? Here is the fully open inspector for that tile if it helps.
Screenshot 2020-07-30 14.01.12

On another note while im here, How do I go about making this icon more centered?
Screenshot 2020-07-30 13.50.50

For removing "Open" you can do something like (looks like your tile ID is tile-11):

#tile-11 .tile-primary > div:nth-child(2) {
    display: none;
}

I've removed text like that using that kind of CSS. For example, I removed the text from my motion displays with:

.motion .tile-primary > div:nth-child(2) {
    display: none !important;
}

If it doesn't work, add !important (I'm not sure I needed it in mine...).

1 Like

You can't. The text and icon are part of the same element so it's all or nothing. The alternative is to substitute your own icon for the one that came with the tile. Try this approach from here.

My bad. @BrianP's approach does work. I'm still a noob and my knowledge is incomplete! :smiley:

@BrianP how do you tell which child it is? I can't for the life of me see it when inspecting the source.

@michael.sbrocchi it looks like you are using smartly with the quarter mod. It's recommended that you turn off helper text when using that mod. That will remove that text you speak of and adjust the icons.

image

as mentioned in the other thread you can use the code below to adjust the icon location as needed, once the helper text is removed. (setting gear > options)

#tile-7 .material-icons{position:absolute;top:-5px;right:18px}

That selects the 2nd <div> in the .tile-primary class that is contained within the <div> with ID = tile-11. The first is the <div> with the icon. The 2nd is the <div> with "Open." The first is the <div> containing the icon, and the 3rd is the <div> with class="dimmer".

The > means a direct descendant of that element, and :nth-child() just counts descendants. So for example:

#tile-11 .tile-primary > div {
    display: none;
}

Would select all the <div> elements in the .tile-primary class, but no elements that are inside that, so a <div> inside a <table> in the .tile-primary class would not be selected. Like below:

<div id="tile-11">
    <div class="tile-primary">
        <div>Something</div> <!-- This is selected -->
        <table>
            <tr><td>
                <div>Something in a table.</div> <!-- This is not selected -->
            </td></tr>
        </table>
        <div>Something else</div> <!-- This is selected -->
    </div>
</div>

-Brian

3 Likes

So in my original post I can change the tile background colour, but how can we change the colour when the tile changes its state, for example the standard tile for a contact sensor turns red when triggered, how can we change this?

EDIT: Solved here

EDIT 2: Unfortunately this solution only works for switch tiles, contact sensors are no - no :frowning_face: