My understanding is if the binary sensor is not templated, it’s not updating. The two that are working are lights and switches. From my perspective that is the source of your issue and what I was trying to explain.
For example switch the first card to fan from binary sensor. Everything works fine.
binary_sensor domain is not polling so Mushroom has no clue what to do.
What Mod does that icon come from?
Never mind found it
But it works fine on other HA instance.
Can you define other Ha instances?
I copied the same code from other HA where this displays just fine.
Also on this instance where it is not displayed correctly, when I put templates into template editor, they display the result just fine.
Templates are:
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count) %}mdi:door-open{% else %}mdi:door-closed{% endif %}
{{states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count }}
{{states.binary_sensor | selectattr('state', 'eq', 'off') | selectattr('attributes.device_class', 'eq', 'door') | list }}
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count)>0 %}mdi:door-open{% else %}mdi:door-closed{% endif %}
and respective results are:
mdi:door-closed
0
[<template TemplateState(<state binary_sensor.dvere_senzor_window_door_is_open_2=off; device_class=door, friendly_name=Dvere Senzor Window/door is open @ 2024-02-27T11:56:49.789948+01:00>)>, <template TemplateState(<state binary_sensor.dvere_senzor_window_door_is_open=off; device_class=door, friendly_name=Dvere Senzor Window/door is open @ 2024-02-27T11:56:49.790014+01:00>)>]
mdi:door-closed
I posted a link above a little, but here is on: GitHub - Mariusthvdb/custom-icons: Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. 
One more question about animation, I don’t understand which parameter is responsible for expanding the effect throughout the entire window in the icon? Ucan see white stripes on the sides of the animation rising up, I wanted the effect to fill this animation of the toaster completely inside.
- type: custom:mushroom-template-card
layout: vertical
entity: switch.socket
icon: mdi:toaster-oven
icon_color: red
primary: Toaster
secondary: "{{ states('sensor.power') | round(1) }} W"
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 30%;
margin: 12%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
Mushroom cards has completely transformed my dashboard 
But I saw something online where for light entities the slider appears behind the text (not below). Do any of you have an ideia how can this be done with mushroom like I saw below?
Yes it’s possible with Mushroom.
Feel free to load your code from an entity or two for advice.
This card has multiple data points on top of the slider (underlined in green)
Adjust these
width: 37%;
height: 30%;
left: 22px;
top: 30px;
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 37%;
height: 30%;
left: 22px;
top: 30px;
animation: cook 1.5s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
Thanks. This is my original code. I don’t know how to start (already have card-mod)
type: custom:mushroom-light-card
entity: light.ceiling_light
show_brightness_control: true
use_light_color: true
I’d recommend starting with this guide and learn a bit before we start with your request…
My code for this card is 184 lines long and that’s simple compared to what some folks have designed.
Thanks!
width: 37%;
height: 30%;
left: 11px;
top: 17px;
margin: 12%;
…is good for me
@LiQuid_cOOled Btw, can u tell me about that kitchen hood animation that I showed above? Is it possible to add a rising smoke effect? So that it smoke appears from below, and not from above?
Did you get the exhaust fan figure out?
Nope, I asked u in edited message above
I was unable to create the effect of smoke rising from below… I was only able to hide it from bottom to top and on the contrary, I cannot make the hiding go all the time from below in a circle.
sorry I missed the edit, message me the card code if you’d like.
Btw, I also had several questions regarding the lighting card (or template card with lighting):
I didn’t find the answer on my own or didn’t understand how to apply it, is it possible to show the current color of the entity as the native HA does?
I searched and tried to implement it myself, but so far to no avail, I would like to try the effect of a pulsating radius if the lighting is on (similar to how we do it with person cards).
Here is my code: Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2) - #48 by SoulAssassin
Here is the icon: Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2) - #55 by SoulAssassin
From bottom to top…
card_mod:
style: |
ha-state-icon {
animation: air 3s infinite linear;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 38% 0); }
0% { clip-path: inset(0 0 0 0 ); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
Hello everyone,
So, long story short, i am trying to recreate @rhysb dashboard setup from here
So far it seems that the styling part is defeating me
How it should look like:
How it looks for me
Also, blurring of the card doesn’t work with mushroom theme, only with the minimalist theme. However it still doesnt look like the original.
How it should look like:
Mine (mushroom theme)
Mine (minimalist theme)
Top sticky card:
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 0px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 4;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: absolute;
top: 0px;
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
/* Set width to match */
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;[quote="system, post:1, topic:693055, full:true"]
/* Match background to main card */
background: rgba(var(--rgb-card-background-color), 0);
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.1);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: 20px !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #
}
Bottom card:
card_mod:
style: |
ha-card {
/* Set padding of card */
padding: 8px 8px 12px;
/* Move card up to match header card */
margin-top: -10px;
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
Any help is welcomed.
Thanks