And I want a ventilator card of this size, where the air quality indicator can fit somewhere and can be opened with a small arrow, where it says the status of the filter
if you help, I can edit it in photoshop to make it look like that
but I don’t really know how to program it :c
Post the code of your card in code blocks and yes photoshopping what you want will certainly help 
same behaivor the icon badge not working.
So nothing to do with the initial configuration you posted and nothing to do with card mod.
Likely its something with your entity states not being supported or mushroom doesnt like your entity states for some reason.
But sorry thats all i can say to help you there.
Thanks for response.
there is someone could you help me to understand the root cause ?
Hello Dimitri,
Happy Christmas to you and your family. I am using the Microwave animation cards with the following objective.
My Objective:
Step 1: The microwave will animate when the power status changes to “On” or “Off” using the input helper " input_select.microwave_status".
Step 2: The card will show the status of the Microwave when it is “On” or “Off”.
Issues I am encountering:
I have managed to achieve step 2 with no issue but I have difficulty showing the animation when the power status changes from Off to On. I can only see the icon of the Microwave machine change from red to orange when the machine is running but no animation of the Microwave. Could you please review my code and advice pls
Microwave Animation Ref:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_select.microwave_status
icon: mdi:microwave
entity_status: ''
friendly_name: input_select.microwave_status
value_template: |-
{% if is_state('input_select.microwave_status', 'running') -%}
running
{%- else -%}
off
{%- endif %}
icon_color: |-
{% if is_state('input_select.microwave_status','Running') -%}
amber
{%- else -%}
red
{%- endif %}
layout: vertical
primary: microwave
secondary: '{{states(config.entity) | capitalize}}'
tap_action:
action: Dropdown
card_mod: null
style: null
mushroom-shape-icon$: |
ha-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
animation: cook 1s linear infinite;' if is_state('input_select.microwave_status','running');
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
}
card_mod:
style: |
ha-card {
height: 120px;
}
Hello ,
I try to modify the padding and border of my mushroom-light-card. I read through this topic but whatever I try, it has literally no effect 
What I would like to do is the following:
I tried several things but without success. As an example, I do not understand why the following code has no effect (The code below looks like the upper part of the example image):
type: custom:mushroom-light-card
entity: light.wled_soundreactive
name: LED Strip
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
padding: 0;
}
:host {
border: none !important;
border-style: none;
}
I would appreciate any help. Thank you!
I want the possiblity to show an icon in the upperleft, and in the lowerleft
card_mod:
style: |
{% if states('binary_sensor.bureau_bewegingsmelder_occupancy') == 'on' %}
ha-state-icon::before {
content: 'visibility';
position: absolute;
font-family: 'Material Icons';
bottom: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-amber), 0.5);
color: rgba(var(--rgb-amber), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
{% if states('binary_sensor.bureau_bewegingsmelder_nachtlicht_occupancy') == 'on' %}
ha-state-icon::before {
content: 'visibility';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-amber), 0.5);
color: rgba(var(--rgb-amber), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
this code shows me only one. Can somebody help me with it ?
I was thinking something like this
in the favorite mode, the speed can be set between 1-14 with the slider
and display the letter next to the chip card if the filter replacement is imminent
if possible to do such things
there is a github project for something similar, but I don’t fully understand it, it’s not like that, but if I saw correctly, there you can assign the speed setting to the fan entity
Quite a few things wrong with this so ill try and be detailed and list each bit seperately. And please dont take this as criticism, in fact i love how you have asked your question. Very detailed.
I dont see what the stack in card is doing at all? Is there any need for it? You dont have multiple cards that you want to look like they are 1 card which is what the stack in card is used for.
There have been changes to the structure of the mushroom card CSS since the animations by rhysb, i updated the code for each here:
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7717 by dimitri.landerloos
You have some references that either refer to some card additions that i dont know about or that dont exist, each is listed in the below code block but i have added a comment with # in front:
#Not something that you can declare in mushroom cards.
entity_status: ''
#Not something you can declare in mushroom cards.
friendly_name: input_select.microwave_status
#I think you are wanting to put this is the 'secondary:' of the mushroom cards instead. Not a value template.
value_template: |-
{% if is_state('input_select.microwave_status', 'running') -%}
running
{%- else -%}
off
{%- endif %}
#Tap action exists, but i dont think Dropdown is an option. Unless you have something installed that i dont know about.
tap_action:
action: Dropdown
card_mod:
style:
something$: |
something else {
test: 0px;
}
animation: cook 1s linear infinite;' if is_state('input_select.microwave_status','running');
No. 1 you are missing a starting '. No.2 a template needs to start and end with either {{ 'something' if something }} or:
{% if something %}
something
{% endif %}
I prefer the second variety, i find it easier to read. Also keep in mind that the if statement will be case sensitive. You currently have a mix of if is_state ‘running’ and ‘Running’ one will be true one will be false.
So all in all your fixed code should look something like this:
type: custom:mushroom-template-card
entity: input_select.microwave_status
icon: mdi:microwave
secondary: |-
{% if is_state('input_select.microwave_status', 'running') -%}
Running
{%- else -%}
Off
{%- endif %}
icon_color: |-
{% if is_state('input_select.microwave_status','running') -%}
amber
{%- else -%}
red
{%- endif %}
layout: vertical
primary: microwave
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
{% if is_state('input_select.microwave_status','running') %}
animation: cook 1s linear infinite;
{% endif %}
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
First check that you have card mod installed and that after you installed you manually cleared the browser cache.
Then take a look at the guide in my profile, that should hopefully help
You can only have 1 ::before pseudo element per element you are targeting. But you can also use ::after
So like this (add your own if statements back):
card_mod:
style: |
ha-state-icon::after {
content: 'visibility';
position: absolute;
font-family: 'Material Icons';
bottom: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-amber), 0.5);
color: rgba(var(--rgb-amber), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
ha-state-icon::before {
content: 'visibility';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-amber), 0.5);
color: rgba(var(--rgb-amber), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
Btw you have an animation section with no keyframes for the animation, so the animation will not work.
Thank you very much! I just did not notice that card_mod is another extension. Now everything works.
Ha, cool you mention it. I don’t need the animation, so I removed it. Thanks for the help
Hello Dimitri,
Thank you so much for your time in correcting my code. I appreciate your correction and patience. Your code is working as expected and I am graciously grateful for your assistance.
I am new to this and I have no coding experience at all. I am learning and copying codes and modifying them. But since I have no background in coding that is why I am making a lot of mistakes.
Once again, I appreciate all your work, Sir.
Regards
Kwame
what i need too edit to has the title in normal font (no bolt), and no blue circle around the icon?
Edit: got it:
type: custom:mushroom-select-card
entity: input_select.advanced_heating_control_scheduler
name: Scheduler
layout: horizontal
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--card-primary-font-weight: normal;
margin-left: -15px;
mushroom-shape-icon
{
--shape-color: none;
--icon-color: #44739e;
}
}
Just to let you know that yes this works, but you should really think about indentation.
Should look like this:
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--card-primary-font-weight: normal;
margin-left: -15px;
}
mushroom-shape-icon {
--shape-color: none;
--icon-color: #44739e;
}
Dear Community,
i would like to modify my card to add the percentual of volume inside slider ( center ) and moving in the same raw all buttons and slider, it’s possible?
thanks in advance!
Please post your code in code blocks next time.
But does something like this work for you?
type: custom:mushroom-media-player-card
entity: media_player.dimitris_pc
volume_controls:
- volume_set
- volume_mute
- volume_buttons
show_volume_level: true
layout: horizontal
name: ' '
secondary_info: none
media_controls:
- repeat
- next
- play_pause_stop
- previous
- shuffle
- on_off
collapsible_controls: false
card_mod:
style:
mushroom-media-player-volume-control$: |
mushroom-slider {
position: absolute;
left: 68px;
width: 152px !important;
}
Yes my goal, i’m tried to copy and paste yout code but the result it’s different 
- type: custom:mushroom-media-player-card
entity: media_player.stploop_tv
volume_controls:
- volume_set
- volume_mute
- volume_buttons
show_volume_level: true
layout: horizontal
name: ' '
secondary_info: none
media_controls:
- repeat
- next
- play_pause_stop
- previous
- shuffle
- on_off
collapsible_controls: false
card_mod:
style:
mushroom-media-player-volume-control$: |
mushroom-slider {
position: absolute;
left: 68px;
width: 152px !important;
}
