Some tile templates have hard-coded font-size or other style information. Those need some individual attention. For example:
.tile.thermostat .inline-block {
font-size: 2.25vh !important;
}
.tile.thermostat .inline-block .no-wrap.overflow-hidden {
font-size: 2.25vh !important;
}
Those both modify parts of the Thermostat tiles. I had to do both, since there are two places with hard-coded font size. The Thermostat templates wouldn't respond to changes in the font size in the dashboard settings.
#tile-39 .tile-primary {
font-size: 3.5vh !important;
}
That one is for my Disarm tile that sets a global variable to do the HSM disarm. I ended up using the div ID for that tile (tile-39). If the CSS selector starts with '#' it's the ID. If it starts with '.' it's the class.
.hsm .tile-primary > div:nth-child(2) {
font-size: 1.5vw !important;
}
That one is for the HSM tile. It also had hard-coded font size on part of it. The important thing to understand when you're adapting this to other dashboards is how the CSS selector statement works. It's the thing before the brackets. Then you can use something like Web Developer in FireFox to inspect the elements like this:
That's my HSM tile in the div with id "tile-18."
My selector is .hsm .tile-primary > div:nth-child(2)
which selects first any div with class="hsm"
(there can be multiple classes, this one is class="tile"
and class="hsm"
which ends up being class="tile hsm"
in the code). Then it has to be a "tile-primary" class within the "hsm" class (at any level), then lastly the div element which is the 2nd child element of the "tile-primary" class element. That ends up selecting the div that contains "Disarmed." There are other ways that could have been written to get the same result. For example:
#tile-18 .tile-primary > div {
font-size: 1.5vw !important;
}
since there is only one div inside the selected .tile-primary div within tile-18.
The !important
makes sure that the CSS overrides any style information contained in the HTML.
Hopefully that helps a little. This would not be something you could just copy-paste to fix your own dashboard, though a lot of it would work. I'd say look at w3schools to review some CSS concepts, then hopefully you could adapt it to your dashboards.