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

Hi everyone,
I just start using the mushroom cards and i think its great, the only that borders me is the the GUI does not show as it should be (see pic) is there a way to fix this or do i miss something simple

thanks

I can’t see anything that stands out. What’s bothering you?

That’s because you chose a template card and there you can do what the title promises: template

To start you probably might choose the mushroom-entity-card or something to have the more visual editor :

Soooooooo apparently you can’t show an image with a mushroom chip card?

Thanks, I thought i saw some tutorials where they look different even when the information is the same.

You can with some simple CSS. This puts an image in the background of the template Chip. the image needs to be 36px square.

chip

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
       style: |
         ha-card {
           --chip-background: url( '/local/ls50.jpg' ) no-repeat center center;
         }
  - type: template
    icon: mdi:speaker
5 Likes

My take on a simple Mushroom Climate card.

Collapsed:

Expanded:

type: custom:stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: Bedroom A/C
        secondary: >-
          {% if is_state(entity, 'heat_cool') %}
            Heat/Cool 
          {% elif is_state(entity, 'heat') %}
            Heat
          {% elif is_state(entity, 'cool') %}
            Cool
          {% elif is_state(entity, 'dry') %}
            Dry
          {% elif is_state(entity, 'fan_only') %}
            Fan
          {% else %}
            Off 
          {% endif %} / {{
          states('sensor.bedroom_air_conditioner_measured_value_of_room_temperature')
          | round(1) }} °C 
        icon: |-
          {% if is_state(entity, 'heat_cool') %}
            mdi:autorenew 
          {% elif is_state(entity, 'heat') %}
            mdi:fire
          {% elif is_state(entity, 'cool') %}
            mdi:snowflake
          {% elif is_state(entity, 'dry') %}
            mdi:water-percent
          {% elif is_state(entity, 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:air-conditioner
          {% endif %}    
        entity: climate.bedroom_air_conditioner
        icon_color: |-
          {% if is_state(entity, 'heat_cool') %}
            green
          {% elif is_state(entity, 'heat') %}
            orange
          {% elif is_state(entity, 'cool') %}
            blue
          {% elif is_state(entity, 'dry') %}
            amber
          {% elif is_state(entity, 'fan_only') %}
            blue-grey
          {% else %}
            disabled
          {% endif %}
        multiline_secondary: false
        layout: horizontal
        fill_container: true
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: |-
              {% if is_state(entity, 'off') %}
                mdi:chevron-down 
              {% elif is_state(entity, 'on') %}   
                mdi:chevron-up    
              {% endif %}
            tap_action:
              action: toggle
            entity: input_boolean.bedroom_ac_dropdown
            icon_color: disabled
            card_mod:
               style: |
                 ha-card {
                     --chip-height: 45px;
                 }      
        alignment: end
        card_mod:
           style: |
             ha-card {
               --chip-box-shadow: none;
               --chip-background: none;
               padding: 10px 10px;
             } 
  - type: conditional
    conditions:
      - entity: input_boolean.bedroom_ac_dropdown
        state: 'on'
    card:
      type: thermostat
      entity: climate.bedroom_air_conditioner
      name: ' '
29 Likes

That’s great!! But what I think I’m doing I cannot with a chips card…here’s a screen shot of the image I’m trying to show…

Capture

I’ve tried this and so far I have the big black circle but not the actual phase…

- type: custom:mushroom-chips-card
            chips:
              - type: template                
                style: |
                  ha-card {
                    --chip-background: url( {% set state = states('sensor.moon') %} /local/images/moonphases/{{state}}.png ) no-repeat center center;
                  }
1 Like

What dimensions are the .png files? They would need to be 36px square.

They are 36 x 36…

This is what I’m getting back… when you click on it, it says

No entity provided to toggle

Capture

This works for me.

moon

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
       style: |
         ha-card {
           {% set phase = states('sensor.moon') %}
           --chip-background: url( '/local/moon_phases/{{ phase }}.png' ) no-repeat center center;
         }
3 Likes

Yeah I’m confused honestly… I used the exact code you’re using and it’s still not working…just that black circle is all.

- type: template
                style: |
                  ha-card {
                    {% set phase = states('sensor.moon') %}
                    --chip-background: url( '/local/images/moonphases/{{ phase }}.png' ) no-repeat center center;
                  }

That’s NOT working but your code is … I moved the images from

local/images/moonphases/
to
loca/moon_phases

and now it works great!!

Thank you!

1 Like

It sounds like lovelace was caching your images. You can add a ‘?v=1’ to the image URL to get it to reload the images.

1 Like

Thank you again… that fixed the original url I was using…

My pleasure :grinning:

1 Like

Just started playing with Mushroom cards yesterday LOL I must admit they are fun and interesting!! PLUS I can use templates directly in them and it makes sense to me!!!

Where’d you get the pics? Those look good.

I found some here. They just need to be resized.

Moon Phases by bthoven

2 Likes

While you wait for the new feature, you can achieve what you want with a little CSS.

Vertical:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-1
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 %} 
     }

Horizontal:

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

Rounded:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-3
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 %} 
     }
     ha-card {
       width: 66px;
       border-radius: 30px;
       margin-left: auto;
       margin-right: auto;
     }

Edit: Update to stop icon floating in

12 Likes

Yes those are the ones I have :slight_smile: