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
Hi, quite new to mushroom cards, but going fairly good.
However i want to achieve something but not sure which mushroom to take.
When i press a mushroom button, i want to get my todo or shopping list.
How do you guys do that with mushrooms?
Depends on how you want your to-do-list displayed.
I for one have my shopping list on a seperate page of the dashboard, a sub view to be exact, and just navigate there. I use a Mushroom template-card for that.
You could also go with a pop-up, then it will be a different service-call, but still the template card.
For these kind of things, a template-card is the most easy to use, as you can template everything, from primary information to the icon and colors.
Hi thx for the quick answer.
Yeah i thought you would say to make seperate page to navigate to.
Ok im gonna that, cause im not sure the popup will be handy
Other question about the template card…
- Can you change the icon according to the state (open and closed)?
- Similarly, can you change the color?"
The pop-up comes from browser_mod, so always a question. I like the sub-view for my shopping list, as I can easily display this sub-view on my phone while running errands. 
That was my main reason, to do it like that.
And to your other questions: yes and yes. Both not a problem!
The YAML code could look like this:
- type: custom:mushroom-template-card
primary: Lichtmodus
secondary: '{{ state_translated(entity) }}'
icon: >-
{{ 'mdi:lightbulb-multiple-outline' if is_state(entity, 'on') else
'mdi:lightbulb-multiple-off-outline' }}
entity: input_boolean.light_mode
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else '''' }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
Does this help, or do you need a little more explanation on this?
1 Like
Hi not at all, will get it now, thank you so much !
(bedankt als we zeggen :p)
1 Like