Check the text styling section of the chip guide.
1 Like
Ugh, how did I miss that??? Thank you!
1 Like
I’d like to increase the entire icon size for the template cards. They are too small to be readable on my hub. However, the CSS listed in post #13 for template cards doesn’t seem to work. What am I missing?
For reference, this is what it looks like right now, and I’d like the icons to be readable from at least a couple feet away.
Definitely should work.
card_mod:
style: |
/* changes size of icon itself */
ha-state-icon {
--icon-symbol-size: 80px;
}
/* changes background size */
mushroom-shape-icon {
--icon-size: 100px;
}
2 Likes
Hi!
I have modded the follow code, but i don’t understand when am i wrong. I am not skilled in HA…
Someone help me?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style: |
mushroom-shape-icon$: |
ha-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$: |
ha-icon {
--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); }
}
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Please dont crosspost. I already answered your question in the mushroom thread.
1 Like
Hi, I have edit the code, but it is wrong and I don’t understand what I must change for the correct execution.
I’am sorry.
I linked you to a post with how the new animations work. Part 4 has the exact animation you want to use in it.
Try and apply it and if you are still having problems feel free to send a message 
1 Like
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