Custom simple-thermostat target temperature font

Configuration Frontend
1

Recently my thermostat cards using custom simple-thermostat card have changed. The most notable change is the target temperature font size. Efforts to style that font size or for that matter anything else using card_mod have been without success.

type: custom:simple-thermostat
entity: climate.bh_hp
card_mod: null
style: |
  ha-card {
  --st-font-size-sensors: 14px;}
layout:
  step: row
  mode:
    headings: false
sensors:
  - entity: sensor.hp_heat_time_hm
    name: Heat Time
    unit: h:m
  - entity: sensor.bh_hp_heating_rnd
    name: Heat Hrs
  - entity: sensor.hp_cool_time_hm
    name: Cool Time
    unit: h:m
header:
  name: Heat Pump
  icon: mdi:home-thermometer-outline
  faults:
    - entity: binary_sensor.bh_hp_air_filter
      hide_inactive: true
step_size: "1"
setpoints:
  target_temp_low: 76
  target_temp_high: 72
decimals: "0"
control:
  hvac:
    "off": true
  fan: true
  preset:
    none:
      name: Run Sched
    hold: true
    away: true
    temperature:
      name: Manual
2

The first thing I see wrong is you didn’t properly indent style and you have null for card_mod:.

Try this…

type: custom:simple-thermostat
entity: climate.bh_hp
card_mod:
  style: |
    h3.current--value {
      font-size: 35px;
    }
3

If you would like to change the colour both dial and background and font colour, I use this:

card_mod:
  style: |
    ha-card {
      height: 150px; /* Adjust the height as needed */
      width: 150px;  /* Adjust the width as needed */
    }
    .dial {
      user-select: none;
      --thermostat-off-fill: rgba(10,10,100,1);
      --thermostat-path-color: rgba(254, 255, 49, 1);
      --thermostat-text-color: white;
    }
4

I will give that a spin just note that ‘null’ is not my doing. The editor always in my experience inserts ‘null’ following the card_mod declaration.

5

Okay that indentation fixed that style issue but I have come up against another problem that I think I have seen before, i.e. the target temperature setting is arranged in such a way that the + and - symbols are arranged weirdly such that instead of being above and below the numeric setting they are adjacent which because of the width of the card forces the number text size very small. However, when viewed on my phone in landscape mode the target temperature setting appears normally with the symbols above and below and the text size can be manipulated. Two screen shots attached, first in portrait, second in landscape.

1000010097
10000100971440×1840 164 KB

1000010098
10000100981571×1440 136 KB

6

The issue has also been reported HERE.

7

So the solution is to remove this card. I have tried other thermostat cards but none have the appeal of this one.

8

Well no, at least not for me. I will just keep it like is is for the time being since the card is still fully functional hoping the dev or someone else comes up with a working solution.

9

Luckily user “vu-the-dung” came up with a workaround. I tested this with 2 HA instances and it works without issues. Font sizes back to normal :+1:

Klima-Serverraum
Klima-Serverraum744×642 34.7 KB

10

No. I just changed the style code so that it fits for how i’m using it.

11

Can you post your yaml for the changes you made to make it fit? Thank you!