[SOLVED] - Font Size: Why is the font size of the unit always smaller than the item value? (same with widget name ...)

Why is there an option to choose the font size for displaying the item value when the unit font size (and also the widget name) does not scale equally but is always smaller than the item value itself?

This looks odd to me:
image

And I found also no satisfying answer why there is no font size option for the widget name when there is one for the item value???

Looking at my example picture explains that this looks funny. Defining the icon size (which is possible) may also mess up the presentation. If you are not cautious a big icon causes also scaling issues. So why is it forbidden for the widget name?

I would be happy with a hack that I can apply to my personal configuration. I do not request an official change if there is not enough resonance for such a feature. I was not able to find the appropriate files in which my panel configuration is stored otherwise I would have already tried to adjust the font size for

  • the units
  • and the widget name

myself.

I kindly appreciate any hint and support to harmonize my panel display.

Thanks
Justus

There is an issue on gitHub for this.
Your can write your own widget:

If you search the forum for custom widget you’ll find hundreds of posts

I would just like to adjust the existing Dummy Widget. As I am no software developer it would be much easier for me to tweak existing code as building a completely new widget from scratch.

Are there somewhere the codes for the existing widgets available as templates or examples?

The unit was put in a <small> tag because I like it like this :man_shrugging:

You can create a CSS file (say habpanel-overrides.css) in the html folder of your openHAB conf and reference it as /static/habpanel-overrides.css in the advanced settings.
In the file put this:

.dummy-content small {
    font-size: 100% !important;
}

To change the font size of the label try:

.dummy-content span:first-child {
    font-size: 28px !important;
}
2 Likes

Thanks Yannick,
this is the straight forward workaround I was looking for. Awesome, thanks! I will try that over the day :+1:
and give feedback.

:slightly_smiling_face::slightly_smiling_face::slightly_smiling_face:
Justus

This will only change the label font size, correct?




And may I also try this for increasing the font size?

.dummy-content span:first-child {
    font-size: 120% !important;
}

Works Perfect :clap::clap::clap:
Thanks!!!

Is there also a tweak to override just the font size of the unit in the Dummy Widget ?

Hi Yannick, I do not mean it offensive :wink: of course you implement your widgets how you like them !!!
This is why I did not asked for a code change but simply for a tweak and it seems that I found it myself (at least the tweak that works for me :stuck_out_tongue_winking_eye:

I digged through the OpemHAB community and found this topic:

where the unit is simply moved from the Unit (in my german case it is “Einheit”) field:

image

to the Format field (and of cause removing the entry in the Unit field :wink:) :

image

Having the unit “°C” in the format field displays it in the same font size like the item value!!!

Problem solved!!!

To have all questions of my topic answered in one post - which I will mark as the solution - I will reference to Yannicks earlier post where he gives the workaround how to scale the font size of the Dummy widget name:

Quote start:

The unit was put in a <small> tag because I like it like this :man_shrugging:

You can create a CSS file (say habpanel-overrides.css ) in the html folder of your openHAB conf and >reference it as /static/habpanel-overrides.css in the advanced settings.
In the file put this:

.dummy-content small {
   font-size: 100% !important;
}

To change the font size of the label try:

.dummy-content span:first-child {
   font-size: 28px !important;
}

Quote end

Instead of a fixed font size (like 28px) I used a percentage bigger 100% (=> 120%) which fit my needs:

.dummy-content span:first-child {
    font-size: 120% !important;
}

Thanks Yannick for your response and support!!!

Of course, no offense taken! :wink: I didn’t want to imply I was, wrong emoji choice maybe
 :man_shrugging:

Yes, that was this part:

.dummy-content small {
    font-size: 100% !important;
}

It’s basically putting the font-size inside <small> nodes (which contain the unit and is designed to make them
 smaller) back to 100%, from 80% or so (the default one).

No, not caused by the emoji. I simply thought you were a little bit sad that your well designed default with the bit smaller unit size was not appreciated by me :blush:

So I overread the first part with the unit size completely being so excited about the exisiting tweak that I missed the first part 


This is of course smarter than my finding and I will mark your answer as solution as it contains all answers!!!

Cheers,
Justus