๐Ÿ”น Card-mod - Add css styles to any lovelace card

Answering your question about bar-card:

type: custom:stack-in-card
keep:
  background: true
cards:
  - type: entities
    entities:
      - entity: input_number.test_level_1
      - entity: input_number.test_level_2
      - entity: input_number.test_level_3
    card_mod:
      style: |
        ha-card {background: red}
  - type: custom:bar-card
    severity:
      - from: '0'
        to: '0'
        hide: true
      - from: '1'
        to: '40'
        color: '#007A00'
      - from: '41'
        to: '90'
        color: '#EA9000'
      - from: '91'
        to: '100'
        color: '#C41400'
    entities:
      - entity: input_number.test_level_1
      - entity: input_number.test_level_2
      - entity: input_number.test_level_3
    card_mod:
      style: |
        ha-card {
          {% if states('input_number.test_level_1')|int == 0 and
                states('input_number.test_level_2')|int == 0 and
                states('input_number.test_level_3')|int == 0 %}
            display: none;
          {% endif %}
        }

This mod hides the whole bar-card if none of bars is displayed (to avoid undesired space).

image

image

1 Like