Yes! Thank you, that works! Great idea! 
1 Like
This almost works, but in your example, there are still only two “pre-defined” badges, either home or away (or unavailable). But I have a specific icon for each “zone” in my system, so I want the “icon” from the actual zone to be the badge on the picture… But thank you for trying! Anyway, @Posreg came up with a working solution that I didn’t think of.
Great job!
please, could you share the distribution of the cards on the right side? (not the sidebar). I’m having real trouble trying to get the cards to fill the screen on the tablet.
I organize everything under a vertical-stack, and inside I organize cards and buttons, but the result is that it stays centered on the screen and does not expand, maybe with card-mod it could?
Thank you!
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;}
}
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?