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

[rhysb (Rhys)]

Does this work better for you?

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/ls50.png' ) no-repeat center 0px;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }

[Posreg (Daros)]

do you mmind sharing the code for one of the cards ?
i struggle to add the background image in the template or entity card (hiowever it works for chips somehow…)
thanks!!

[berkans (Berkan Sezer)]

Sure. But if you mean the main background. You have to change it from raw configuration editor

square: false
columns: 1
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-title-card
        title: Otomasyonlar 🔑
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Sleep Mode
        entity: input_boolean.notify_home3
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/sleep.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home3', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Movie Time
        entity: input_boolean.notify_home
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/movietime.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Alarm
        entity: input_boolean.notify_home4
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/alarmpanel2.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home4', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Guest Mode
        entity: input_boolean.notify_home1
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/guest.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home1', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Music Follow
        entity: input_boolean.notify_home7
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/musicfollow.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home7', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Traffic 35
        entity: input_boolean.notify_home5
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/traffic35.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home5', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Traffic 45
        entity: input_boolean.notify_home6
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/traffic45.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home6', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Windows
        entity: input_boolean.notify_home8
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/windows.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.notify_home8', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi
        primary: Face Recognition
        entity: input_boolean.face_recognize
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/icons/automation/facerecognition.png' ) no-repeat center 0px;
            background-size: 42px 42px;
            {% if is_state('input_boolean.face_recognize', 'on') %}
            {% else %}
              filter: grayscale(100%);
            {% endif %} 
          }
      - type: custom:mushroom-entity-card
        secondary_info: none
        layout: vertical
        icon: ''
        tap_action:
          action: toggle
        icon_color: amber
      - type: custom:mushroom-entity-card
        layout: vertical
        secondary_info: none
        tap_action:
          action: toggle
        icon_color: amber
      - type: custom:mushroom-entity-card
        layout: vertical
        secondary_info: none
        icon: mdi:window-closed-variant
        fill_container: false
        tap_action:
          action: toggle
        icon_color: amber

[berkans (Berkan Sezer)]

Much better. Thank you very much again.

[Lunkobelix]

Did you find a way to make the icon flash? I’m showing an icon when myu car is charging and would be a nice effect if the icon could flash slowly (or even better fade in/out slowly).

Does anyone else know?

I found this tutorial but not sure how to make it work with Mushroom:

Animate Icons with Home Assistant: Spin, Flash, & Rotate. Custom Button Card - Tutorial #1

[Kabala (Cata)]

Hi,
unfortunately I didn’t find a solution either.
In custom button card it works without problems but apparently not in mushroom.
As it turns out, it’s not possible.

Card-mod - Add css styles to any lovelace card

