do you mmind sharing the code for one of the cards ?
i struggle to add the background image in the template or entity card (hiowever it works for chips somehowā¦)
thanks!!
Sure. But if you mean the main background. You have to change it from raw configuration editor
square: false
columns: 1
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Otomasyonlar š
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi
primary: Sleep Mode
entity: input_boolean.notify_home3
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/sleep.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home3', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi
primary: Movie Time
entity: input_boolean.notify_home
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/movietime.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi
primary: Alarm
entity: input_boolean.notify_home4
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/alarmpanel2.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home4', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi
primary: Guest Mode
entity: input_boolean.notify_home1
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/guest.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home1', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi
primary: Music Follow
entity: input_boolean.notify_home7
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/musicfollow.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home7', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi
primary: Traffic 35
entity: input_boolean.notify_home5
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/traffic35.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home5', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi
primary: Traffic 45
entity: input_boolean.notify_home6
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/traffic45.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home6', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-template-card
icon: mdi
primary: Windows
entity: input_boolean.notify_home8
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/windows.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home8', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi
primary: Face Recognition
entity: input_boolean.face_recognize
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/icons/automation/facerecognition.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.face_recognize', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-entity-card
secondary_info: none
layout: vertical
icon: ''
tap_action:
action: toggle
icon_color: amber
- type: custom:mushroom-entity-card
layout: vertical
secondary_info: none
tap_action:
action: toggle
icon_color: amber
- type: custom:mushroom-entity-card
layout: vertical
secondary_info: none
icon: mdi:window-closed-variant
fill_container: false
tap_action:
action: toggle
icon_color: amber
2 Likes
Much better. Thank you very much again.
Did you find a way to make the icon flash? Iām showing an icon when myu car is charging and would be a nice effect if the icon could flash slowly (or even better fade in/out slowly).
Does anyone else know?
I found this tutorial but not sure how to make it work with Mushroom:
Hi,
unfortunately I didnāt find a solution either.
In custom button card it works without problems but apparently not in mushroom.
As it turns out, itās not possible.
Is this what you want?
type: custom:mushroom-template-card
primary: Help!
secondary: It's on fire!
icon: mdi:fire
icon_color: red
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
15 Likes
Do you have an idea how to change the font-color of the chip content?
I tried a lot but won no price yet.
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.MYPERSON
use_entity_picture: true
layout: vertical
hold_action:
action: navigate
navigation_path: dennis
hide_name: false
hide_state: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
content: |-
{% if is_state('person.MYPERSON', 'home') %}
mi casa
{% elif is_state('person.MYPERSON', 'not_home') %}
unterwegs
{% else %}
{{ states('person.MYPERSON') }}
{% endif %}
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
I love the weather card but Iād like to use some of my own data from my weather stationā¦
Is that possible?
Hereās a capture of what it looks like nowā¦
I have weather data like this ā
UV, Wind speed, humidity, pressureā¦ etc.
Plus Iād like to use daily forecast instead of hourly or both.
Thank you!
Is this it?
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
content: Mushroom
card_mod:
style: |
ha-card {
--text-color: Chartreuse;
}
4 Likes
Goddamnit! I fiddled with like everything from primary-text-color and all I found in examination via Google Chrome.
And yes, thatās it. 
And tip to find the right designations via Chrome as all these cards are clickable and the code wonāt highlight like in static code?
I thought I found the color setting for the person card control in --state-home-color but that doesnāt work as expected eitherā¦
1 Like
Click on main html code, ctrl-f, search for mushroom and drill down from there. As you drill down elements will be highlighted.
2 Likes
Thatās exactly what it isā¦
Thank you.
Wow - thank you! That is almost exactly what I wanted! I guess there is no way to only blink the actual icon and not the colored circle around it?
Edit:
Trying to make it condition based so that the icon only blinks when the car is charging. Any idea why this is not doable?
style: |
{% set state=states('sensor.easee_laddbox_status') %}
{% if state == 'charging' %}
mushroom-shape-icon {
animation: blink 3s ease-in infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
}
div#header__title {
font-size: 10px;
}
thank you!
that is actually what Iāve need, i think my media / radio card is finished now
I need to work with some photos and paddings but iām getting there!
7 Likes
This worked for me.
card_mod:
style: |
{% set state=states('sensor.rhys_phone_detected_activity') %}
{% if state == 'still' %}
mushroom-shape-icon {
animation: blink 3s ease-in infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
}
div#header__title {
font-size: 10px;
}
5 Likes
It was the indention, as always 
Thank you for the help!
Hi, Iām trying your code and erroring out. Not sure what Iām missing:
type: custom:mushroom-template-card
primary: Powder Room
secondary: ''
icon: mdi:fan
layout: vertical
entity: switch.powder_room_fan
icon_color: |
{% if is_state("switch.powder_room_fan", 'on') %}
orange
{% endif %}
style: |
{% set state=states('switch.powder_room_fan') %}
{% if state == 'on' %}
mushroom-shape-icon {
animation: blink 3s ease-in infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
}
div#header__title {
font-size: 10px;
}
but Iām getting the error:
Visual editor is not supported for this configuration:
At path: style -- Expected a value of type `never`, but received: `"{% set state=states('switch.powder_room_fan') %}\n{% if state == 'on' %}\n mushroom-shape-icon {\n animation: blink 3s ease-in infinite;\n }\n @keyframes blink {\n 50% {opacity: 0;}\n }\n{% endif %}\n ha-card {\n --ha-card-background: rgba(0, 0, 0, 0);\n box-shadow: none;\n }\n div#header__title {\n font-size: 10px;\n }\n"`
You can still edit your config in YAML.
Also, is it possible to change the icon based on state? It tried using the below code in the icon section but it doesnāt work so Iām thinking itās not implemented in the card:
{% if is_state("states.powder_room_fan", 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
In the first code block, look at the indention. Not sure that is the issue but here is how mina looks:
style: |
{% set state=states('sensor.easee_laddbox_status') %}
{% if state == 'charging' %}
mushroom-shape-icon {
animation: blink 3s ease-in infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
To change icon based on state you can do it like this:
icon: |-
{% set state=states('sensor.easee_laddbox_power') %}
{% if state=='0.0' %}
mdi:ev-station
{% else %}
mdi:battery-charging
{% endif %}
1 Like
Strange, believe I have the indentation is right but still get the error.
Your icons state code worked like a charm though! Thanks!
Someone managed to animate an icon on the chip card? Type template.