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

rhysb · June 6, 2022, 8:10pm

This is the best I can do so far.

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: I Like Mushrooms in Small-Caps
    secondary: null
    icon: mdi:mushroom
    layout: horizontal
    card_mod:
       style: |
         ha-card {
           font-variant: small-caps;
         }
  - type: custom:mushroom-template-card
    primary: I Like Mushrooms in Italics
    secondary: null
    icon: mdi:mushroom
    layout: horizontal
    card_mod:
       style: |
         ha-card {
           font-style: italic;
         }
  - type: custom:mushroom-template-card
    primary: I Like Handwritten Mushrooms
    secondary: null
    icon: mdi:mushroom
    layout: horizontal
    card_mod:
       style: |
         ha-card {
            font-family: "Lucida Handwriting";
         }

atomicpapa · June 6, 2022, 8:24pm

You forgot the ever popular “I like Mushrooms in Tea”

rhysb · June 6, 2022, 8:26pm

Of course

berkans · June 6, 2022, 10:02pm

That was exactly what I needed. Awesome work. Thank you very much.

berkans · June 6, 2022, 10:24pm

May I also another question ? After editing all of the icons became animated whenever I refresh the page. The icons float from left to the place where they are located. Is there a way to turn that off ?

rhysb · June 7, 2022, 5:07am

Ask and you shall receive.

Big Mushroom

type: custom:mushroom-template-card
primary: I Like Big Mushrooms
secondary: And I can not lie
icon: mdi:mushroom
layout: horizontal
card_mod:
   style: |
     ha-card {
       --card-primary-font-size: 20px;
     }

rhysb · June 7, 2022, 5:26am

Or if you prefer…

Little Mushroom

type: custom:mushroom-template-card
primary: I Like Big Mushrooms
secondary: And I can not lie
icon: mdi:mushroom
layout: horizontal
card_mod:
   style: |
     ha-card {
       --card-secondary-font-size: 9px;
       --card-secondary-font-weight: lighter;
       --card-primary-font-weight: normal;
     }

leeb98 · June 7, 2022, 5:33am

Here is my current person home status line example

the purpose of this is to have a different view for each person using the system (companion app) and have the top line the same on every view/page. The last Icon is to indicate if the garage door is locked.

To include this status on every view/page, i use the following

title: "Theater"
icon: mdi:film  
cards: 
    - !include ../Includes/Phones.yaml 

    - type: vertical-stack
      cards:    
        - type: 'custom:button-card'
          template: card_title
          name: Theater Room


        - type: custom:mushroom-light-card
          entity: light.theater
          show_color_control: true
          show_brightness_control: true
          show_color_temp_control: true
          collapsible_controls: true
          icon: mdi:ceiling-light
          name: "Theater Ceiling"

        - type: custom:mushroom-light-card
          entity: light.led_light_strip_2
          show_color_control: true
          show_brightness_control: true
          show_color_temp_control: true
          collapsible_controls: true
          icon: mdi:led-strip-variant
          name: "Back Light"

The include on every page/tab/view etc

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.lee
    icon_color: green
    name: LB
    content_info: name
    icon: mdi:face-man
  - type: entity
    entity: person.caroline
    icon_color: green
    name: CC
    icon: mdi:face-woman-outline
    content_info: name
  - type: entity
    entity: person.aimee
    icon_color: green
    name: AC
    icon: mdi:face-woman-outline
    content_info: name
  - type: entity
    entity: person.blake
    icon_color: green
    icon: mdi:face-man
    name: BC
    content_info: name
  - type: entity
    entity: person.kitt
    icon_color: green
    icon: mdi:face-man
    name: KB
    content_info: name
  - type: template
    double_tap_action:
      action: none
    entity: binary_sensor.door_window_sensor_158d000276a147
    icon: |-
      {% set state=states('binary_sensor.door_window_sensor_158d000276a147') %}
      {% if state=='off' %}
      mdi:garage-variant-lock
      {% elif state=='on' %}
      mdi:garage-open-variant
      {% else %}
      mdi:garage-alert-variant
      {% endif %}
    icon_color: |-
      {% set state=states('binary_sensor.door_window_sensor_158d000276a147') %}
      {% if state=='off' %}
      green
      {% elif state=='on' %}
      orange
      {% else %}
      red
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none

alignment: center

rhysb · June 7, 2022, 5:38am

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 · June 7, 2022, 7:45am

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 · June 7, 2022, 8:37am

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 · June 7, 2022, 8:38am

Much better. Thank you very much again.

Lunkobelix · June 7, 2022, 9:26am

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:

Kabala · June 7, 2022, 10:29am

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.

rhysb · June 7, 2022, 10:34am

Is this what you want?

Mushroom Help

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 · June 7, 2022, 10:39am

@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 · June 7, 2022, 10:48am

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…
Capture

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 · June 7, 2022, 10:53am

Is this it?

Mushroom-chip

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 · June 7, 2022, 10:56am

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 · June 7, 2022, 11:05am

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