mushroom-entity-card is not suitable. I want to use different icons for three states. And in mushroom-template-card it is just possible to implement it.
Use it as your main entity.
is it possible to change icons in mushroom-entity-card depending on the state of other sensors? I want to make three different icons depending on two sensors (door sensor and key lock sensor):
- The door is open
- The door is closed
- The door is locked with a key
Like this 
- type: custom:mushroom-template-card
entity: binary_sensor.zigbee_main_door_key
primary: Main door
secondary: >
...
icon: >
...
icon_color: >
....
tap_action:
action: more-info
Just change the mdi icons that you want
No, you have to use mushroom-template-card.
it’s work! Thanks! It’s so elementary!
Hi guys,
I am hoping someone might be able to help me with this. I am new to card_mod and themes and have been trying to create room cards using stack-in-card, mushroom chips and custom button card for icon/navigation.
I want to use chips to show a simple glance of what is on on the room, if window is open, motion etc. I have it working through conditions but if everything is active at one it pushes the last chip to the next line. I was hoping to find a way of adjusting the gap between chips to be able to accommodate everything on one line. Ideally I wouldn’t want to change the gap between chips on the whole pages just on a room by room basis.
Thanks in advance.
3 Likes
Single braces! Thank you. This problem was driving me crazy.
{0}
You are missing the card-mod integration: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
hi, you can show how you added sensor.charging and sensor.battery_level on person card?
thanks.
If you are using the normal HA Grid card, you will need to add square: false to the grid (or in the visual editor it should be a toggle at the top labeled “Render as square”, or something close to that.
worked like a charm! thanks
2 Likes
Here you go…
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s21_fabian_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s21_fabian_battery_level
icon: |2
{% set bl = states('sensor.sm_s21_fabian_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s21_fabian_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
9 Likes
Hey all,
@pedolsky thank you for your help in the other channel.
I know some of you have asked for this card in the repo for 
Mushroom. I also understand the complexities for the dev to get the card built. With some trial and error, I have managed to create a card I am happy with what I have achieved.
This card is used with Google Calendar, Mushroom chips and Mushroom Person card, to navigate to various dashboards we use around the house.
Let me know if there is a better place to share the YAML and ask me anything.
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: |2-
{%- if now().hour < 12 -%}Morning
{%- elif now().hour < 18 -%}Afternoon
{%- else -%}Evening{%- endif -%}, {{user}}
subtitle: >-
♻️ {{state_attr('calendar.bins', 'message')}} on {{
as_timestamp(state_attr("calendar.bins","start_time") |
default(now(),true) )| timestamp_custom('%-d %b') }}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
:host {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 25px;
--ha-card-background: white;
}
chips:
- type: action
icon_color: red
tap_action:
action: navigate
navigation_path: media-control
icon: mdi:remote
hold_action:
action: none
double_tap_action:
action: none
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: audio
icon: mdi:radio
- type: action
icon_color: blue-grey
icon: ios:hifispeaker-fill
tap_action:
action: navigate
navigation_path: media-settings
- type: action
icon_color: amber
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: all-lights
- type: action
icon_color: green
icon: mdi:timeline-clock
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: automations
alignment: justify
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
card_mod:
style: |
:host {
padding-left:10px;
--ha-card-background: #292929;
}
entity: person.dan
fill_container: true
icon: mdi:face-man
tap_action:
action: navigate
navigation_path: dan
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
card_mod:
style: |
:host {
padding-left:10px;
--ha-card-background: #292929;
}
entity: device_tracker.chloe
fill_container: true
icon: mdi:face-woman
card_mod:
style: |
ha-card {
background: #1c1c1c;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
}
21 Likes
Can anyone advise if it’s possible to set padding on the mushroom title card using card mod ? - It doesn’t seem to have a ha-card element so isn’t working like the other cards, and I can’t figure out the right selector for it.
i put them on vertical stack but chips card are below person card. could u show how to put them together?
thanks a lot.
hej,
here the whole card, there is also a popup window included for detailed location
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.fabian
use_entity_picture: true
hide_name: true
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Fabian
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.places_fabian_locatie
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.life360_fabian_verschoor
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s21_fabian_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s21_fabian_battery_level
icon: |2
{% set bl = states('sensor.sm_s21_fabian_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s21_fabian_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
alignment: center
8 Likes
How do you make your fan icons spin?