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

[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

[Mwdouble (Willem)]

hi, is it possible to add shortcuts to the mushroom media player card? for example:

shortcuts:
  columns: 4
  buttons:
    - type: script
      name: Qmusic
      id: script.play_qmusic_kantoor
    - type: script
      name: Arrow rock
      id: script.play_arrow_rock
    - type: script
      name: Radio 10
      id: script.play_radio_10
    - type: script
      name: Radio 538
      id: script.play_radio_538

[Robinho21]

I apprecite that this is a fairly broad question but something is holding back my adoption of some of the great multi-faceted Mushroom cards in this thread.

Why are Mushroom template cards are seemingly so resource intensive ?

As soon as I deploy them my resource use rockets to the point that a R Pi4 become unusable and a VM on Proxmox with 2 cores from an i7 and 8GB slows too.

Is there an obvious explanation for this and/or a way to mitigate it beyond just throwing more and more horsepower at the problem ?

Edited to send an @ to @piitaya who is the founding father @rhysb who has been the most remarkable adopter !

[jesuisla91]

Hello

Since version 3.0.1 my icons on the home assistant application are not centered.
They are centered on the Web version.

Do you have any idea what’s wrong ?

[shogun168 (Edwin)]

I have a similar piece of code that I just haven’t been able to get working since the update. I swapped out ha-icon to ha-state-icon and for some reason this one icon doesn’t animate while other ones with similar code do

card_mod:
  style:
    mushroom-shape-icon:
      $: |
        .shape ha-state-icon
          {
            {{ '--icon-animation: rotation 1s linear infinite;' if not is_state('climate.bedroom_ac', 'off') }}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

[LeiChat (Richard)]

@shogun168 I had similar issue and was advised to strip it back to…

card_mod:
   style: |
      mushroom-shape-icon {
         {{ '--icon-animation: ....
      }

There didn’t seem to be a need for the $ and ha-state-icon and the | can go after the style.
Hope that works for you too.