That was exactly what I needed. Awesome work. Thank you very much.
4 Likes
May I also another question ? After editing all of the icons became animated whenever I refresh the page. The icons float from left to the place where they are located. Is there a way to turn that off ?
Ask and you shall receive.
type: custom:mushroom-template-card
primary: I Like Big Mushrooms
secondary: And I can not lie
icon: mdi:mushroom
layout: horizontal
card_mod:
style: |
ha-card {
--card-primary-font-size: 20px;
}
10 Likes
Or if you preferā¦
type: custom:mushroom-template-card
primary: I Like Big Mushrooms
secondary: And I can not lie
icon: mdi:mushroom
layout: horizontal
card_mod:
style: |
ha-card {
--card-secondary-font-size: 9px;
--card-secondary-font-weight: lighter;
--card-primary-font-weight: normal;
}
4 Likes
Here is my current person home status line example
the purpose of this is to have a different view for each person using the system (companion app) and have the top line the same on every view/page. The last Icon is to indicate if the garage door is locked.
To include this status on every view/page, i use the following
title: "Theater"
icon: mdi:film
cards:
- !include ../Includes/Phones.yaml
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Theater Room
- type: custom:mushroom-light-card
entity: light.theater
show_color_control: true
show_brightness_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:ceiling-light
name: "Theater Ceiling"
- type: custom:mushroom-light-card
entity: light.led_light_strip_2
show_color_control: true
show_brightness_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:led-strip-variant
name: "Back Light"
The include on every page/tab/view etc
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.lee
icon_color: green
name: LB
content_info: name
icon: mdi:face-man
- type: entity
entity: person.caroline
icon_color: green
name: CC
icon: mdi:face-woman-outline
content_info: name
- type: entity
entity: person.aimee
icon_color: green
name: AC
icon: mdi:face-woman-outline
content_info: name
- type: entity
entity: person.blake
icon_color: green
icon: mdi:face-man
name: BC
content_info: name
- type: entity
entity: person.kitt
icon_color: green
icon: mdi:face-man
name: KB
content_info: name
- type: template
double_tap_action:
action: none
entity: binary_sensor.door_window_sensor_158d000276a147
icon: |-
{% set state=states('binary_sensor.door_window_sensor_158d000276a147') %}
{% if state=='off' %}
mdi:garage-variant-lock
{% elif state=='on' %}
mdi:garage-open-variant
{% else %}
mdi:garage-alert-variant
{% endif %}
icon_color: |-
{% set state=states('binary_sensor.door_window_sensor_158d000276a147') %}
{% if state=='off' %}
green
{% elif state=='on' %}
orange
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
alignment: center
4 Likes
Does this work better for you?
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/ls50.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
1 Like
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