Happy to help! you might like the button card by @RomRider then. you can use JS templates in some parts of that card:
1 Like
OK this looks brilliant! Thank you again!
Hello! How can I make the gear button be to the right of the mushroom-template-card? Like on the screen below?
Thanks
Current card code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Увлажнитель
secondary: >-
{% if states(entity) == 'off' %}
Выключено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% else %}
Включено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% endif %}
icon: mdi:air-humidifier
icon_color: |-
{% if states(entity) == 'off' %}
{% else %}
green
{% endif %}
entity: humidifier.deerma_jsq2w_c041_humidifier
tap_action:
action: toggle
multiline_secondary: true
layout: horizontal
fill_container: true
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:cog
tap_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
title: Настройка увлажнителя
content:
type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: light.deerma_jsq2w_c041_indicator_light
name: Световой индикатор
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
- type: custom:mushroom-entity-card
entity: switch.deerma_jsq2w_c041_alarm
icon: mdi:alarm-light
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
fill_container: true
layout: horizontal
Add mode: horizontal to your stack in card.
You may want to add the card mod that i added to each card too, to make the layout look a bit nicer, but up to you 
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Увлажнитель
secondary: >-
{% if states(entity) == 'off' %}
Выключено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% else %}
Включено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% endif %}
icon: mdi:air-humidifier
icon_color: |-
{% if states(entity) == 'off' %}
{% else %}
green
{% endif %}
entity: humidifier.deerma_jsq2w_c041_humidifier
tap_action:
action: toggle
multiline_secondary: true
layout: horizontal
fill_container: true
card_mod:
style: |
ha-card {
width: max-content;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:cog
tap_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
title: Настройка увлажнителя
content:
type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: light.deerma_jsq2w_c041_indicator_light
name: Световой индикатор
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
- type: custom:mushroom-entity-card
entity: switch.deerma_jsq2w_c041_alarm
icon: mdi:alarm-light
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
fill_container: true
layout: horizontal
card_mod:
style: |
ha-card {
width: fit-content;
right: -90px;
}
2 Likes
Hi,
I’m trying to use mushroom card with card_mod and few things not working. what I’m doing wrong here why only few things works and few not works.
font size not working
font color not working
icon change not working
THX
type: custom:mushroom-entity-card
entity: switch.garden_lights_l1
name: only_mushroom-entity-card
layout: vertical
fill_container: false
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:lamp
card_mod:
style: |
:host {
color: white;
text-align: left;
font-size: 20px;
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
yellow;
color: red;
--card-mod-icon: mdi:car;
{% else %}
green;
--card-mod-icon: mdi:lamp;
{% endif %}
}
Hi, check out my guide below to find out how to style each element of the mushroom cards with card mod.
Its important with css that you are specific about which element you want to change. Changing things globally with :host will not always work or will sometimes have unintended behaviour.
Thanks a lot
1 Like
I’ve looked at the topic but couldn’t fix my issue.
simple grid with mushroom entity card not working on testing change icon.
why? what i’m doing wrong here?
square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: switch.guest_bathroom_lights_l1
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:mushroom-off
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:car;
}
columns: 3
Move the card mod over to the card you are actually styling. Like this:
square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: switch.guest_bathroom_lights_l1
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:mushroom-off
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:car;
}
columns: 3
thanks it’s working.
i can’t believe that i failed because of the tabs and spaces.
is there any good website for learning how to code yaml for beginners?
Well what you are doing with card mod is actually CSS.
The way that i have learned tends to be reading the documentation of the cards i install thoroughly. All of the options tend to be clearly explained
1 Like
Hello,
I’m sorry, but I can’t understand why my cookie, with your example 
doesn’t rotate when I use it on my HA ?
(I try to animate my chip icon)
Check out the updated animations here:
for your chip you should just be able to change it to ha-state-icon instead of ha-icon.
if you have multiple chips it may start to get more complex 
if you need more help feel free to send me a direct message
1 Like
Is there a way to put 3 different types of icons in .weather icon–small?
secondary_info:
- precipitation
- wind_speed
- humidity
Because in all 3 entities only rainy.svg appears.
Hy @rhysb ,
I’m trying to apply animated icons but it’s not working for me.
I tried with exactly the same code as you but nothing, the icon doesn’t move.
Do I need to do something to the icon?
Can you help me with the “signal” icon, for example?
type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: green
primary: Réseau
layout: vertical
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
animation: clip 2s steps(1) infinite;
}
@keyframes clip {
0% { clip-path: circle(0% at 50% 85%); }
20% { clip-path: circle(30% at 50% 85%); }
40% { clip-path: circle(55% at 50% 85%); }
60% { clip-path: circle(80% at 50% 85%); }
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
Thanks for your work!
Scroll up a couple of posts from the bottom…
1 Like
Thanks! I hadn’t read the last few posts on this topic…
Do you have some animation for the mdi:thermometer ?
I have tried with:
ha-state-icon {
animation: charge 3s linear infinite;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
but it’s not so good ^^
And for the pool like this one mdi:pool? Possible to animate the wave for exemple?
I havent made any animations. Just updated the ones by rhysb. So what you see is what you get. You may have to try and come up with your own idea for it.
So I managed to change the theme of my dashboard without making any changes to theme settings. I used some codes and browser mode to achieve that. My dashboard completely transforms from dark to white or from white to dark only by pressing a button. Now I can use it with any home assistant theme I want without applying changes to that theme. With the help of *browser mode you can also apply mode changes to specific device you own.
1 Like