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

[paddy0174 (Patrick)]

Why not? You can always set a tap_action on every chip.

[iC1Beaver (Fred)]

I was able to change the background color using your solution but I would also like to change the border width and color. Any idea how it could be added?.

[sla004 (Simo Lääveri)]

I’m using template chip and then tap_action is not working…

Below is short code example what I have:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    subtitle: Lämpötiloja sisällä
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: >-
          MH1 {% if states.sun.sun %} {{
          states('sensor.0x00158d0007110beb_temperature')}} {% endif %}
        icon: mdi:thermometer
        tap_action:
          action: more-info
      - type: template
        content: >-
          MH2 {% if states.sun.sun %} {{
          states('sensor.0x00158d000444c836_temperature')}} {% endif %}
        icon: mdi:thermometer
        tap_action:
          action: more-info 

[TommyWelle (Tommy Welle Jacobsson)]

This will work.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    subtitle: Lämpötiloja sisällä
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: >-
          MH1 {% if states.sun.sun %} {{
          states('sensor.0x00158d0007110beb_temperature')}} {% endif %}
        icon: mdi:thermometer
        entity: sensor.0x00158d0007110beb_temperature
        tap_action:
          action: more-info
      - type: template
        content: >-
          MH2 {% if states.sun.sun %} {{
          states('sensor.0x00158d000444c836_temperature')}} {% endif %}
        icon: mdi:thermometer
        entity: sensor.0x00158d000444c836_temperature
        tap_action:
          action: more-info

[paddy0174 (Patrick)]

@TommyWelle is totally right, you need to set an entity, so the “chip” knows which more-info dialog to show. In your example there is no way to determine what “more-info” you’d want to show.

[sla004 (Simo Lääveri)]

Thanks @TommyWelle and @paddy0174 ! Now it works!

[AnthonyB]

@Stuartie
Love it.
I can’t work out how to define sensor.count_living_room_lights_on in your code below
Can you help?

type: custom:stack-in-card
cards:

• type: custom:mushroom-template-card
  primary: Living Room
  secondary: ‘{{ states(’‘sensor.thermostat_1_current_temperature’’) }} °C’
  icon: mdi:sofa
  entity: light.living_room_lights
  icon_color: |-
  {% if is_state(‘light.living_room_lights’, ‘on’) %}
  orange
  {% endif %}
  hold_action:
  action: toggle
  tap_action:
  action: navigate
  navigation_path: livingroom
  badge_icon: |-
  {% if is_state(‘sensor.count_living_room_lights_on’, ‘0’) %}
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘1’) %}
  mdi:numeric-1
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘2’) %}
  mdi:numeric-2
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘3’) %}
  mdi:numeric-3
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘4’) %}
  mdi:numeric-4
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘5’) %}
  mdi:numeric-5
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘6’) %}
  mdi:numeric-6
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘7’) %}
  mdi:numeric-7
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘8’) %}
  mdi:numeric-8
  {% elif is_state(‘sensor.count_living_room_lights_on’, ‘9’) %}
  mdi:numeric-9
  {% else %}
  mdi:numeric-9-plus
  {% endif %}
  badge_color: orange
  fill_container: true
  layout: horizontal
  multiline_secondary: false
  card_mod:
  style: |
  :host {
  z-index: 1;
  }
• type: custom:mushroom-chips-card
  chips:
  • type: conditional
    conditions:
    • entity: binary_sensor.living_room_motion_sensor_occupancy
      state: ‘on’
      chip:
      type: template
      icon_color: green
      icon: mdi:window-open-variant
  • type: conditional
    conditions:
    • entity: binary_sensor.living_room_window
      state: ‘on’
      chip:
      type: template
      icon_color: red
      icon: mdi:motion-sensor
      alignment: end
      card_mod:
      style: |
      ha-card {
      –chip-box-shadow: none;
      –chip-background: none;
      –chip-spacing: 0;
      top: -36px;
      z-index: 0;
      }
      card_mod:
      style: |
      ha-card {
      height: 66px;
      }

[Mkipz (Dion)]

Sorry for the late reply but this worked! Thanks alot!

[Faecon (Jo)]

