Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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";
         }
8 Likes

You forgot the ever popular ā€œI like Mushrooms in Teaā€

3 Likes

Of course :crazy_face:

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

4 Likes

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 ?

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;
     }
10 Likes

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;
     }
4 Likes

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
4 Likes

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 %} 
     }
1 Like

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!!

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

2 Likes

Much better. Thank you very much again.

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:

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.

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;}
     }
15 Likes

@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

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!

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;
         }
4 Likes

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

And yes, thatā€™s it. :slight_smile:

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ā€¦

1 Like

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

2 Likes