MMM-HomeAssistant-Sensors (Development) - Show your HA Sensors on your Mirror

proxxym

@Ivanov_d Thanks,
for me big font is to smal :).
an extra large font or something similar was needed

sdetweil

@proxxym I don’t know, but you can use the developers window to learn what needs to be changed, and test it out

see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1650634458947

Ivanov_d

@proxxym open the following file:

~/MagicMirror/modules/MMM-homeassistant-sensors/MMM-homeassistant-sensors.css

find the following lines:

.ha-small {
  font-size: 15px;
  line-height: 18px;
  font-weight: bold;
  color: #999
}

.ha-normal {
  font-size: 20px;
  line-height: 25px;
  color: #999
}

.ha-big {
  font-size: 22px;
  line-height: 26px;  
  color: #999
}

and either change the .ha-big font-size from 22px to something bigger (e.g. 30px, 36px, etc.)

or add a completely separate style:

.ha-extra-big {
  font-size: 36px;
  line-height: 30px;  
  color: #999
}

and change this in your config

rowClass = 'extra-big'

sdetweil

@Ivanov_d OR the better way, never change files supplied by mm or a module(as this breaks upgrades or fix distribution). the system is designed to support your local changes

edit ~/MagicMirror/css/custom.css
(if it doesn’t exist, create it)

add all those definitions but add the module name (and a space) in front of each

.MMM-HomeAssistant-Sensors

notice the leading dot

Ivanov_d

@sdetweil duly noted and agreed. That approach is the right one.

cowboysdude

This goes into your custom.css file in the css directory.
You can change size, color, font weight and line height. You may need to make changes to these depending on how you want it to look.
Remember when you change the font size you’ll need to change line-height size as well… Line height should be bigger then font size ;)

.MMM-HomeAssistant-Sensors .ha-small {
  font-size: 22px;
  line-height: 18px;
  font-weight: bold;
  color: #fff
}

.MMM-HomeAssistant-Sensors .ha-normal {
  font-size: 30px;
  line-height: 25px;
  color: #fff
}

.MMM-HomeAssistant-Sensors .ha-big {
  font-size: 42px;
  line-height: 26px;  
  color: #fff
}

luisestrada

Hi, this is not an issue but a question. I have a bunch of lights and I’d like to hide them when they are off, just to show them when they are on.

Is this possible?

Snille

@luisestrada Yes, however, It can only be “one” control sensor / HA-module. So, if you have a bunch of lights, and you want to have only one “show” only when that specific light is “on”. You will have to add the module one time / light…
But if you have a specific light that you want to use as a “control sensor” for all the lights, only one module is needed…
I think you could also use an “icon” and some trickery to only show an Icon when the light is lit and when it’s not, not show anything… But not sure… :)

joecas65

@Snille Hi, is it possible to add a line separator between sensors ?
thanks

luisestrada

@joecas65 said in MMM-HomeAssistant-Sensors (Development) - Show your HA Sensors on your Mirror:

@Snille Hi, is it possible to add a line separator between sensors ?
thanks

I like the way the MMM-MyScoreboard does, by adding this line

border-bottom: solid 1px #222;

You can add it to your custom.css file (for more info about how to write in css, check https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1677609386326)