How do you change the font size on the battery gauge

[thespinmaster]

Hi all, Im trying to make the value font size bigger in the battery gauge widget as it’s too small to read.

I have a template node with the following css code but it is not working.

.nrdb-ui-widget.nrdb-ui-gauge-value span {
    font-size: 20em;
}

Does anyone know the magic sauce to make this work?

TIA

[jbudd]

Welcome to the forum @thespinmaster.

I think this might work

.nrdb-ui-gauge-battery label.nrdb-ui-gauge-battery--bglabel {
    font-size: 3em;
}

But what is your base font size?
If the base font size is 16px, 20em is 320px (I think) which seems quite large.

[thespinmaster]

Thanks, that’s so close, it displays the percentage in a larger font, but it also still displays the original font in front. I’m guessing that is what bglable is; a separate background label. The font color is also black and I cannot appear to change it using the color style. Sorry, not sure where I change or view the base font size. I just put 20em in the style code I posted as a random number, to ensure there was a noticeable change.

[jbudd]

@thespinmaster

I’m guessing that is what bglable is; a separate background label.

Oh yes you are right.
I remember from my attempt to use the battery gauge as an LED bar chart it displays the label twice, --bglabel and --fglabel.

They are both needed so the value shows up even if the fill % is below the position of the text.

@thespinmaster

Sorry, not sure where I change or view the base font size.

No, me neither!

@thespinmaster

The font color is also black and I cannot appear to change it using the color style.

Try using !important in your CSS.