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

@thebearmay thank you very much, I will input that. I’m trying to learn how these codes are written, not going easily though.

1 Like

Is this code for changing the size of a custom icon, or will it work to change the size of a default icon for an individual tile? The latter is what I want to do but a not sure I understand which element is changing the icon size… maybe font-size or is it both .material-icons adnd font-size?

Pretty sure this changes any icon for a given tile, but it's been a while since I messed with HE dashboards.

}
#tile-17 .material-icons {
position: relative;
top: -7px;
font-size: 43px !important;
}

2 Likes

Yup, that's it. It's the font-size within that line that does it. Thanks!

I would like to change the font size of the text in a single tile, I can't figure out how to do it with css, can you help?

Blatant self-promotion... But you may be interested in my CSS editor.... But let me find a some helpful hints for you....

2 Likes

i tried to use the simple editor but it seemed like it would only change those things on my local network. If i opened the dashboards on my phone its the same old dashboard. seems like the editor didn't edit the dashboard on my mobile phone. I must be doing something wrong.

No, you haven't done anything wrong... it's me.... I'm reluctant to flood this topic with QandA re my driver.... I might post the answer on the topic for my driver....

I can find the font size in the inspect window for the tile i want, I can change it in the inspect window and it changes on the dashboard but of course the inspect window doesn't save the changes and I don't know how to properly write the code to change the font size on a single text tile.

Ok, maybe it's worth continuing the conversation here for now... Do you want to post the changes you made in the inspect window? Happy to post my own CSS from the driver I have developed... But it will need to be soon....:slight_smile:

@sburke781
I'm not sure if i'm posting this screenshot correctly, hopefully you can see it. I have change the font size to 23 and you can see the worse basement font size has increased. I figured out how to change that text in all of the blue tiles which eventually i'll need to do. I'm also trying to figure out how to change them individually. this is the code is css that i used to change the font size in all of the blue tiles.

.text-tile div>div{
font-size :30px !important;
}

The screenshot is fine.... I just need to think through what you are wanting to achieve....

Thank you, Basically I want to be able to adjust the font size for all of the tiles on my dashboard individually. I don't know if there is a difference in adjusting font size for different types of tile (text, color bulb, swith etc..). Hubitat is still pretty new to me, I'm learning but having a real hard time with understanding CSS

Ok, I think I got it figured out for the text tiles

#tile-123 div>div{
font-size :30px !important;
}

that seems to work fine but when i use that code with a different tile, say a dimmer tile, it just adjusts the size of the dimmer percentage text, I would like to adjust the size of the text at the bottom of the tile that tells me the tile name.

2 Likes

Each tile type has a different "target". Use inspect to find which target changes the font and adjust the top line to hit it.

Think most types you want to target the "tile-title" line. #tile-123 .tile-title

2 Likes

Like @TechMedX mentioned.... different tile types (templates) will have different structures to adjust.... I have tried to account for this in the Simple CSS Editor, but there are some adjustments that I have not included. You can include these in the regular CSS for this post but would understand if you are not at that point...

Needless to say the time for me to provide a meaningful contribution is running out...

No worries, when I saw this question I was surprised this thread isn't closed :wink:

1 Like

I'm sorry, should I not be posting my questions in this topic?

I know, I would have thought all conversation would have reverted to my topic... :wink:

no no your fine! Just HE has been closing threads that are "outdate" and this is an oldie but IMO goodie.

2 Likes