I have 3 problems with this code
1 icon is only bigger when it is active, I would like the icon to always be bigger.
2 I would like the primary text to be lower
3 I would also like the badge icon to be a bit bigger so that it is readable
unfortunately I can’t get any of the 3 to work. Anyone who wants to / can help me further?
type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
layout: vertical
grid_options:
columns: 4
rows: 2
badge_icon: >
{% set number_woonkamer_tellen_aantal=states("sensor.woonkamer_tellen_aantal")
| int %}
{% if number_woonkamer_tellen_aantal > 9 %}
mdi:numeric-9-plus
{% elif number_woonkamer_tellen_aantal > 0 and number_woonkamer_tellen_aantal
< 10 %}
mdi:numeric-{{number_woonkamer_tellen_aantal}}
{% endif %}
badge_color: green
secondary: ""
tap_action:
action: navigate
navigation_path: /db-mobiel2025/woonkamer
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states('sensor.woonkamer_tellen_aantal') | int >= 1 %}
--ha-card-background: #223448;
{% endif %}
}
ha-state-icon {
--mdc-icon-size: 64px !important;
}
mushroom-template-card .primary {
margin-top: 20px !important; # Verschuift de primaire tekst naar beneden
}
.badge {
font-size: 36px !important; # Verhoogt de grootte van het badge-icoon
}