junkfix / numberbox-card

Replace input_number sliders with plus and minus buttons
109 stars 9 forks source link

Need help to increase font-zise of "name" #91

Closed raymondsfk closed 1 year ago

raymondsfk commented 1 year ago

Hi, there are ways mentioned to increase size of the result and unit like .cur-num{font-size:25px !important}. I can't figure out how to increase the name size corresposnding to the result/unit. can anyone enlighten, please?

htmltiger commented 1 year ago
card_mod:
  style: |
    ha-card .info {
       font-size: 150%;
     }  
raymondsfk commented 1 year ago
card_mod:
  style: |
    ha-card .info {
       font-size: 150%;
     }  

Thank you!

Mariusthvdb commented 9 months ago

Just found your card, which is a nice addition to the collection, and compares nicely to mini thermostat card, being even more flexible. So before going into the issue: thanks!

sorry to add to a closed issue, but I was confronted with the same search and solution. It does however change the font-size of the complete .info section, and not only the name, which seems to be in div text inside the .info.

are there any builtin styling variables we can use for this?

as you can see the name Voorkamer is black (and I'd like to edit that too, using a theme variable) and all others in the info section are bold

what would really fit the card, is a dynamic color for the temperature. given the somewhat unusual styling format in the secondary_info section, just let me ask how we could do that based on the color of another entity, just like card_mod allows us:

color: {{states('sensor.inside_temperature_color_name')}};

would be nice

 - type: custom:numberbox-card
    style: |
    card_mod:
      style: |
        ha-card .info {
          font-weight: bold;
        }
    entity: climate.voorkamer
    icon: false #mdi:fire
    service: climate.set_temperature
    param: temperature
    state: temperature
    min: 5
    max: 21
    step: 0.5
    secondary_info: >
      Actueel:<b style="color:green"> %climate.voorkamer:attributes:current_temperature </b><br />
      Preset:<b style="color:green"> %climate.voorkamer:attributes:preset_mode </b><br />
Scherm­afbeelding 2023-11-21 om 10 10 27