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

📱 Mobile Apps
2

HOW TO MODIFY TEXT ELEMENTS

Well, actually we can't modify text elements directly but there is a way.

As per our example above If we wanted to change the tile-secondary element with the text "Door Status" to "My Front Door" we would first need to hide the existing element and then create a new one over it like this:

#tile-63 .tile-secondary {
visibility: hidden;
}
#tile-63 .tile-secondary:after {
content: 'My Front Door';
}

EDIT 1:

OVERRIDING STYLE PROPERTIES

Thanks to @morningz for this:

CSS doesn't by default override what is set in the "style" property, but there is a work around.

Add "!important" to your CSS, so to change the font size for an element this would look like this:

#tile-2 .tile-primary {
  font-size: 40px !important;
}

POSITIONING/RESIZING ELEMENTS

There are a couple of ways I'm aware of to re-position elements.

  1. Using "position". There are a couple of options when using position, namely absolute or relative positioning. As far as I can tell absolute is referenced to the top left of the tile, and relative is (sort of?) against the default position of the element.

As an example:

#tile-62 .tile-secondary:after {
content: 'My Title in 26';
visibility: visible;
position: absolute;
left: 50%;
top: 50%;
}

This places "My Title in 26" somewhere in the middle horizontally and about a line below the original element. I'm sure there is a logic to the referencing but I kind of play around with the numbers until I get the look I want as this depends heavily on the device screen you are using.

  1. Using "transform" to move and/or resize an elenent

The translate option moves the element relative to the default element position. Either specify x and y movements separately or the same x/y by using a single value. Values can be in pixels or percentages

transform: translate(100px, 200px);

transform: translate(200%);

Importantly, "transform" can also be used to resize an element, for example:

transform: scale(0.9,0.9);

EDIT 2:

ADDING UNITS TO AN ATTRIBUTE TILE

While you can't display a custom attribute (which are numbers) with a unit at the end unless it's coded into a driver, there appears to be a way to do it in CSS.

#tile-66 .tile-primary:after{
   font-size: 8px;
   content: " ppm";
}

This example concatenates the unit "ppm" after the value of the attribute in a smaller font similar to a standard template tile (of course you'll need to play about with the font size to get it just right.

16 Likes