This has got to be one of the best threads on this forum. I came from a Micasaverde Vera 2 earlier this year and could not be happier with Home Assistant and Mushrooms Cards with some customization. Thanks to Paul for making it and all of you in this thread who’ve posted tweaks to customize it! Here’s a look at my current dashboard.
22 Likes
Yes, that can be done like this:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
style: |
mushroom-shape-icon {
{{ '--card-mod-icon: mdi:lightbulb;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:lightbulb-off;' }}
--icon-color-disabled: rgb(var(--rgb-green));
--shape-color-disabled: rgba(var(--rgb-green), 0.2);
}
2 Likes
Yes, you can like this:
type: custom:mushroom-template-card
primary: It's hot
icon: mdi:fire
icon_color: red
entity: sensor.lounge_sensor_temperature
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
1 Like
thanks for this.
this is what i mean.
The waste will be collected in 2 days.
when I choose this:
if states(config.entity) > ‘2’ }}
it just stops blinking.
that means if I choose 0 (today), it will also stop blinking.
can i make it blink when the sensor reaches 0 days?
Thank you! Had a problem with Browser Mod, seems to be working now.
1 Like
Would it be possible to share your config for the browser_mod.popup?
I have a problem with the edges when there is a light with brightness slide.
Works like a charm! Thanks man!
Just amazing…
mind sharing the code ?
If you wanted it to blink at zero the condition would be states(config.entity) == '0'.
Wow that looks Nice. Would you be able to share some code? 
1 Like
Hey,
I’m trying on a chip to see if I can get these rings pulsing when a motion sensor within my group is active. Currently it only change color, but it would be nice if is possible to do the same as for an entity card:
Here is the code for the chip and a picture of the changing icon.
- type: template
entity: binary_sensor.motion_sensors
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('binary_sensor.motion_sensors', 'on') %}
--shape-animation: ping 1s infinite
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-pink), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
icon: >-
{{ 'mdi:motion-sensor-off' if
is_state('binary_sensor.motion_sensors', 'off') else
'mdi:motion-sensor' }}
icon_color: >-
{{ 'green' if is_state('binary_sensor.motion_sensors', 'off') else
'red' }}
content: null
tap_action:
action: more-info
EDIT: I think I got it:
- type: template
entity: binary_sensor.motion_sensors
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.motion_sensors', 'on') %}
animation: ping 1s infinite
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-pink), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
5 Likes
Hi,
I was curious how you get all your batteries when you click on the chip?
I just copied/pasted your code to try it out, but I only get batteries with “0%” ?
What do I have to change?
I saw this piece of code, but that is for the chip itself, right
{% if battery_level < 10 %}
1 Like
thanks for your help.
now when i set it to 0 it starts blinking.
the waste will be collected in 1 day.
If I set it to 1, it just stops blinking.
I would just like it to blink when the garbage is collected (at 0 days).
EDIT:
fixed with this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{{ '--shape-animation: ping 2s infinite;' if is_state('sensor.afvalwijzer_next_in_days', '0') }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-black), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
1 Like
thank you man you are awesome!
1 Like
Nice man & can you share config ?
this is now only for the office version is it also possible for the on version?
Is it possible to acheive this in the UI?
Nope but I provided the yaml code in that post.
Thank you for responding
Ok so I need to create a template, what folder do I put the yaml in?
Yeah iOS has some weird issues that don’t seem to happen on anything else. Try this code.
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.all_lights
state: 'on'
chip:
type: entity
icon: mdi:lightbulb
entity: sensor.count_lights_on
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- domain: light
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 12px 12px !important;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);
background: rgba(255, 152, 0, 0.1);
}
- entity_id: sensor.count_lights_on
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude:
- domain: light
attributes:
type: browser_mod
- entity_id: light.all_lights
- entity_id: light.indoor_lights
- entity_id: light.outdoor_lights
- entity_id: light.kitchen_lights
- entity_id: light.family_room_lights
- entity_id: light.foyer_lights
- entity_id: light.master_bedroom_lights
- entity_id: light.ceiling_fan
- entity_id: light.ceiling_fan_2
- entity_id: light.front_door_ring_light
- entity_id: light.master_bathroom_lights
card:
type: custom:layout-card
layout:
margin: '-26px 10px -11px 10px'
cards: []
layout_type: masonry
sort:
method: friendly_name
4 Likes