This is fantastic! Excellent work and thanks for sharing. Think I’m going to dive in to this to replace mine.
Make a request on Github.
How can I change front size in template card? I want use style mode.
1 Like
This is the best I can do so far.
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: I Like Mushrooms in Small-Caps
secondary: null
icon: mdi:mushroom
layout: horizontal
card_mod:
style: |
ha-card {
font-variant: small-caps;
}
- type: custom:mushroom-template-card
primary: I Like Mushrooms in Italics
secondary: null
icon: mdi:mushroom
layout: horizontal
card_mod:
style: |
ha-card {
font-style: italic;
}
- type: custom:mushroom-template-card
primary: I Like Handwritten Mushrooms
secondary: null
icon: mdi:mushroom
layout: horizontal
card_mod:
style: |
ha-card {
font-family: "Lucida Handwriting";
}
8 Likes
You forgot the ever popular “I like Mushrooms in Tea”
3 Likes
Of course 
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!