put your code between Preformatted text

[AnthonyB]

Sorry I don’t understand - maybe my question was not clear
I wanted to know how we can declare sensor.count_living_room_lights_on

I tried in yaml but my coding is very bad and it does not work but I guess there might be a better way to define it somewhere else?

see my configuration.yaml code

sensor:

• platform: google_wifi
• platform: template
  sensors:
  count_living_room_lights_on:
  friendly_name: “# Living Room Lights on”
  unit_of_measurement: ‘on’
  value_template: “{{ expand(state_attr(‘light.living_room_lights’, ‘entity_id’) ) | selectattr(‘state’, ‘eq’, ‘on’) | list | count }}”

[paddy0174 (Patrick)]

No, the problem is, you need to format the code in your post properly. We can’t help you, as long as you post the code like a written text. It’s not that we don’t want to, but YAML is very dependent on indentation. A small white space to much, and your code won’t work.

See here for how to post your code properly formatted:

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

So please post your code properly formatted, so we can have a look for errors.

[piitaya (Paul)]

Hello

A new Mushroom release is out with Assist action support : Release v3.0.0 · piitaya/lovelace-mushroom · GitHub

This release is a major version change because it has breaking change for card_mod users

Mushroom cards and chips now uses ha-state-icon instead of ha-icon . You should update your card_mod overrides to reflect that change.

[cob94440 (chris)]

He asked you to put your code like this :

[AldoQ (Aldo Quispel)]

With the new version and this breaking change, how would the following code need to be fixed?

I originally thought if I changed “ha-icon” to “ha-state-icon” this may be it. But it doesn’t seem to be that easy

card_mod:
  style:
    mushroom-shape-icon$: |
      {% if is_state('switch.office_monitor','on') %}
        ha-icon {
          --icon-animation: power 1.5s infinite; 
        }
        @keyframes power {
          0%, 100% { clip-path: inset(0 0 0 0); }
          50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
        }
      {% else %}

      {% endif %}
      }

[Murder3D]

Yup, same situation. Tried to replace “ha-icon” to “ha-state-icon” but it does not work. I too would like to know how to fix this.

type: custom:mushroom-template-card
primary: Fan
secondary: |-
  {% if states(config.entity)=='on' %}
    On
  {% else %}
    Off
  {% endif %}
icon: mdi:fan
icon_color: |-
  {% if states(config.entity)=='on' %}
    light-blue
  {% endif %}
entity: switch.fan
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
badge_icon: ''
layout: horizontal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.fan', 'on') }}
      }

[d_sellers1 (Derek)]

Also, @Murder3D.
This worked for me. Not sure how I figured out how to get it to work.

type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
entity: input_boolean.tester
card_mod:
  style: |
    ha-state-icon {
      animation: rotation linear infinite 3s;
    }
    @keyframes rotation {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg);}
    }

[zanixmechanix (Joshua)]

I think this should work

card_mod:
  style:
    .: |
      {% if is_state('switch.office_monitor','on') %}
        ha-state-icon {
          --icon-animation: power 1.5s infinite; 
        }
        @keyframes power {
          0%, 100% { clip-path: inset(0 0 0 0); }
          50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
        }
      {% endif %}

Or this

card_mod:
  style: |
    {% if is_state('switch.office_monitor','on') %}
      ha-state-icon {
        --icon-animation: power 1.5s infinite; 
      }
      @keyframes power {
        0%, 100% { clip-path: inset(0 0 0 0); }
        50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
      }
    {% endif %}

[vphuoc (Vu Xuan Phuoc)]

type: custom:mushroom-template-card
primary: Weeeee!
icon: mdi:pinwheel
icon_color: green
card_mod:
style: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {transform: rotate(360deg);
}
}type: ‘’
#################################
OK

[zanixmechanix (Joshua)]

I had the same issue and I had to clear the cache in the app.
On Android: System Settings > Apps > Home Assistant > Storage & cache
On iOS: Home Assistant > Settings > Companion App > Debugging > Reset Frontend Cache
Both: Close and reload the app

[vphuoc (Vu Xuan Phuoc)]

@zanixmechanix

và tải lại ứng dụn

OK! Thanks you