How to change the text size in a lovelace card?

Configuration Frontend
1

Firstly, is it possible? If so how?
I would like to change the text size in this Gauge Card.

image
image267×167 7.13 KB

And this is my yaml and the text in question is for the name: entry:

type: custom:config-template-card
entities:
  - entity: sensor.givtcp_sa2219g385_soc
  - entity: sensor.my_givenergy_battery_state
card:
  type: gauge
  entity: sensor.givtcp_sa2219g385_soc
  name: ${ states['sensor.my_givenergy_battery_state'].state }
  severity:
    green: 50
    yellow: 20
    red: 0
  needle: true
  min: 0
  max: 100

I have been typing variants of:

card_mod:
  style: |
    ha-card {
      font-size: 800px;
    }

In various lines at various tab - with no success whatever!
Any pointers to this bewildering topic will be most welcome.

Regards, Martin

2

some example

card_mod:
  style: |
    ha-card > div.name {
      background: none;
      margin: 10px -10px -10px;
      --card-primary-font-size: 10px !important ;
      font-size: 20px !important;
      border: none;
    }
3

Try

card_mod:
  style: |
    .name {
      font-size: 800px !important;
       }

image
image614×204 3.01 KB

:arrow_up:

card_mod:
  style: |
   .name {
      font-size: 60px !important;
      color: blue !important;
    }
4

Thank you both,
But where does that snippet go in the bigger picture?
At the end (as I have see suggested elsewhere)?
Under the entity I wish to increase?
Where?
Then, once in the correct level, what is the indentation?

I’m lost in the logic of all these piecemeal “improvements”.

image
image811×482 39.5 KB

Regards, M.

5

Line card_mod up like this

type: gauge
entity: sensor.living_room_humidity
name: xxx
severity:
    green: 50
    yellow: 20
    red: 0
needle: true
min: 0
max: 100
card_mod:
  style: |
    .name {
      font-size: 60px !important;
       }

You need to indent style: | and the code below it…

type: custom:config-template-card
entities:
  - entity: sensor.xxxx
  - entity: sensor.xxxxx
card:
  type: gauge
  entity: sensor.xxxxxx
  name: example
  severity:
    green: 50
    yellow: 20
    red: 0
  needle: true
  min: 0
  max: 100
  card_mod:
   style: |
     .name {
        font-size: 60px !important;
        }
6

WoooHoooo…

Thank you.

M.

7

Please consider marking my post above with the Solution tag. It will automatically place a check-mark next to the topic’s title which signals to other users that this topic has been resolved.

This helps users find answers to similar questions.

image

8

Unrelated to your question : placing the gauge card into config-template-card is a bad practice since on every update a needle will go down.