thank you very much! it is work!
i have tried to modify the " Calendar Clock Animation (changed)".
i would like a mdi:calendar-clock icon grey when input_boolean.menu_condizionatori_mobile is off, while Calendar Clock Animation (changed) animation when the input_boolean.menu_condizionatori_mobile is on.
what am i wrong?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.menu_condizionatori_mobile
icon: mdi:calendar-clock
icon_color: grey
primary: Calendar Clock
card_mod:
style: |
{{% if is_state(config.entity, 'on') %}
ha-state-icon {
--icon-color: purple;
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
}
{% else %}
{% endif %}
display: flex;
}
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
card_mod:
style:
mushroom-shape-icon$: |
{{% if is_state(config.entity, 'on') %}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 67% 67%;
clip-path: circle(17% at 67% 67%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
Try like this.
Replace the input_boolean with your own one.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.bedroom_fan
icon: mdi:calendar-clock
icon_color: grey
primary: Calendar Clock
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
display: flex;
{% if is_state(config.entity, 'on') %}
--icon-color: rgba(var(--rgb-purple), 1)
{% else %}
{% endif %}
}
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--shape-color: rgba(var(--rgb-purple), 0.2) !important;
{% else %}
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
entity: input_boolean.bedroom_fan
icon_color: grey
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
transform-origin: 67% 67%;
clip-path: circle(17% at 67% 67%);
{% if is_state(config.entity, 'on') %}
--icon-color: rgba(var(--rgb-purple), 1);
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
card_mod:
style: |
ha-card {
height: 66px;
}
2 Likes
Animation is fine but there it looks like stack-in-card is showing a border.
This is how it is showing to me.
I have to add border: 0px to both mushroom cards.
But why?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style: |
ha-card {
border: 0px !important;
}
ha-state-icon {
clip-path: inset(26% 0 0 0);
}
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
border: 0px !important;
}
ha-state-icon {
animation: lid 1s ease infinite;
clip-path: inset(0 0 75% 0);
transform-origin: 50% 25%;
}
@keyframes lid {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-5px) rotate(-37deg); }
20% { transform: translateY(-5px) rotate(31deg); }
30% { transform: translateY(-5px) rotate(-25deg); }
40% { transform: translateY(-5px) rotate(19deg); }
60% { transform: translateY(-3px); }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Differences in theme being used. I use minimalist which has no border by default.
1 Like
Got you. Thanks!
hi @dimitri.landerloos ,
thanks for this awesome styling guideline.This takes my HA UI to the next level.
I’ve got one question: is it possible to add a icon transition to e.g. the template card? Lets say we start with mdi:hamburger and change the icon after 2s to mdi:pizza. After another 2s we change the icon back to mdi:hamburger and so on? Furthermore I wonder if its possible to give both a different icon color.
Do you have any idea if this is possible?
Thanks in advance.
Sure, definitely possible. but not as easy as you might expect as we cant use --card-mod-icon directly in animations.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:hamburger
icon_color: brown
card_mod:
style: |
ha-card {
width: fit-content;
background: none;
border: none;
box-shadow: none;
}
mushroom-shape-icon {
opacity: 0;
animation: displaytest 4s steps(1, end) infinite;
}
@keyframes displaytest {
0% {opacity: 0;}
25% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:pizza
icon_color: red
card_mod:
style: |
ha-card {
position: absolute;
top: 0;
width: fit-content;
background: none;
border: none;
box-shadow: none;
}
mushroom-shape-icon {
opacity: 0;
animation: displaytest 4s steps(1, end) infinite;
}
@keyframes displaytest {
0% {opacity: 1;}
25% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
So here i am overlapping 2 cards and then transitioning between the 2 icons.
1 Like
Thank you. Thats cool and works like a charm when using Chrome at the desktop pc. Sadly it seem that this doesn’t work with the iOS Companion App. It just shows an overlapped image. 
If I’m using icon_type: entity-picture with Media Card, how to change size of this picture icon?
Below should do it. no guarantee that the picture will look good in it though 
card_mod:
style:
mushroom-shape-avatar$: |
.container {
--icon-size: 200px;
}
1 Like
Excellent, works great and quality is good, atleast with quick test.
Hey, i built a version of this specifically made to make this layout work neatly with different sizes.
check out my post here:
hopefully it works for your use case 
Wow, this has helped me a lot with some things, but here’s a question… I have, for example, an air purifier card and three chips underneath it. Is there any way to make it so that within the same vertical-stack, the purifier card and the chips are on the same line, not “underneath”? And that the card would occupy, for example, 75% of the width, and the chips would occupy 25%?
Now I have:
type: vertical-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.ochistitel_vozdukha
icon_animation: true
fill_container: false
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/1/
name: Очиститель воздуха
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ochistitel_vozdukha_tvoc
name: AQI
use_entity_picture: false
icon: mdi:air-filter
icon_color: green
- type: entity
entity: sensor.ochistitel_vozdukha_filter_use
icon_color: green
icon: mdi:clock-remove-outline
- type: entity
entity: sensor.ochistitel_vozdukha_filter_life_remaining
icon_color: green
icon: mdi:percent-circle-outline
alignment: justify
Perhaps it can be done through horisontal-stack, but I have not tried it. Perhaps it is necessary to “influence” the mushroom-cards somehow…
Thank U!
you mean the issue you have is that you have this:
but you want this:
you can change to a horizontal stack and then play around with the widths of each card with card mod:
Code
type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: light.bedroom_chest_lamp
icon_animation: true
fill_container: false
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/1/
name: Очиститель воздуха
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
width: 150%;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.average_cost
name: AQI
use_entity_picture: false
icon: mdi:air-filter
icon_color: green
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:clock-remove-outline
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:percent-circle-outline
alignment: justify
card_mod:
style: |
ha-card {
position: relative;
left: 50%;
width: 50%;
}
or you could just install the layout card from Hacs. a little hard to understand at first, but actually way easier than modifying each card with card mod.
Code
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-fan-card
entity: light.bedroom_chest_lamp
icon_animation: true
fill_container: false
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/1/
name: Очиститель воздуха
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.average_cost
name: AQI
use_entity_picture: false
icon: mdi:air-filter
icon_color: green
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:clock-remove-outline
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:percent-circle-outline
alignment: justify
layout:
grid-template-columns: auto 27%
grid-template-rows: auto
max_cols: 2
options for this card are here:
Yes, I meant the second example. I realize that the thing is trivial, but I looked and tried to apply to the whole “type” of “stack”-s, but it didn’t work. There’s just a little bit of combing left to do (well, that’s just me) and everything will be fine.
Thank you very much!
Odd. Seems that you need to use background instead now for this card.
Ill look into it because --shape-color still works for the Template card for example.
EDIT: --shape-color still works. The light needs to be on for it to take effect. If you want to change the color whether light is off or on use background instead. The remaining syntax is the same. Ill update the guide to make this clear and check whether this also applies to things like the cover card.
1 Like
–background-color: doesn’t work in my light card.
–shape-color doesn’t even seem to work in a template card
