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

[MisterMeJ]

Don’t know what i’m doing wrong, but can’t succeed to remove the circle around the icon in the chip-area.

Also possible to remove the divider between the main card and the chip card?
Any help/advise ?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Woonkamer
    secondary: >-
      {{ states('sensor.toon_room_temp') }} °C    {{
      states('sensor.bedroom_j_temperature_humidity') }} %               
      {{ states('sensor.tpl_television') }}
    icon: fapro:couch
    entity: light.livingroom_led_television
    tap_action:
      action: navigate
      navigation_path: /dashboard-mushroom/woonkamer
    hold_action:
      action: navigate
      navigation_path: /dashboard-mushroom/tvgids
    icon_color: '{{ state( ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: true
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0);
          --mush-icon-size: 76px;
          height: 80px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.livingroom_motion_occupancy
            state: 'on'
        chip:
          type: template
          icon_color: red
          icon: mdi:walk
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }  
      - type: conditional
        conditions:
          - entity: light.livingroom_led_television
            state: 'on'
        chip:
          type: template
          icon_color: green
          icon: mdi:led-strip-variant
          entity: light.livingroom_led_television
          tap_action:
            action: more-info
            browser_mod:
              command: popup
              deviceID: null
              title: null
              card:
                type: custom:mod-card
                style: |
                  ha-card {
                    padding-right: 45px;
                    padding-left: 45px;
                    padding-bottom: 45px; 
                    box-shadow: none;
                  }
      - type: conditional
        conditions:
          - entity: light.livingroom_led_television
            state: 'off'
        chip:
          type: template
          icon_color: red
          icon: mdi:led-strip-variant-off
          entity: light.livingroom_led_television
          tap_action:
            action: more-info
            browser_mod:
              command: popup
              deviceID: null
              title: null
              card:
                type: custom:mod-card
                style: |
                  ha-card {
                    padding-right: 45px;
                    padding-left: 45px;
                    padding-bottom: 45px; 
                    box-shadow: none;
                  }
    alignment: end
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-box-shadow: none;
          box-shadow: none;
        } 
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      height: 120px;
      {% if is_state('light.livingroom_led_television', 'on') %}
         background: rgba({{ states('sensor.tpl_television_led') }}, 0.15);
      {% endif %}
    }

[karloslb]

many thanks for your help. your code works.

[KTibow (Kendell R)]

Why can’t you tab/focus mushroom cards?

[zanixmechanix (Joshua)]

In the theme yaml you are using
I wouldn’t suggest using it though, it messes with other elements. I ended up removing it.

Edit:
This seems to work better (using card_mod):

Theme Name:
  card-mod-theme: "Theme Name"
  card-mod-card-yaml: |
    .: |
      ha-state-icon {
        line-height: 0;
      }

Be warned I have no idea what this will do to other cards. It would affect anything that uses ha-state-icon. I would wait for a fix from piitaya.

[dimitri.landerloos]

Thanks for the heads up! Wasnt sure where to add it in exactly. Wont do it now, but good to know for future that its under card mod.

[NuttShell (Max)]

it work in card via:

card_mod:
  style: |
    mushroom-shape-icon {
        line-height: 0.1rem;
      }

[dimitri.landerloos]

Thanks, yes ive done that for now. Will change it back once fixed

[NuttShell (Max)]

@MisterMeJ

 card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0);
          --mush-icon-size: 76px;
          height: 80px;
          margin-left: -18px !important;
        }

edit:

    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0);
          --mush-icon-size: 76px;
          height: 80px;
          margin-left: -18px !important;
          border-widht: 0px;
        }
        ha-card {
          border-width: 0px;
        }

and about circle:

@MisterMeJ

    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-box-shadow: none;
          box-shadow: none;
        } 

edit:

    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width:0px;
        }

[wgumaa (Waleed)]

Hey all, haven’t been here in a while.

Anyone else experiencing broken animations after the core update on iOS companion app?

Saw there was an update to fix this būt it didn’t.

[Andy]

Hi all,

Can somebody help me with some code.
I want to have my fan icon spin in the chip header, i already got it running in a normal card but can’t get it working in the chip header.

At this moment i got the following code (fan is a static icon now), so what code do i have to put in to get the fan icon spinning with the state when it’s on and when it’s off no spinning

- type: template
    double_tap_action:
      action: none
    entity: light.fan
    icon: mdi:fan

This is the code that i use in template card and it works great.

type: custom:mushroom-template-card
icon: mdi:fan
entity: light.fan
tap_action:
  action: toggle
