Works!
And it made all the difference. Thank you!
How are you so quick in responding? Much much appreciated
I get a notification when someone replies to me directly 
Of course, but what I mean to say is that you spot the correction pretty quick and reply right away. haha
Anyway, any tips on the easiest way to change the background image of my dashboard?
I have uploaded an image in www under a newly created folder called pictures.
I think I am supposed to refer to it as /local/pictures/wallpaper_2.png
Does this go into Raw Configuration under views:?
Best way is probably to edit your theme. Great documentation on themes here:
And here:
When you have written a guide on how to style almost any element in the mushroom cards you tend to get quite familiar with the syntax so i can pretty quickly just see what is going wrong 
Guide i am talking about is here:
Hi Folks,
I’ve been wrangling with code for days, basically I’d like when a certain electrical outlet is turned on the washing machine icon to use shake animation, I report the code, does anyone have any idea why nothing happens?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bagno
secondary: |-
{{ states('sensor.meter_plus_9197') }}°C |
{{ states('sensor.meter_plus_9197_umidita') }} %
icon: mdi:bathtub
entity: light.bedroom_lights
icon_color: |-
{% if is_state('light', 'on') %}
orange
{% elif is_state('light', 'on') %}
orange
{% elif is_state('light.', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/bagno
hold_action:
action: none
multiline_secondary: false
layout: horizontal
fill_container: true
double_tap_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
--icon-size: 95px;
}
:host {
--mush-icon-size: 77px;
height: 66px;
margin-left: -35px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: Entity
entity: switch.smart_plug_1801166035215925131634298f110baf_outlet
double_tap_action:
action: none
content_info: none
icon: mdi:washing-machine
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-state-icon
{
{% if is_state('switch.smart_plug_1801166035215925131634298f110baf_outlet','on') %}
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
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);
}
@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); }
}
alignment: end
Try like this. you cant access the icon of a chip through the chip itself. you have to dig from the main chip card to the correct chip.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bagno
secondary: |-
{{ states('sensor.meter_plus_9197') }}°C |
{{ states('sensor.meter_plus_9197_umidita') }} %
icon: mdi:bathtub
entity: light.bedroom_lights
icon_color: |-
{% if is_state('light', 'on') %}
orange
{% elif is_state('light', 'on') %}
orange
{% elif is_state('light.', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/bagno
hold_action:
action: none
multiline_secondary: false
layout: horizontal
fill_container: true
double_tap_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
--icon-size: 95px;
}
:host {
--mush-icon-size: 77px;
height: 66px;
margin-left: -35px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: Entity
entity: switch.smart_plug_1801166035215925131634298f110baf_outlet
double_tap_action:
action: none
content_info: none
icon: mdi:washing-machine
tap_action:
action: more-info
hold_action:
action: none
alignment: end
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('switch.smart_plug_1801166035215925131634298f110baf_outlet','on') %}
animation: shake 400ms ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 58%;
{% else %}
{% endif %}
}
@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 wash {
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); }
}
check out my mushroom card mod guide here:
Hi!,
Works!, brilliant thanks for the code, now i have understand my errors, thank you very much.
I will study the documentation you provided me also
Have nice day
They’re 5:4 here’s the code.
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.blue_iris_front_right
name: Front Door
aspect_ratio: '5:4'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__scrim {
-webkit-backdrop-filter: blur(10px) !important;
}
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Front Right
secondary: Foscam
icon: mdi:cctv
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
ha-state-icon {
animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
.: |
ha-card {
margin-left: 2px;
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.blue_iris_front_right
card_mod:
style: |
ha-card {
margin-right: 14px;
margin-left: 14px;
margin-top: -4px;
Dont know if this has been discussed before. but i have consistently wondered whether you could apply a box-shadow to the icon itself. and it is apparently possible which also means that you can animate it like this:
it is not technically a box-shadow. but it is a filter with the drop-shadow attribute.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-state-icon {
animation: ping 2s ease-in-out infinite;
}
@keyframes ping {
0% {filter: drop-shadow(0px 0px 0px rgba(var(--rgb-green), 1));}
80% {filter: drop-shadow(0px 0px 35px transparent);}
100% {filter: drop-shadow(0px 0px 0px transparent);}
}
If you wanted to just add a shadow thats similar to the minimalist theme default (probably also close to mushroom theme) then the below should do it 
card_mod:
style: |
ha-state-icon {
filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
}
Just thought it was cool, so figured i would post about it here
6 Likes
Hello, something similar could be done for the color of the icon, which would be set to the color of the configured entity Using card type, template
Thank you!
Sorry is this a question or a statement? if it is a question, then yes. something like this should work:
card-mod-card-yaml: |
.: |
ha-card.type-custom-mushroom-light-card ha-state-icon{
{% if config.entity is defined %}
{% if states(config.entity) == 'on' and state_attr(config.entity, 'rgb_color') != none %}
color: rgba({{ state_attr(config.entity,'rgb_color') | join(', ')}}, 1) !important;
{% endif %}
{% endif %}
}
or if you just want to set it to whatever color based on the state of an entity you can do it like this:
card-mod-card-yaml: |
.: |
ha-card.type-custom-mushroom-light-card ha-state-icon{
{% if config.entity is defined %}
{% if states(config.entity) == 'on' %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
{% endif %}
}
the first if defined check is just to ensure that the card wont be affected at all if no entity with that name exists. otherwise the icon would be colored with nothing which will look strange
1 Like
Hi All,
I need some help fixing this code. I want to animate motion sensor but it is not working.
type: custom:mushroom-template-card
primary: Open Plan
secondary: |-
{% if is_state(entity, "on") %}
Detected
{% else %}
Clear
{% endif%}
icon: |-
{% if is_state(entity, "on") %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
entity: binary_sensor.62_ms_dining_room_motion
icon_color: |-
{% if is_state(entity, "on") %}
red
{% else %}
grey
{% endif %}
layout: vertical
fill_container: true
multiline_secondary: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state(config.entity, 'on') %}
.shape {
--shape-animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
.: |
ha-state-icon {
animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
{% endif %}
Thank you.
Try like this.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
--shape-animation: motion 2s linear infinite;
{% else %}
{% endif %}
}
@keyframes motion {
0%, 100% { background: rgba(var(--rgb-blue), 0.3); }
50% { background: rgba(var(--rgb-blue), 0.2); }
}
.: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: clip 2s linear infinite;
{% else %}
{% endif %}
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
not recommended to put your if statements so far outside of your targeted objects.
put your if statement inside the object you want to style, and then the only variable should be the specific thing you are changing in the object. in this case the color of the background of the shape. and then the clip path change in the icon.
2 objects being targeted, so better to have 2 if statements in this case. i also threw in an {% else %} for good measure. but it is not required
This is such a nice theme, really like the square icons. What I don’t like, is that the map is dark and very hard to read. I tried to figure out how to change this, but can’t… 
Would prefer a light colored map, even though the theme is dark.
Any ideas, can I change this in mushroom-square.yaml? Any help is greatly appreciated.
Greetings from Mannheim, Germany
My solution strays a bit from the mushroom cards discussion because it doesnt edit the mushroom theme, or a mushroom card. but you can do this in the specific map card if you had it in a card.
type: map
entities:
- entity: person.dimitri_landerloos
dark_mode: false
card_mod:
style:
ha-map$: |
#map.dark {
--map-filter: none !important;
}
#map {
--map-filter: none !important;
}
Now since you dont have it in a card, i can understand why you would want to change it in a theme. but i have unfortunately not been able to find a way to do that.
So for now the only real solution i can offer you is to make a browser mod popup card that opens the map that you want and apply the above card_mod to it, instead of having the popup be more-info.
sorry but that is all could figure out for now…
2 Likes
Hi Dimitri,
wow, you put a lot of thought into this. I am pretty new to this stuff, I will look into your suggestion in the next few days…
Thank you
1 Like
I had to try right away. Got your code implemented, works like a charm. I installed browser mod and now I am stuck!! I don’t have the hint of an idea how to implement a button for the pop-up… 
Thank you. I will try this out and let you know
So lets say you have a mushroom template card, that when you click on it like a normal card, instead of the “more info” dialog popping up you want a different card to pop up.
you can do it like this:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
entity: light.office_main_light
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.dimitri_landerloos
dark_mode: true
card_mod:
style:
ha-map$: |
#map.dark {
--map-filter: none !important;
}
#map {
--map-filter: none !important;
}
The tap_action and below will remain the same no matter what mushroom card you use
1 Like
Hi Dimitri
I applied this code but it is still not working, no animation, do you mind having a look when you have a few minutes?
Thank you