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

📱 Mobile Apps
21

Here is a list of some of my CSS code on some of my tiles on my dashboard.
Depending on the tile they can be all over the place on modifying a tile. Google inspect will give you the clues and then it was kind of a guessing game.

#tile-33 .tile-primary {
font-size: 74px !important;
position: relative;
bottom: 22px;
right: -3px;
}
#tile-36 .tile-title {
position: absolute;
bottom: -10px;
color: #3affff;
font-size: 30px;
}
#tile-32 .small {
margin-left: -20px;
}
#tile-50.tile.button {
background-color: hsla(0,0%,50.2%,0)!important;
}
#tile-36 .tile-primary a {
font-size: 30px !important;
color: #00ff37;
}
#tile-42.tile.button {
color: #e4ff00;
}

2 Likes
22

Further edit to post #2. It seems we can add units to an attribute tile using CSS even if the device driver doesn't support it.

24

Noob question... I assume the group "Label" tile you are using (IE: Front, Living Room, etc) are "Text" tiles? If so, how are you making them 1/2 or 1/4 height? If not using a standard Text tile, can you share the CSS that your are using for these?

Thank you in advance!

26

See posts #1 and #2. You can either change the font size (in points) or also probably scale the element.

EDIT: Ahh sorry, misread your post. I did the same as @anon81541053 to get them to fit on a tablet screen and each tile for me also ended up being the same 3H x 1L ! Go figure!

27

Seeing this thread I thought I'd share a snippet that works universally for me to replace tile-title:

.tile-title:after {
visibility: visible;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
white-space: nowrap !important;
}
#tile-94 .tile-title {
visibility: hidden;
}
#tile-94 .tile-title:after {
content: 'A very long title to crop';
}

This should work with any tile-size and layout for replacing tile-title, or any other div with some modification. Hope it is of help to someone. No need to change percentages...

EDIT: Do not use this, there is a better approach in a later post.

4 Likes
28

Do you know how to edit the text labels in the thermostat tile. For e.g. I would like to hide the word "Heat". So far I have only been able to achieve this with inadvertently hiding other elements.

30

I think you are out of luck, there is nothing to differentiate that "Heat" text from the numeric value

57

1 Like
31

ok.. what about removing the whole inline block

I've tried that before .. and can hide it, but it removes other elements in the same thermostat tile that have the inline block (for e.g. the mode block)

Is there a way to remove that inline block only and leave the other two?

32

Here is the text between the heat removed, i think that is what you are asking. If it's something else, let me know

19
Screenshot 2020-01-24 11.44.19.png584×520 42 KB

Related to this thread, i can't recommend these plugins/extensions enough:

  • Stylebot (let's you do real time editing of CSS, but it seems to have a bug happening right now where it puts every character you type on a new line)
    alternatively
  • User JavaScript and CSS

Those will let you play around with the CSS without needing to open modal windows constantly using the built in editor

1 Like
33

I also wanted to note something that is super helpful to know in CSS-land:

{ visibility: hidden; /* hides the element but keeps the "occupied space" of it */ }

{ display: none; /* hides the element and frees up it's space taken */ }
4 Likes
34

thanks this is very helpful

35

ok last question @morningz & @anon81541053.

Is there a way of using margin-top (or similar) to essentially crop the word "Heat" out?

36

I was looking at using the "line-height" parameter to crop it out but it was smushing the element rather than cropping it

37

I don’t know if this is what you are looking for but I did this for my stelpro thermostats that don’t use heating or fan modes

image
634EBE8D-08BC-4F1D-8329-101EFE11908F.jpeg1125×332 104 KB
image
08583EA5-4833-4B26-89BA-39A6A272190F.jpeg1125×552 78.4 KB

1 Like
39

Where is the save css button?

40

Bottom left of the popup.

41

please be more specific - I'm old and not too sharp :wink:

image
image.png545×941 48.8 KB

42

You're not in the right area. Screen shots incoming.

Go to your dashboard on a computer browser.
Click the cog (top right)
Click Advanced
Click CSS
Insert your CSS
Save CSS is at the bottom left.

image
image.png461×1071 26.9 KB

3 Likes
43

Nice to see you're using my little snippet :slight_smile:

44

Yeah, it's great. As of this morning (my time). Just last week I shortened a few of my device names, but this will mean I wont have to do any more. Thanks!

2 Likes