badge_icon: |-
{%- set event = as_timestamp(states(config.entity)) %}
{%- set now = as_timestamp(now()) %}
{% if (now) > (event) %}
mdi:exclamation-thick
{% endif%}
Figured that one out.
1 Like
Try like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) / 30 * 100 }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
mushroom-state-info$: |
.primary:after {
content: " (30 Days)";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: |
mushroom-badge-icon {
top: 30px;
}
2 Likes
Hey guys,
Is it possible to use animation in mushroom chip cards? I can figure it up…if it is possible can someone please reply here with an example code so I can see how?
Thank you guys!
Have a look here:
1 Like
How can I add empty line breaks?
If I add two line breaks to get two entities to the same point it only works if I add something like that “\n\n-” if I only add two “\n\n” the line breaks disappear?!
Thanks, Steffen
Awesome… will try 
Yepp… Sweden! Winter is coming 
Edit* Works great! You are best
1 Like
Hi everyone,
how can i translate this into mushroom.
So from custom buton card to Mushroom template card.
Thanks.
type: custom:button-card
entity: sensor.deebot_t8_queue_corridor
icon: mdi:shoe-print
name: Flur
size: 30%
state:
- styles:
icon:
- color: var(--card-background-color)
name:
- color: var(--card-background-color)
card:
- background-color: rgba(77, 163, 100, 0.5)
operator: '>='
value: 1
styles:
name:
- font-weight: bold
card:
- font-size: 12px
- width: null
- height: 60px
- color: var(--secondary-text-color)
icon:
- color: var(--secondary-text-color)
grid:
- position: relative
custom_fields:
notification:
- display: |
[[[
if (entity.state == "0")
return "none";
return "block";
]]]
- position: absolute
- right: 5%
- top: 5%
- height: 20px
- width: 20px
- font-size: 15px
- color: var(--card-background-color)
- font-weight: bold
- line-height: 20px
custom_fields:
notification: |
[[[ return entity.state ]]]
tap_action:
action: call-service
service: script.deebot_room_queue
service_data:
queue: deebot_t8_queue
room: corridor
Hi, I will reduce this space, can you help me?
Which is the custom parameter to modify in YAML file?
Hi!
Could you help me out?
they look like sh*t 
card_mod:
style:
.entity:nth-child(2)$: |
:host {
{{ '--paper-item-icon-color: blue ;' if is_state('input_select.washer_status', 'On')}}
}
state-badge {
{{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('input_select.washer_status', 'On') }}
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
.entity:nth-child(3)$: |
:host {
{{ '--paper-item-icon-color: blue ;' if is_state('input_select.dryer_status', 'On')}}
}
state-badge {
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('input_select.dryer_status', 'On') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
ha-card {
margin-top: -20px;
margin-bottom: -20px;
box-shadow: none;
background: rgba(0, 0, 0, 0);
}
What card are you trying to apply it to? Selectors are not from any Mushroom cards.
You can reduce the card margin width by adding masonry-view-card-margin: 2px 2px 4px to your theme. For the Grid Card you add grid-card-gap: 4px to your theme.
Thanks!
Now, is good but not all is good (sorry for my english).
I use mushroom-template-card in vertical-stack-in-card
to a glance card:
- show_name: false
show_icon: true
show_state: false
state_color: true
theme: mushroom_room
type: glance
entities:
- entity: switch.basement
icon: mdi:lightbulb
tap_action:
action: toggle
- entity: input_select.washer_status
icon: mdi:washing-machine
- entity: input_select.dryer_status
icon: mdi:tumble-dryer
Would it be easier to modify it if i use another card?
would kind of like to have minimalistic room card style.
1 Like
Nobody have a hint to add empty lines?
I have try many things but I always have to add a character or the line is deleted if there is only a line break with a \n.
Thansk, Steffen
Hi there,
I have following code:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-template-card
entity: climate.spalna_teplota
primary: Spálňa
secondary: >-
{{ states('sensor.58_2d_34_3a_1f_f3_temperature') }} °C | Ventil
otvorený na {{ states('sensor.spalna_ventil') }} %
icon: mdi:bed
icon_color: |
{% if is_state('sensor.spalna_ventil', '0.00') %}
grey
{% else %}
red
{% endif %}
layout: horizontal
fill_container: true
multiline_secondary: true
card_mod:
style:
mushroom-shape-icon$: |
{%- set sensor = states('sensor.spalna_ventil') %}
{%- if sensor >= 0.00 %}
ha-icon {
--icon-animation: pulse 2s ease-in-out infinite;
}
- type: custom:mushroom-climate-card
entity: climate.spalna_teplota
icon_type: none
primary_info: none
secondary_info: none
show_temperature_control: true
collapsible_controls: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.7);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.7);
}
I want to achieve bigger icon size and working animation, if the senzor value is bigger as 0.00.
Thanks for reply.
Hello everyone,
Are there any guides on recommended colours to use ?
Hi @rhysb,
Although, used vertical-stack-in-card
but the inner mushroom-template-card still shows the borders.
How to hide it.
Here is my code:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
fill_container: true
entity: person.admin
layout: vertical
multiline_secondary: true
picture: /local/img/avatar.png
primary: '{{- states(''person.admin'') -}}'
secondary: null
badge_icon: '{{- state_attr(''person.admin'',''icon'') -}}'
badge_color: |-
{% if is_state('person.admin','home') %}
green
{% elif is_state('person.admin','nothome') %}
red
{% else %}
orange
{% endif %}
tap_action:
action: more-info
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: fds_iphone_xr_battery_level
content_info: none
icon: >-
{% set bl = states('sensor.fds_iphone_xr_battery_level') | int %} {%
if bl < 10 %} mdi:battery-outline {% elif bl < 20 %} mdi:battery-10 {%
elif bl < 30 %} mdi:battery-20 {% elif bl < 40 %} mdi:battery-30 {%
elif bl < 50 %} mdi:battery-40 {% elif bl < 60 %} mdi:battery-50 {%
elif bl < 70 %} mdi:battery-60 {% elif bl < 80 %} mdi:battery-70 {%
elif bl < 90 %} mdi:battery-80 {% elif bl < 100 %} mdi:battery-90 {%
elif bl == 100 %} mdi:battery {% else %} mdi:battery-unknown {% endif
%}
icon_color: >-
{% set bl = states('sensor.fds_iphone_xr_battery_level') | int %} {%
if bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30 %} orange {%
elif bl < 40 %} orange {% elif bl < 50 %} yellow {% elif bl < 60 %}
yellow {% elif bl < 70 %} green {% elif bl < 80 %} green {% elif bl <
90 %} green {% elif bl < 100 %} green {% elif bl == 100 %} green {%
else %} grey {% endif %}
tap_action:
action: more-info
Share the full code. That snippet doesn’t produce the issue.
I presume you mean Vertical Stack. Try using vertical-stack-card-margin: 2px
I would suggest using Mushroom Chips instead. There is documentation and plenty of examples for applying the animations to Chips.
If you wanted to use them on glance cards, you would need to redo/adjust the clip-path for the state-badge which is slightly larger that the icon.