icon_color: '{{ ''green'' if is_state(''light.fan'', ''on'') else ''grey'' }}'
primary: Ventilator
secondary: '{{ states(entity) | title }}'
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    mushroom-shape-icon {
        {% if is_state('light.fan','on') %}
        --icon-animation: spin 1s linear infinite;
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
          40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
          60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
          80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
        }
        @keyframes drum {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); 
        }
        {% else %}

        {% endif %}
    }

Thank you.

[Faecon (Jo)]

Put your code as preformatted text please

[Fabian_V]

same here, on browser… reading back the posts but bit difficult to filter out the right code

[wgumaa (Waleed)]

Ok got it to work on browser (chrome) but not iOS! or companion app.

Step1: replace “ha-icon” with “ha-state-icon”
Step 2: delete “mushroom-shape-icon$:”
Step 3: Make sure style is like this: “style: |”

Tha got it to work on chrome on pc but not on iOS!

@rhysb They broke it. Any ideas how to get animations to work on safari again?

[Andy]

Yes done it

[Boostin4HP]

Here’s the vertical Door Lock Card.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Laundry Door
    secondary: >-
      {% if is_state('lock.door_lock','unlocked') and
      is_state('binary_sensor.laundry_door_sensor_access_control_window_door_is_open','on')
      %}
        Open and Unlocked
      {% elif
      is_state('binary_sensor.laundry_door_sensor_access_control_window_door_is_open','on')
      %}
        Door Open
      {% elif is_state('lock.door_lock','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.door_lock','unlocked') and
      is_state('binary_sensor.laundry_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif
      is_state('binary_sensor.laundry_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif is_state('lock.door_lock','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.door_lock','locked') and
      is_state('binary_sensor.laundry_door_sensor_access_control_window_door_is_open','off')
      %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: |-
      {% set bl = states('sensor.laundry_door_sensor_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 %}
    badge_color: |-
      {% set bl = states('sensor.laundry_door_sensor_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 %} disabled
      {% endif %}
    tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          left: -3px;
        }
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:lock-smart
        badge_icon: |-
          {% set bl = states('sensor.door_lock_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 %}
        badge_color: |-
          {% set bl = states('sensor.door_lock_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 %} disabled
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: keypad-laundry_room
        card_mod:
          style: |
            mushroom-badge-icon {
              left: -3px;
            }
            ha-card {
              margin-top: -12px;
              --icon-border-radius: 12px;
            }
            mushroom-shape-icon {
              --icon-color: #e1e1e1 !important;
            }
      - type: custom:mushroom-lock-card
        entity: lock.door_lock
        name: Laundry Door
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            ha-card {
              margin-top: -12px;
              margin-left: -52px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.door_lock','locked') and
      is_state('binary_sensor.laundry_door_sensor_access_control_window_door_is_open','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

Not sure what you’re taking about with the Raptor Door Locks, here’s my current Raptor page.

[MisterMeJ]

Thanks a lot!
Thought i tried everything, but didn’t thought about this option.

[RASBR (Rami)]

@RASBR

      - type: custom:mushroom-template-card
        entity: switch.pool_filter_pump
        primary: Filter
        icon: none
        icon_color: ''
        badge_color: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                border-radius: 50%;
                {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
              }
              .shape {
                {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                --shape-color: none;
                --icon-symbol-size: 5px;
                --icon-size: 34px; 
              }

This worked for some. THANK YOU
What about the below when there are shapes? any advice?

      - type: custom:mushroom-template-card
        entity: switch.pool_filter_pump
        primary: Filter
        icon: none
        icon_color: ''
        badge_color: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                border-radius: 50%;
                {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
              }
              .shape {
                {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                --shape-color: none;
                --icon-symbol-size: 5px;
                --icon-size: 34px; 
              }

[dimitri.landerloos]

Try like this. i think the animation is working as intended, but not 100% sure as i dont know what it is supposed to look like

- type: custom:mushroom-template-card
  entity: switch.pool_filter_pump
  primary: Filter
  icon: none
  icon_color: ''
  badge_color: ''
  card_mod:
    style: 
      mushroom-shape-icon$: |
        .shape {
          {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
          {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
          --shape-color: none;
          --icon-symbol-size: 5px;
          --icon-size: 34px; 
        }
      .: |
        ha-state-icon {
          {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }} 
          border-radius: 50%;
          {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
        }

EDIT: Fixed it. realised that there were 2 different animated elements and only 1 was working. works as intended i think now

[NuttShell (Max)]

@RASBR

What about the below when there are shapes? any advice?

read the great post series about animation from rhysb
Everything’s there

[Faecon (Jo)]

How did you position the blue icon near “Salon” ?