MMM-temp-ds18b20 temp font size

briantogo

Greetings,
I am trying to adjust the temperature font on my ds18b20 using the MMM-temp-ds18b20 module I’d like the temperature font to be a size much larger than x-large, roughly 3 times that size. I have the font size of 80px set for ChameleonWeather, and that’s the size I’d like for my indoor temp sensor.

I’m unable to locate using the developers windows, but am unable to drill past

because the developers window keeps resetting.

Any suggestions?

Thanks,
Brian

sdetweil

@briantogo best thing in the case of the reset is to make the refresh rate very long while you are debugging

Remember you use the pointer next to the elements tab label.
Then you use that pointer to point to the content you want to manipulate

briantogo

Thanks Sam. How do I make refresh rate very long?

sdetweil

@briantogo change the refreshInterval property

See the module doc

briantogo

I was able to change the refresh rate on the module Sam, so I could drill down into the developers window . It looks like the temperature font is inherited from the main.css file, so I added the following to the custom.css file;

.MMM-temp-ds18b20 .small.dimmed.w1.w1-thermometer (
:root {
–color-text: #999;
–color-text-dimmed: #666;
–color-text-bright: #fff;
–color-background: #000;
–font-primary: “Roboto Condensed”;
–font-secondary: “Roboto”;
–font-size: 80px;
–font-size-xsmall: 0.75rem;
–font-size-small: 1rem;
–font-size-medium: 1.5rem;
–font-size-large: 3.25rem;
–font-size-xlarge: 3.75rem;
–gap-body-top: 60px;
–gap-body-right: 60px;
–gap-body-bottom: 60px;
–gap-body-left: 60px;
–gap-modules: 30px;

Font is still too small. Suggestions?
Thanks,
Brian
}

sdetweil

@briantogo what style is it that was inherited?

Only need to fix that one

I see
.MMM-temp-ds18b20 .small.dimmed.w1.w1-thermometer

now, the things with . are classes…

and the css rules are if the things have NO spaces between them, then ONLY a SPECIFIC element with ALL those thing specified together will be selected…

so, small, dimmed, w1 w1-therometer ALL specified as part of class=“…” on the SAME SINGLE element

I THINK what you need is to override small
looking at the code

tempCell.innerHTML = '<i class="' + this.config.iconSize + ' dimmed wi wi-thermometer"></i>       ';

so I think

.MMM-temp-ds18b20  .small .wi-thermometer {
   fontsize: 2em;
}