Thank man! i just dont know understand how to use the CSS, but every example helps
3 Likes
You can change the Mushroom Light icon by following the example here.
1 Like
I would check that card_mod is installed properly. Do you have the Browser Mod control panel in the sidebar?
Like this:
type: custom:mushroom-template-card
primary: Alert!
icon: mdi:fire
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
mushroom-shape-icon {
animation: blink 1s ease-in-out infinite;
}
@keyframes blink {
50% {opacity: 0.5;}
}
3 Likes
thanks for sharing. it looks very nice.
is it also possible to combine this with a sensor?
if, for example, the household waste is collected, and the number of days is set to 0, and therefore is collected today.
1 Like
Thank you so very much… 
1 Like
thanks this work perfect is it also possible to change the color ? when the lamp is off?
1 Like
Hi again! 
Is there a way to get the “Zone” badge-icon on a template-card the same way as on a person-card?
I want to have multiple second lines in the person-card (but it’s not possible?), so I use a template card, but then I don’t know how to get the badge-icon from the current zone the entity (person) is in.
Example:
The most left card is my template-card that I want to use. The other two is the normal person-card. I want to be able to get the “badge-icon” om my card as well…
The code for my card:
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.9) url( '/local/images/snille.jpg' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
}
cards:
- type: custom:mushroom-template-card
entity: person.erik_pettersson
layout: vertical
primary: Erik
badge_icon: |
####### Need help here to get the badge icon from the current zone... ######
picture: |
{{ state_attr('person.erik_pettersson', 'entity_picture') }}
multiline_secondary: true
secondary: >
{% if is_state('person.erik_pettersson', 'home') %}
Är hemma
{% elif is_state('person.erik_pettersson', 'away') or
is_state('person.erik_pettersson', 'unavailable') %}
Är på äventyr
{% else %}
Är {{ states('person.erik_pettersson') }}
{% endif %}{{ states('sensor.withings_heart_pulse_bpm_erik_p')}}bpm -
{{states('sensor.withings_weight_kg_erik_p') }}kg
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('sensor.pixel_6_pro_battery_state', 'not_charging') %}
mdi:battery-clock-outline
{% elif is_state('sensor.pixel_6_pro_battery_state', 'charging') %}
mdi:battery-charging-100
{% else %}
mdi:battery-arrow-down
{% endif %}
icon_color: light-green
- type: entity
entity: sensor.pixel_6_pro_battery_level
content_info: state
icon_color: light-green
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Thank you!
3 Likes
You could change mushroom-template-card to mushroom-person-card it worked for me, i needed to add use_entity_picture: true too
1 Like
Hi, the problem with the person-card is that it can’t have more the one second-line. And I want to use more than one.
Oh, I see. I changed ‘Är hemma’ to Home and assumed it had picked it up 
yes, you can add badge to the template card, I can;t find the example now
but you should be able to do that based on official documentation
What kind of fridge are you using to get all this data?
Hi, I know how to add a static badge, but I want the badge from the current zone the entity (person) is in for the moment. So, I need to figure out how to get the current zone and pickup the badge icon from that zone and then set the badge it to the entity (template-card) picture… Same as the person-card.
OR
Be able to add more lines to the “second line” to the person card if possible…
1 Like
sorry I misunderstood!
Now I got your point
maybe as a workaround
use custom:stack-in, in vertical mode
- person card with the picture and one line of secondary
- template card with secondary line only (in red)
- chips you already have
I know it seems weird, but this is what I would do if i couldnt find better solution
1 Like
You can use the same template as used in your secondary line of text but specify the icon instead of the text you want displayed
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.9) url( '/local/images/snille.jpg' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
}
cards:
- type: custom:mushroom-template-card
entity: person.erik_pettersson
layout: vertical
primary: Erik
badge_icon: |
{% if is_state(config.entity, 'home') %}
mdi:home
{% elif is_state(config.entity, 'away') or
is_state(config.entity, 'unavailable') %}
mdi:home-export-outline
{% endif %}
badge_color: |
{% if is_state(config.entity, 'home') %}
green
{% else %}
red
{% endif %}
picture: |
{{ state_attr(config.entity, 'entity_picture') }}
multiline_secondary: true
secondary: >
{% if is_state(config.entity, 'home') %}
Är hemma
{% elif is_state(config.entity, 'away') or
is_state(config.entity, 'unavailable') %}
Är på äventyr
{% else %}
Är {{ states(config.entity) }}
{% endif %}{{ states('sensor.withings_heart_pulse_bpm_erik_p')}}bpm -
{{states('sensor.withings_weight_kg_erik_p') }}kg
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('sensor.pixel_6_pro_battery_state', 'not_charging') %}
mdi:battery-clock-outline
{% elif is_state('sensor.pixel_6_pro_battery_state', 'charging') %}
mdi:battery-charging-100
{% else %}
mdi:battery-arrow-down
{% endif %}
icon_color: light-green
- type: entity
entity: sensor.pixel_6_pro_battery_level
content_info: state
icon_color: light-green
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
1 Like
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!