Please post your yaml. Cant help you unless we know what your config looks like.
Like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2px outset green;
}
.: |
ha-card {
{% if states('light.aanrecht') == 'on' %}
border: 2.5px outset blue;
{% endif %}
}
2 Likes
just realized this is custom-button-card - with mushrooms inside!
aha! that i missed…the 3 dots in middle!
once again great job!!!
[solved]
Like this:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-fluorescent-tube
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
:host {
--mush-icon-size: 80px;
height: 66px;
margin-left: -15px !important;
margin-top: 5px !important;
background: none !important;
}
So this is what I have now after your reply
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-fluorescent-tube
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
:host {
--mush-icon-size: 80px;
height: 66px;
margin-left: -15px !important;
margin-top: 5px !important;
background: none !important;
}
Unfortunately, it is still showing the background around the icon.
Works for me. Try with !important
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-fluorescent-tube
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
.: |
:host {
--mush-icon-size: 80px;
height: 66px;
margin-left: -15px !important;
margin-top: 5px !important;
background: none !important;
}
No luck, unfortunately.
This is the code for my whole card and see if I am contradicting one thing somewhere else?
type: custom:stack-in-card
mode: vertical
square: false
cards:
- type: grid
columns: 2
square: true
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-fluorescent-tube
icon_color: |-
{% set state=states('light.livingroom_lights') %}
{% if state=='on' %}
deep-purple
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
:host {
--mush-icon-size: 80px;
height: 66px;
margin-left: -15px !important;
margin-top: 5px !important;
background: none !important;
}
tap_action:
action: none
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.outside_lights
use_light_color: true
alignment: end
- type: button
name: Cabinet
show_name: true
icon: mdi:lightbulb-fluorescent-tube
show_icon: false
card_mod:
style: |
ha-card {
height: 130px;
width: 130px;
background: none !important;
{% if states('light.outside_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.outside_lights', 'on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
}
You just have style: | i have style:
Fix that and it works 
1 Like
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