🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
7233

I have this card for controling my TVR

Przechwytywanie

features:
  - type: climate-hvac-modes
    hvac_modes:
      - auto
      - heat
      - 'off'
type: tile
entity: climate.zigbee_grzejnik_salon
name: Grzejnik salon
icon: mdi:radiator
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      position: relative;
    }
    ha-card::before {
      content: '{{ states("sensor.zigbee_grzejnik_salon_position") }}%';
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 1;
      font-weight: bold;
    }

I’ve managed to get the position state to show on the card, but now how can I get more info of the position sensor when clicking it? Also can I add a valve icon in front of the position %?

7234

Thanks, very helpful! I replicated your headings card-mod code but I can’t figure out how to vertically center the text. Any thoughts?

Screenshot 2024-10-05 110510
Screenshot 2024-10-05 110510952×150 12.1 KB

7235

You seem to have changed a height of the heading, right? Probably you need to align a container (which includes all elements) vertically. Check in Code Inspector, find this container and play with corr attributes, cannot tell more, no access to pc