So only blinking one icon left ;(((… Thank you for response.

[rhysb (Rhys)]

Is this what you want?

type: custom:mushroom-template-card
primary: Help!
secondary: It's on fire!
icon: mdi:fire
icon_color: red
card_mod:
   style: |
     mushroom-shape-icon {
       animation: blink 1s linear infinite;
     }
     @keyframes blink {
       50% {opacity: 0;}
     }

[RodgerDodger]

@rhysb:

Do you have an idea how to change the font-color of the chip content?

I tried a lot but won no price yet.

  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.MYPERSON
        use_entity_picture: true
        layout: vertical
        hold_action:
          action: navigate
          navigation_path: dennis
        hide_name: false
        hide_state: false
        fill_container: true
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: |-
              {% if is_state('person.MYPERSON', 'home') %}
                mi casa
              {% elif is_state('person.MYPERSON', 'not_home') %}
                unterwegs
              {% else %}
                {{ states('person.MYPERSON') }}
              {% endif %}
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }
        alignment: center

[cowboysdude (John Wade)]

I love the weather card but I’d like to use some of my own data from my weather station…

Is that possible?

Here’s a capture of what it looks like now…

I have weather data like this →
UV, Wind speed, humidity, pressure… etc.

Plus I’d like to use daily forecast instead of hourly or both.

Thank you!

[rhysb (Rhys)]

Is this it?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
    card_mod:
       style: |
         ha-card {
           --text-color: Chartreuse;
         }

[RodgerDodger]

@rhysb

--text-color: Chartreuse;

Goddamnit! I fiddled with like everything from primary-text-color and all I found in examination via Google Chrome.

And yes, that’s it.

And tip to find the right designations via Chrome as all these cards are clickable and the code won’t highlight like in static code?

I thought I found the color setting for the person card control in --state-home-color but that doesn’t work as expected either…

[rhysb (Rhys)]

Click on main html code, ctrl-f, search for mushroom and drill down from there. As you drill down elements will be highlighted.

[Kabala (Cata)]

That’s exactly what it is…
Thank you.

[Lunkobelix]

Wow - thank you! That is almost exactly what I wanted! I guess there is no way to only blink the actual icon and not the colored circle around it?

Edit:
Trying to make it condition based so that the icon only blinks when the car is charging. Any idea why this is not doable?

style: |
{% set state=states('sensor.easee_laddbox_status') %}
{% if state == 'charging' %}
  mushroom-shape-icon {
    animation: blink 3s ease-in infinite;
  }
  @keyframes blink {
    50% {opacity: 0;}
  }
{% endif %}
  ha-card {
     --ha-card-background: rgba(0, 0, 0, 0);
     box-shadow: none;
     
   }
   div#header__title {
     font-size: 10px;
   }

[Posreg (Daros)]

thank you!
that is actually what I’ve need, i think my media / radio card is finished now

I need to work with some photos and paddings but i’m getting there!

[rhysb (Rhys)]

This worked for me.

card_mod:
   style: |
     {% set state=states('sensor.rhys_phone_detected_activity') %}
     {% if state == 'still' %}
       mushroom-shape-icon {
         animation: blink 3s ease-in infinite;
       }
       @keyframes blink {
         50% {opacity: 0;}
       }
     {% endif %}
       ha-card {
          --ha-card-background: rgba(0, 0, 0, 0);
          box-shadow: none;
       }
       div#header__title {
          font-size: 10px;
       }

[Lunkobelix]

It was the indention, as always Thank you for the help!

[TheFourDees (Jay)]

Hi, I’m trying your code and erroring out. Not sure what I’m missing:

type: custom:mushroom-template-card
primary: Powder Room
secondary: ''
icon: mdi:fan
layout: vertical
entity: switch.powder_room_fan
icon_color: |
  {% if is_state("switch.powder_room_fan", 'on') %}
    orange
  {% endif %}
style: |
  {% set state=states('switch.powder_room_fan') %}
  {% if state == 'on' %}
    mushroom-shape-icon {
      animation: blink 3s ease-in infinite;
    }
    @keyframes blink {
      50% {opacity: 0;}
    }
  {% endif %}
    ha-card {
       --ha-card-background: rgba(0, 0, 0, 0);
       box-shadow: none;
    }
    div#header__title {
       font-size: 10px;
    }

but I’m getting the error:

Visual editor is not supported for this configuration:
At path: style -- Expected a value of type `never`, but received: `"{% set state=states('switch.powder_room_fan') %}\n{% if state == 'on' %}\n mushroom-shape-icon {\n animation: blink 3s ease-in infinite;\n }\n @keyframes blink {\n 50% {opacity: 0;}\n }\n{% endif %}\n ha-card {\n --ha-card-background: rgba(0, 0, 0, 0);\n box-shadow: none;\n }\n div#header__title {\n font-size: 10px;\n }\n"`
You can still edit your config in YAML.

Also, is it possible to change the icon based on state? It tried using the below code in the icon section but it doesn’t work so I’m thinking it’s not implemented in the card:

{% if is_state("states.powder_room_fan", 'on') %}
  mdi:fan
{% else %}
  mdi:fan-off
{% endif %}

[Lunkobelix]

In the first code block, look at the indention. Not sure that is the issue but here is how mina looks:

style: |
  {% set state=states('sensor.easee_laddbox_status') %}
  {% if state == 'charging' %}
  mushroom-shape-icon {
    animation: blink 3s ease-in infinite;
  }
  @keyframes blink {
    50% {opacity: 0;}
  }
  {% endif %}

To change icon based on state you can do it like this:

icon: |-
  {% set state=states('sensor.easee_laddbox_power') %}
    {% if state=='0.0' %}
      mdi:ev-station
    {% else %}
      mdi:battery-charging
  {% endif %}

[TheFourDees (Jay)]

Strange, believe I have the indentation is right but still get the error.

Your icons state code worked like a charm though! Thanks!