Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[Diegocampy]

Good morning, sorry, I’m asking here because many of you have helped me and I hope you will continue to do so I have my card for electrical sockets which is almost perfect for my needs, I would like to add two different actions for the tap_action and hold_action with two different antity:
I would like tap_action: more-info (sensor.presa_multimediale_cucina_power
and hol_action: toogle (switch.presa_multimediale_cucina)
But I can’t figure out how to do it, this is my code:

      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: |
          {{states('sensor.presa_multimediale_cucina_power') }} W
        icon: >
          {% if is_state('switch.presa_multimediale_cucina', "off") %}
          mdi:power-plug-off-outline {% else %} mdi:power-plug-outline {% endif
          %}
        icon_color: >
          {% set k =  states('sensor.presa_multimediale_cucina_power')| int (0)
          %} {% set d = states ('switch.presa_multimediale_cucina') %} {% if (k
          >= 20 and d == 'on')  %} green {% elif (d  == 'off')  %} red {% else
          %} grey {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        entity: switch.presa_multimediale_cucina
        multiline_secondary: true
        card_mod:
          style: |
            ha-card {
              {% set e = states('sensor.presa_multimediale_cucina_power') | int(0)  %}
              {% if (e | int(0) <= 0 ) %} --card-primary-color:grey;--card-secondary-color:grey
              {%  elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
              {%  elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
              {%  elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
              {%  elif (e | int(0) <= 800 ) %}  --card-primary-color:white;--card-secondary-color:yellow
              {%  elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow       
              {%  elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
              {% else %} 
              --card-primary-color:grey;--card-secondary-color:grey
             {% endif %}

[LiQuid_cOOled]

You need to add an entity to get the tap action and hold action an entity to control.

type: custom:mushroom-template-card
primary: Presa Multimediale Cucina
entity: switch.kitchen_lights
secondary: |
          {{states('sensor.presa_multimediale_cucina_power') }} W
icon: >
          {% if is_state('switch.presa_multimediale_cucina', "off") %}
          mdi:power-plug-off-outline {% else %} mdi:power-plug-outline {% endif
          %}
icon_color: |
          {% set k =  states('sensor.basement_sensor')| int (0) %} 
          {% set d = states ('switch.presa_multimediale_cucina') %}
          {% if (k >= 20 and d == 'on')  %} green 
          {% elif (d  == 'off')  %}
          red 
          {% else %} 
           grey 
          {% endif %}
fill_container: true
layout: vertical
tap_action:
          action: toggle
hold_action::
   action: more-info
multiline_secondary: true
card_mod:
          style: |
            ha-card {
              {% set e = states('sensor.presa_multimediale_cucina_power') | int(0)  %}
              {% if (e | int(0) <= 0 ) %} --card-primary-color:grey;--card-secondary-color:grey
              {%  elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
              {%  elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
              {%  elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
              {%  elif (e | int(0) <= 800 ) %}  --card-primary-color:white;--card-secondary-color:yellow
              {%  elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow       
              {%  elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
              {% else %} 
              --card-primary-color:grey;--card-secondary-color:grey
             {% endif %}
                }

The entity will need switched to whatever you are trying to control.

[Diegocampy]

do not work becouse the entity to use ise different

for toogle action: I need switch.presa_multimediale_cucina
for more-info: I need sensor.presa_multimediale_cucina_power

[LiQuid_cOOled]

I far as I know you can’t do that.

[gojonny (Giovanni)]

Hi, sorry if I’m going off topic, what do you use for the presence of the person? I used life360 but since it was discontinued I don’t know what to use

[LiQuid_cOOled]

This 100% a button card issue. When stacking inside a button card icon size matters the most.

Check out…

Fun with custom:button-card

I’ve recently discovered the power of custom:button-card (GitHub - custom-cards/button-card: Lovelace button-card for home assistant) and want to share some nice layouts I created. Be sure to read the documentation for the button-card at that link if you try to use any of these examples. I make extensive use of its templating feature. [panels with alerts] If the image above is not animated, try clicking it to open a popup. The fans should be spinning and 2 sensors should be flashing red o…

[dimitri.landerloos]

@Diegocampy in this specific instance you can also call a service on the hold that toggles the switch instead. Like this:

type: custom:mushroom-template-card
entity: sensor.office_temperature_humidity_temperature
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
tap_action:
  action: more-info
hold_action:
  action: call-service
  service: switch.toggle
  target:
    entity_id: switch.office_screen_left

[LiQuid_cOOled]

Nice, didn’t know that!!

[Diegocampy]

I use the native geolocation of home assistant. I’ve always had problems with Smartthings and their geolocation, but since I switched to Home assistant, everything here is perfect for me and my wife.

[Diegocampy]

Thank you again! I’ll post the complete solution, in my specific case. Maybe it can be useful to other people

      - type: custom:mushroom-template-card
        primary: Presa Multimediale Cucina
        secondary: |
          {{states('sensor.presa_multimediale_cucina_power') }} W
        icon: >
          {% if is_state('switch.presa_multimediale_cucina', "off") %}
          mdi:power-plug-off-outline {% else %} mdi:power-plug-outline {% endif
          %}
        icon_color: >
          {% set k =  states('sensor.presa_multimediale_cucina_power')| int (0)
          %} {% set d = states ('switch.presa_multimediale_cucina') %} {% if (k
          >= 20 and d == 'on')  %} green {% elif (d  == 'off')  %} red {% else
          %} grey {% endif %}
        fill_container: true
        layout: vertical
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.presa_multimediale_cucina
        entity: sensor.presa_multimediale_cucina_power
        multiline_secondary: true
        card_mod:
          style: |
            ha-card {
              {% set e = states('sensor.presa_multimediale_cucina_power') | int(0)  %}
              {% if (e | int(0) <= 0 ) %} --card-primary-color:grey;--card-secondary-color:grey
              {%  elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
              {%  elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
              {%  elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
              {%  elif (e | int(0) <= 800 ) %}  --card-primary-color:white;--card-secondary-color:yellow
              {%  elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow       
              {%  elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
              {% else %} 
              --card-primary-color:grey;--card-secondary-color:grey
             {% endif %}

[T1ppes]

I may have missed some updates of Card Mod in the last couple of month but now I am puzzled as to why my cards are partly alright, but partly not behaving as expected.
I therefore have a couple of questions with regards to conditional coloring of the mushroom template card, which I use as room cards

As examples I’ll post the code for the

Living Room (Wohnzimmer)

      - type: custom:stack-in-card
        card-mod:
          style: |
            ha-card {
              {% if is_state('media_player.wohnzimmer', 'playing') %}
                background: rgba(var(--color-background-blue), var(--opacity-bg));
              {% elif is_state('light.livingroom', 'on') %}
                background: rgba(var(--color-background-yellow), var(--opacity-bg));
              {%- endif %}
            }
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:sofa
            icon_color: >
              {% if is_state('media_player.wohnzimmer', 'playing') %}
                var(--color-blue)
              {% elif is_state('light.livingroom', 'on') %}
                var(--color-yellow)
              {%- endif %}
            layout: horizontal
            primary: Wohnzimmer
            tap_action:
              action: navigate
              navigation_path: livingroom
            card_mod:
              style: |
                ha-card {
                  {% if is_state('media_player.wohnzimmer', 'playing') %}
                    --primary-text-color: rgba(var(--color-blue-text),1);
                  {% elif is_state('light.livingroom', 'on') %}
                    --primary-text-color: rgba(var(--color-yellow-text),1);
                  {%- endif %}
                }
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                }
            chips:
              - type: light
                entity: light.livingroom
                icon: mdi:lightbulb
                tap_action:
                  action: navigate
                  navigation_path: livingroom
                content_info: none
              - type: template
                entity: media_player.wohnzimmer
                icon: |-
                  {% set state=states('media_player.wohnzimmer') %}
                  {% if state=='playing' %}
                    mdi:speaker
                  {% else %}
                    mdi:speaker-off
                  {% endif %}
                icon_color: |-
                  {% set state=states('media_player.wohnzimmer') %}
                  {% if state=='playing' %}
                    var(--color-blue)
                  {% elif state=='unavailable' %}
                    #646464
                  {% else %}
                    var(--color-theme)
                  {% endif %}
                content_info: none
              - type: template
                icon: none
                tap_action:
                  action: navigate
                  navigation_path: livingroom
              - type: conditional
                conditions:
                  - entity: sensor.livingroom_temperature
                    state_not: 'unavailable'
                chip:
                  type: template
                  content: '{{ states(''sensor.livingroom_temperature'')|float}}°C'
                  tap_action:
                    action: none

and

Kitchen (Küche)

      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              {% if is_state('binary_sensor.motion_kitchen', 'on') or
                    is_state('device_tracker.thermomix', 'home') %}
                background: rgba(var(--color-background-blue), var(--opacity-bg));
              {% elif is_state('light.kitchen', 'on') %}
                background: rgba(var(--color-background-yellow), var(--opacity-bg));
              {%- endif %}
            }
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:knife
            icon_color: >
              {% if is_state('binary_sensor.motion_kitchen', 'on') or
              is_state('device_tracker.thermomix', 'home') %}
                var(--color-blue)
              {% elif is_state('light.kitchen', 'on') %}
                var(--color-yellow)
              {% endif %}
            layout: horizontal
            primary: Küche
            tap_action:
              action: navigate
              navigation_path: kitchen
            card_mod:
              style: |
                ha-card {
                  {% if is_state('binary_sensor.motion_kitchen', 'on') or
                        is_state('device_tracker.thermomix', 'home') %}
                    --primary-text-color: rgba(var(--color-blue-text),1);
                  {% elif is_state('light.kitchen', 'on') %}
                    --primary-text-color: rgba(var(--color-yellow-text),1);
                  {%- endif %}
                }
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                }
            chips:
              - type: light
                entity: light.kitchen
                content_info: none
                use_light_color: false
              - type: template
                entity: media_player.kuche
                icon: |-
                  {% set state=states('media_player.kuche') %}
                  {% if state=='playing' %}
                    mdi:speaker
                  {% else %}
                    mdi:speaker-off
                  {% endif %}
                icon_color: |-
                  {% set state=states('media_player.kuche') %}
                  {% if state=='playing' %}
                    var(--color-blue)
                  {% elif state=='unavailable' %}
                    #646464
                  {% else %}
                    var(--color-theme)
                  {% endif %}
                content_info: none
              - type: template
                icon: |
                  {% if is_state('sensor.dishwasher_status', 'Done') %}
                    mdi:dishwasher-alert
                  {% elif is_state('sensor.dishwasher_status', 'Running') %}
                    mdi:dishwasher
                  {% else %}
                    mdi:dishwasher-off
                  {% endif %}
                icon_color: |
                  {% if is_state('sensor.dishwasher_status', 'Done') %}
                    var(--color-red)
                  {% elif is_state('sensor.dishwasher_status', 'Running') %}
                    var(--color-blue)
                  {% elif is_state('sensor.dishwasher_status', 'Off') %}
                    #646464
                  {% else %}
                    var(--color-theme)
                  {% endif %}
                content_info: none
              #- type: template
              #  icon: none
              #  tap_action:
              #    action: navigate
              #    navigation_path: kitchen
              - type: conditional
                conditions:
                  - entity: sensor.kitchen_temperature
                    state_not: 'unavailable'
                chip:
                  type: template
                  content: '{{ states(''sensor.kitchen_temperature'')|float}}°C'
                  tap_action:
                    action: none

On the Living Room I am missing the colored background and colored label
On the Kitchen, I would have expected the label to be colored, oddly the background is working. Any help or hints are welcome.

[chintito4ever]

I switched to Google Maps location sharing, pretty close to Life360 in terms of location reporting. Here’s addon you can install that will simplify managing the integration: GitHub - pnbruckner/ha-google-maps: Custom Home Assistant Google Maps Integration

[LiQuid_cOOled]

A few changes to nomenclature, but also I could not recreate your colors. I figured we could start with this code and add or remove from there.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
       border-width: 0;
      {% if states('binary_sensor.motion_kitchen', 'on') or
       is_state('device_tracker.thermomix', 'home') %}
       background: rgba(0, 0, 255, 0.1);
       {% elif is_state('light.kitchen', 'on') %}
        background: rgba(0, 255, 255, 0.1);
        {% else %}
        background: grey 
        {% endif %}
    }
cards:
  - type: custom:mushroom-template-card
    icon: mdi:knife
    icon_color: >
      {% if states('binary_sensor.motion_kitchen', 'on') or
      is_state('device_tracker.thermomix', 'home') %}
      rgba(0, 0, 255, 0.1);
      {% elif is_state('light.kitchen', 'on') %}
       rgba(0, 255, 255, 0.1);
       {% else %}
        green
        {% endif %}
     
    layout: horizontal
    primary: Küche
    tap_action:
      action: navigate
      navigation_path: kitchen
    card_mod:
      style: |
        ha-card {
         border-width: 0;
          {% if states('binary_sensor.motion_kitchen', 'on') or
                is_state('device_tracker.thermomix', 'home') %}
             --card-primary-color: rgba(0, 0, 255, 1);
          {% elif is_state('light.kitchen', 'on') %}
            --card-primary-color: rgba(0, 255, 255, 1);
             {% else %}
             --card-primary-color:green;
            {% endif %}
        }
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-border-width: 0;
        }
    chips:
      - type: light
        entity: light.kitchen
        content_info: none
        use_light_color: false
      - type: template
        entity: media_player.kuche
        icon: |-
          {% set state=states('media_player.kuche') %}
          {% if state=='playing' %}
            mdi:speaker
          {% else %}
            mdi:speaker-off
          {% endif %}
        icon_color: |-
          {% set state=states('media_player.kuche') %}
          {% if state=='playing' %}
           blue
          {% elif state=='unavailable' %}
            '#646464'
          {% else %}
           red
          {% endif %}
        content_info: none
      - type: template
        icon: |
          {% if is_state('sensor.dishwasher_status', 'Done') %}
            mdi:dishwasher-alert
          {% elif is_state('sensor.dishwasher_status', 'Running') %}
            mdi:dishwasher
          {% else %}
            mdi:dishwasher-off
          {% endif %}
        icon_color: |
          {% if is_state('sensor.dishwasher_status', 'Done') %}
            red
          {% elif is_state('sensor.dishwasher_status', 'Running') %}
            blue
          {% elif is_state('sensor.dishwasher_status', 'Off') %}
            '#646464'
          {% else %}
            green
          {% endif %}
        content_info: none
      - type: conditional
        conditions:
          - entity: sensor.kitchen_temperature
            state_not: unavailable
        chip:
          type: template
          content: '{{ states(''sensor.kitchen_temperature'')|float}}°C'
          tap_action:
            action: none

[Christian_Hollbjar (Crall)]

EDIT: looks like a edge issue right now, works in app, chrome and firefox. Have cleard cache also.

Is there anyone else with the issue that mushroom cards wont display the default icon on any cards? i need to define the icons for them to be displayed in the card.

[mannish-kumar]

Hi,

Can I get some help to achieve the below?

1. Show badge icon and flash when the CCTV camera goes down(sensor state is off).
2. Hide the badge icon when CCTV camera is up (sensor state is on).

I am able to achiev the #1 with the below code but I am struggling to achieve #2 to hide the badge icon when the state is on.

type: custom:mushroom-template-card
entity: binary_sensor.uptimekuma_camera_parking_rear
icon: mdi:cctv
icon_color: teal
badge_icon: mdi:close
badge_color: red
tap_action:
  action: more-info
card_mod:
  style: |
    mushroom-badge-icon {
      animation:
        {% if is_state("binary_sensor.uptimekuma_camera_parking_rear", "off") -%}
          pulse 3s infinite;
        {% else -%} none
        {% endif %}
    }
    @keyframes pulse {
      50% { opacity: 0;}
    }

[dimitri.landerloos]

Try this:

type: custom:mushroom-template-card
entity: binary_sensor.uptimekuma_camera_parking_rear
icon: mdi:cctv
icon_color: teal
badge_icon: mdi:close
badge_color: red
tap_action:
  action: more-info
card_mod:
  style: |
    mushroom-badge-icon {
      {% if is_state("binary_sensor.uptimekuma_camera_parking_rear", "off") -%}
        animation: pulse 3s infinite;
      {% else -%} 
        display: none;
      {% endif %}
    }
    @keyframes pulse {
      50% { opacity: 0;}
    }

[mannish-kumar]

Thank You, it worked.

[Faecon (Jo)]

                              - type: custom:mushroom-chips-card
                                chips:
                                  - type: template
                                    entity: climate.tv_ruimte
                                    icon: mdi:numeric-1-circle-outline
                                    icon_color: >
                                      {% if state_attr("climate.tv_ruimte",'fan_mode') == '1' %}
                                        [255, 153, 153]
                                      {% else %}
                                        [84, 84, 84]
                                      {% endif %} 
                                alignment: end
                                tap_action:
                                  action: call-service
                                  service: script.turn_on
                                  service_data:
                                    entity_id: script.airco_tvhoek_ventilatorsnelheid_20

Mushroom card… On press I want to run a script.

this is the script:

alias: airco_tvhoek_ventilatorsnelheid_20
sequence:
  - service: climate.set_fan_mode
    metadata: {}
    data:
      fan_mode: "1"
    target:
      entity_id: climate.tv_ruimte
mode: single
icon: mdi:fan

When it runs the script, it sets the climate.tv-ruimte to off. when I look at the script, it has never run before

what is wrong here ?

edit solution:
it was the indentation of the tap action…

[dicekillsyou161]

OK I am now kind of wondering if either the manner in which I am allowed to change the chips icon color is different completely or I need to try to figure out how to do it in card mod? No matter how many different ways I try to edit it, I continue to get no color change, but the rotation I have in card mod works without any issues.

Is anyone able to see what I may be doing wrong?

            - type: template
              entity: switch.bedroom_fan
              icon: mdi:fan
              content: ''
              icon_color: >-
                {% set _state=states('switch.bedroom_fan') %} {% if _state=="on"
                %} {{'#f92aad'}} {% elif _state=="off" %} {{'#475c31'}} {% else
                %} red {% endif %}
              tap_action:
                action: toggle
          card_mod:
            style:
              div:
                mushroom-template-chip:nth-child(4):
                  $:
                    mushroom-chip: |
                      ha-state-icon {
                        {% set _state = states('switch.bedroom_fan') %}
                        {% if _state == "on" %}
                        animation: rotation 1s linear infinite;
                        {% endif %}
                      }
                      @keyframes rotation {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }

[LiQuid_cOOled]

It’s just the way you are coding the colors. If you remove the hex and use simple colors, the code works fine.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:

    - type: template
      entity: switch.bedroom_fan
      icon: mdi:fan
      content: ''
      icon_color: >-
                {% set _state=states('fan.bedroom_fan') %}
                {% if _state=="on" %} yellow
                {% elif _state=="off" %} blue {% else
                %} green {% endif %}
      tap_action:
                action: toggle
      card_mod:
            style:
              div:
                mushroom-template-chip:nth-child(4):
                  $:
                    mushroom-chip: |
                      ha-state-icon {
                        {% set _state = states('switch.bedroom_fan') %}
                        {% if _state == "on" %}
                        animation: rotation 1s linear infinite;
                        {% endif %}
                      }
                      @keyframes rotation {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }

You icon color code doesn’t need to be that complicated

icon_color: |-
          {%- if is_state('fan.bedroom_fan', 'on') %} 
               #f92aad
          {%- elif is_state('fan.bedroom_fan', 'off') %}   
               #475c31
           {% else %}
               green
           {% endif %}