Are Chip Template cards able to support badge icons, or is it not possible by design?
Wanted to know, before issuing a feature request. Cheers
Hello friends, I’m wondering if it’s possible to change the appearance of the slider on a custom card so that it looks like the standard one from HA? or the slider design cannot be changed?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: humidifier.uvlazhnitel_2_zal
secondary: |
{% if states(config.entity) == 'on' %}
humidification
{{state_attr(config.entity, 'humidity')}}%
{% else %}
Выключено
{% endif %}
tap_action:
action: toggle
icon: mdi:air-humidifier
layout: horizontal
icon_color: |
{{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
primary: Humidifier
fill_container: false
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
}
.: |
ha-state-icon {
{% if state_attr(config.entity, 'action') ==
'humidifying' %}
animation: air 1.5s infinite;
{% endif %} }
ha-card {
border: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
}
@keyframes air {
50% { clip-path: polygon(100% 0, 64% 56%, 100% 100%, 0 100%, 0 0);
}
- type: custom:mushroom-humidifier-card
entity: humidifier.uvlazhnitel_2_zal
collapsible_controls: false
show_target_humidity_control: true
layout: horizontal
card_mod:
style:
mushroom-humidifier-humidity-control$: |
mushroom-slider {
--main-color: #2196f3 !important;
--bg-color: #195382 !important;
}
.: |
mushroom-state-item {
display: none;
}
ha-card {
margin-left: -8px !important;
border: none;
}
1 Like
I really like this one! Is there a way to combine it with this:
card_mod:
style: |
:host {
–mush-icon-size: 65px;
–mush-icon-symbol-size: 0.8em;
}
Would be great if I could animate the bigger icon, but cant get it to work
it’s not possible with mushroom but can be done with card_mod
I use it to count lights on
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: "{{ expand(states.light.lights_off) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
top: -10%;
right: 60%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
}
entity: light.lights_off
content: Lights on
icon: mdi:lightbulb
icon_color: amber
4 Likes
thx! is it posible to have 2 badge icons?
add another underneath with ha-card:before
and play with the position
Thanks, is there a way to make it so the Visual editor is still accessible?
unfortunately not, stack-in-card isn’t supported in visual editor.
you can do away with stack-in-card if you play with margins and borders
1 Like
thx!
1 Like
Hi,
I have an issue with animation, it does not work. I used code from Part 1 post:
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
with this code fan do not spin. I installed Mushroom via HACS and added to configuration.yaml:
frontend:
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
Any help would be appreciated
Marco
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
style:
mushroom-shape-icon$: |
:host {
--shape-animation: spin 1s linear infinite !important;
}
1 Like
--icon-animation
And
ha-icon {
Was deprecated a long time ago now. For icon animations use
animation
And
ha-state-icon {
You also dont need (and cant use)
mushroom-shape-icon$: |
Anymore to access the icon.
Just put
card_mod:
style: |
ha-state-icon {
animation: spin 1s linear infinite;
}
For shape animation (and icon together) use (like @VietNgoc mentions)
--shape-animation
But with this you do need
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: spin 1s linear infinite;
}
3 Likes
Looking for some help with 2 things.
Been using this mushroom-template-card for some months and decided to update my HA to the newest firmware version. and noticed after some time my “afvalwijzer script” stopped working. looking at it for couple of days but cant figure out why it stopped working.
Using the following script;
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.afvalwijzer_restafval
primary: restafval
secondary: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %}
Geen informatie
{% elif states('sensor.afvalwijzer_today') == "restafval" %} Vandaag
geweest. Kliko weer ophalen!
{% else %}
{% set restafval = (strptime(states(entity), '%d-%m-%Y').date()) %}
{% set delta = ((as_timestamp(restafval) - now().timestamp()) / (3600*24)) %}
{% if states(entity) == "Geen" %}Geen informatie
{% elif delta < 0.9 %}Vanavond kliko aan de straat!
{% elif delta < 1.9 %}Morgen ({{states(entity)}})
{% else %}Over {{delta | round(0, "floor")}} dagen ({{as_timestamp(restafval) | timestamp_custom("%A %d %B")}})
{% endif %}
{% endif %}
icon: mdi:recycle
icon_color: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %} grey {% elif
states('sensor.afvalwijzer_tomorrow') == "restafval" %} green {% else
%} grey {% endif %}
multiline_secondary: true
tap_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 0px;
}
- type: custom:mushroom-template-card
entity: sensor.afvalwijzer_papier
primary: Papier
secondary: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %}
Geen informatie
{% elif states('sensor.afvalwijzer_today') == "papier" %} Vandaag
geweest. {% else %}
{% set papier = (strptime(states(entity), '%d-%m-%Y').date()) %}
{% set delta = ((as_timestamp(papier) - now().timestamp()) / (3600*24)) %}
{% if states(entity) == "Geen" %}Geen informatie
{% elif delta < 0.9 %}Vanavond kliko aan de straat!
{% elif delta < 1.9 %}Morgen ({{states(entity)}})
{% else %}Over {{delta | round(0, "floor")}} dagen ({{as_timestamp(papier) | timestamp_custom("%A %d %B")}})
{% endif %}
{% endif %}
icon: mdi:delete
icon_color: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %} grey {% elif
states('sensor.afvalwijzer_tomorrow') == "papier" %} blue {% else %}
grey {% endif %}
multiline_secondary: true
tap_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 0px;
}
- type: custom:mushroom-template-card
entity: sensor.afvalwijzer_gft
primary: Groenafval
secondary: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %}
Geen informatie
{% elif states('sensor.afvalwijzer_today') == "gft" %} Vandaag
geweest. Kliko weer ophalen!
{% else %}
{% set gft = (strptime(states(entity), '%d-%m-%Y').date()) %}
{% set delta = ((as_timestamp(gft) - now().timestamp()) / (3600*24)) %}
{% if states(entity) == "Geen" %}Geen informatie
{% elif delta < 0.9 %}Vanavond kliko aan de straat!
{% elif delta < 1.9 %}Morgen ({{states(entity)}})
{% else %}Over {{delta | round(0, "floor")}} dagen ({{as_timestamp(gft) | timestamp_custom("%A %d %B")}})
{% endif %}
{% endif %}
icon: mdi:recycle
icon_color: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %} grey {% elif
states('sensor.afvalwijzer_tomorrow') == "gft" %} green {% else %}
grey {% endif %}
multiline_secondary: true
tap_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 0px;
}
- type: custom:mushroom-template-card
entity: sensor.afvalwijzer_plastic
primary: Plastic
secondary: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %}
Geen informatie
{% elif states('sensor.afvalwijzer_today') == "plastic" %} Vandaag
geweest. Kliko weer ophalen!
{% else %}
{% set plastic = (strptime(states(entity), '%d-%m-%Y').date()) %}
{% set delta = ((as_timestamp(plastic) - now().timestamp()) / (3600*24)) %}
{% if states(entity) == "Geen" %}Geen informatie
{% elif delta < 0.9 %}Vanavond kliko aan de straat!
{% elif delta < 1.9 %}Morgen ({{states(entity)}})
{% else %}Over {{delta | round(0, "floor")}} dagen ({{as_timestamp(plastic) | timestamp_custom("%A %d %B")}})
{% endif %}
{% endif %}
icon: mdi:recycle
icon_color: >-
{% if states('sensor.afvalwijzer_next_date') == "Geen" %} grey {% elif
states('sensor.afvalwijzer_tomorrow') == "plastic" %} green {% else %}
grey {% endif %}
multiline_secondary: true
tap_action:
action: more-info
This script normally showed me when the garbage will be picked up. Hopefully one of you can help me finding what has changed.
second issue i encounter is that my dashboard is not loading out itself. i first have to edit dashboard → rawconfig-editor → close it and it will show up.
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_number.XXXXXXXX_airco
icon: " "
card_mod:
style: |
.content {
position: relative;
flex-direction: column !important;
bottom: 20%;
}
on the XXXXX i want to have the user thats logged in ? Is that possible ?
entity is not templatable, so no, this is not possible. 
Ok, thanks
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.ruimte1_airco
icon: mdi:fan
icon_color: >
{{states("input_text.kleur_iconen_bleker")}}
tap_action:
action: call-service
service: script.airco
service_data:
option: "ruimte1_airco"
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: template
entity: media_player.ruimte1
icon: mdi:music
icon_color: >
{% if is_state('media_player.woonkamer', 'playing') %}
indigo
{% else %}
{{ states("input_text.kleur_iconen_bleker") }}
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state("climate.ruimte1_airco", 'cool') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite ;
{% endif %}
display: flex;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
{% if is_state('media_player.oefenzaal_tv', 'playing') %}
--icon-animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100%
{% endif %}
}
.shape {
perspective: 7px;
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
alignment: end
my first icon "fan " is rotating, but the second ( music) is not animating… what is wrong in my code ?
can you notice a difference between these 2 perhaps?
1 Like