had a bit of fun with badges in Add badges (old style and modern) anywhere
besides that, I am glad to be able to post my mods I had ever since card_mod 3.5.0 (which was retracted, so I couldnt post them…)
now card_mod 4.0.0 is out, below can be done by all, and no longer require custom:mod-card.
Just set the modifications to:
card_mod:
style:
ha-badge:
entity: binary_sensor.huis_ramen_deuren_puien_veilig
name: Beveiliging klaar
show_name: true
show_state: false
tap_action:
action: none
hold_action:
action: navigate
navigation_path: /ui-instellingen/alarm
card_mod:
style:
ha-badge:
$: |
{% set veilig = is_state(config.entity,'on') %}
{% set kleur = 'var(--success-color)' if veilig else 'var(--alert-color)' %}
.badge {
border: 2px solid {{kleur}} !important;
box-shadow: var(--box-shadow) !important;
background: {{'pink' if not veilig else
'var(--card-background-color)'}} !important;
animation: {{'blink 2s ease infinite' if not veilig}};
}
@keyframes blink {
50% {opacity: 0.2;}
}
.: |
{% set veilig = is_state(config.entity,'on') %}
{% set kleur = 'var(--success-color)' if veilig else 'var(--alert-color)' %}
ha-state-icon {
--card-mod-icon-color: {{kleur}};
}
and some state-icon:
type: entity
entity: sensor.ws_5500_feels_like_temperature
hold_action:
action: navigate
navigation_path: /ui-overzicht/weer
card_mod:
style:
ha-badge:
$: |
.badge {
border: 2px solid {{states('sensor.temperature_color_name')}} !important;
box-shadow: var(--box-shadow-badges) !important;
}
.: |
ha-state-icon {
color: {{states('sensor.temperature_color_name')}};
--card-mod-icon:
{% set temp = states(config.entity)|float(10) %}
{% if temp > 35 %} mdi:thermometer-alert
{% elif temp > 30 %} mdi:thermometer-high
{% elif temp > 15 %} mdi:thermometer
{% else %} mdi:thermometer-low
{% endif %}
}
contains some of the most obvious elements to use.
Can go much more detailed, but this will get you going
a couple of small examples:
or
if you want to modify the name of the badge, then target .content , modify the state needs state-info
if you show both name and state, the property for name changes to .label…
- entity: binary_sensor.huis_ramen_deuren_puien_veilig
name: State and name
show_name: true
show_state: true
card_mod:
style:
ha-badge:
$: |
{% set veilig = is_state(config.entity,'on') %}
{% set kleur = 'var(--success-color)' if veilig else 'var(--alert-color)' %}
.badge {
border: 2px solid {{kleur}} !important;
box-shadow: var(--box-shadow) !important;
background: {{'pink' if not veilig else
'var(--card-background-color)'}} !important;
animation: {{'blink 2s ease infinite' if not veilig}};
}
@keyframes blink {
50% {opacity: 0.2;}
}
.label {
color: {{kleur}} !important;
}
.: |
{% set veilig = is_state(config.entity,'on') %}
{% set kleur = 'var(--success-color)' if veilig else 'var(--alert-color)' %}
ha-state-icon {
--card-mod-icon-color: {{kleur}};
}
state-display {
color: red;
}