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

[spo0n125]

Hi all

I have a problem with my mushrrom cards, the card itself cut’s the text instead of increase the size as you can see in the image :

the code is this :

square: false
columns: 1
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Deco Living Room
            picture: /local/wifi.png
            layout: vertical
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    picture: /local/ip.png
                    icon_color: yellow
                    content: '{{state_attr('''', ''ip'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/internet.png
                    icon_color: blue
                    content: >-
                      {{state_attr('device_tracker.living_room_deco',
                      'internet_online')}}
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/connected.png
                    icon_color: blue
                    content: >-
                      {{ device_entities('966a1db5ec1a0fbd78bd3eec7f1cb447') |
                      map('state_attr', 'friendly_name') | list}}
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                alignment: center
                card_mod:
                  style: |
                    ha-card {
                      position: center;
                      margin: 0px 0px 0px 0px;
                      left: 0px;
                      top: calc(25% - px);
                      }
                      .chip-container {
                      flex-flow: column !important;
                      }
                    }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Deco Office
            picture: /local/wifi.png
            layout: vertical
            icon_color: yellow
            tap_action:
              action: navigate
              navigation_path: /lovelace/quarto
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    picture: /local/ip.png
                    icon_color: yellow
                    content: '{{state_attr('''', ''ip'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/internet.png
                    icon_color: blue
                    content: '{{state_attr(''device_tracker.office_deco'', ''internet_online'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/connected.png
                    icon_color: blue
                    content: '{{ device_entities(''89e54cf6074785d49b935749cdb3c8b5'') |
          map(''state_attr'', ''friendly_name'')  
                              | list }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                alignment: center
                card_mod:
                  style: |
                    ha-card {
                      position: center;
                      margin: 0px 0px 0px 0px;
                      left: 0px;
                      top: calc(25% - px);
                      }
                      .chip-container {
                      flex-flow: column !important;
                      }
                    }

What im missing or doing wrong?

Thanks all

[piitaya (Paul)]

Template card use Jinja2 template which are rendered server side. That’s why you can use the same template syntax with your automations, template sensors, markdown card and mushroom template cards.

If you use a many templates and ,have a lot of entities this can significantly increase your cpu.

[piitaya (Paul)]

Can you share the template that you use in your card? There may have some optimization to do.

[Lunkobelix]

It is a bit random and not specific to these cards, but here is an exmaple that causes high CPU:

square: true
columns: 3
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: Idag
    secondary: >-
      {{
      (states('sensor.elforbrukning_totalt_dag')|float-states('sensor.elforbrukning_laddning_dag')|float)|round(0)
      }} kWh / {{ states('sensor.elkostnad_huset_dag')|round(0) }} kr
    icon: mdi:calendar-outline
    icon_color: blue
    layout: vertical
    entity: sensor.elkostnad_huset_dag
    tap_action:
      action: more-info
  - type: custom:mushroom-template-card
    entity: sensor.elkostnad_huset_manad
    primary: Månad
    secondary: >-
      {{
      (states('sensor.elforbrukning_totalt_manad')|float-states('sensor.elforbrukning_laddning_manad')|float)|round(0)
      }} kWh / {{ states('sensor.elkostnad_huset_manad')|round(0) }} kr
    icon: mdi:calendar-month-outline
    icon_color: blue
    layout: vertical
    tap_action:
      action: more-info
    style: |
      ha-card {
         margin: 0px -5px 0px -5px;
       }
  - type: custom:mushroom-template-card
    primary: Faktura {{ (now().timestamp() | timestamp_custom('%B'))[:3]|lower }}
    secondary: >-
      {{ states('sensor.elkostnad_huset_manad')|round(0) +
      states('sensor.elkostnad_laddning_manad')|round(0) }} + 707 kr
    icon: mdi:cash-multiple
    icon_color: blue
    layout: vertical

[ihavn]

Hi I’m trying to make something similar.
Will you share your code?

[MRobi (Mike)]

This is what I ended up with

[jascdk]

Pretty much all of it

[BBESINET (BBE)]

Hi !

I asked the same question on the other post, but I think it better fits here…

I love the idea and the compact and efficient use of the space.

I will probably use and modify it a lot !

On the other hand, I am trying to remove as much as possible cardmod and stack-in-card in order to stay closer to mushroom initial idea and be capable to use UI only.

I am thus trying to bring the same simplicity using only mushroom template and chips, but I have one problem remaining : Removing card mod is easy (despite less beautifull), but I struggle to find the equivalent of grid or horizontal/vertical stack that would allow to merge borders of cards while not breaking UI. Does this exist ?

[BBESINET (BBE)]

Dear all, especially @piitaya .

While I love the concept behind mushroom, I am very frequently struggling with the fact that in order to tune it more you need stack-in cards or cardmod and thus breaks the UI philosophy.

Is there a solution to create a sort of grid of mushroom card and chips, unified with the same background, while keeping the UI management?
I am currently strugling on 3 aspects:

• creating a grid with cards of diffrents sizes
• setting mushroom chips in a vertical column (this could be done chips by chips, but losing the capacity to rearrange dynamicaly with conditionnal chips)
• re-unite all this into a single card with unified background

Thanks for the work performed, and congratulation to all the yaml and cardmod experts that create wonderfull dashboards !

[Macke]

Hi, did you find a solution for this?

[MRobi (Mike)]

I don’t believe it does.

[tmchow]

I’m missing something obvious here… the “sound machine” chip is not orange even though the template code run in dev tools will return “orange”. If i remove the templating syntax and just set icon_color to orange the chip icon turns orange.

what is wrong with this code?

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.kids_room_temperature
  - type: entity
    entity: binary_sensor.kids_room_motion
  - type: entity
    entity: sensor.kids_room_humidity
  - type: entity
    entity: switch.kids_room_sound_machine
    double_tap_action:
      action: none
    tap_action:
      action: toggle
    hold_action:
      action: none
    icon_color: |
      {% if is_state("switch.kids_room_sound_machine", "on") %}
        orange
      {% else %}
        #44739e
      {% endif %}

[zanixmechanix (Joshua)]

A warning about version 2023.2.0
In this PR, all of the --rgb-{color}-color CSS variables were replaced with this format --{color}-color. Anything that uses these variables will no longer have a color. Also, they are now in hex format instead of R, G, B. If you used these in rgba() there is no replacement other than adding the variables to a theme. It looks like mushroom still has --rgb-{color} variables, but they do not work outside of mushroom cards.

As a temporary fix, I added this to the themes I am using.

  rgb-amber-color: 255, 193, 7
  rgb-black-color: 0, 0, 0
  rgb-blue-grey-color: 96, 125, 139
  rgb-blue-color: 33, 150, 243
  rgb-brown-color: 121, 85, 72
  rgb-cyan-color: 0, 188, 212
  rgb-deep-orange-color: 255, 87, 34
  rgb-deep-purple-color: 103, 58, 183
  rgb-green-color: 76, 175, 80
  rgb-grey-color: 158, 158, 158
  rgb-indigo-color: 63, 81, 181
  rgb-light-blue-color: 3, 169, 244
  rgb-light-green-color: 139, 195, 74
  rgb-lime-color: 205, 220, 57
  rgb-orange-color: 255, 152, 0
  rgb-pink-color: 233, 30, 99
  rgb-purple-color: 156, 39, 176
  rgb-red-color: 244, 67, 54
  rgb-teal-color: 0, 150, 136
  rgb-white-color: 255, 255, 255
  rgb-yellow-color: 255, 235, 59

[BBESINET (BBE)]

@tmchow

{% if is_state("switch.kids_room_sound_machine", "on") %}

try this instead:

{% if is_state('switch.kids_room_sound_machine', 'on') %}

[codedmind]

Thanks again.
i assume as this card isn’t mushroom isn’t possible animate the chevron?

[UgoCo]

Hi, can someone explain to me how to make my mushroom-person-cards responsive?

type: horizontal-stack
cards:
  - type: horizontal-stack
    cards:    
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-person-card
                entity: person.ugo
                alignment: left
                style: |
                    ha-card {
                    #   height: 170px !important;
                    #   width: 240px !important;
                    # padding: 12px 20px 12px 20px!important;
                    {
                      --mdc-icon-size: 180px;
                    }
                    {
                     height: 200px !important;
                     }
                use_entity_picture: true
                icon_type: entity-picture
                entity_picture: "/local/pictures/person_ugo.png"
                name: Ugo
                layout: vertical
                tap_action:
                  action: more-info
                  browser_mod:
                    command: popup
                    deviceID: this
                    title: Ugo
                    card:
                      type: custom:mod-card
                      style: |
                        ha-card {
                          padding-right: 5px;
                          padding-left: 5px;
                          padding-bottom: 5px;
                        }
                      card:
                        type: vertical-stack
                        cards:
                          - type: custom:mushroom-entity-card
                            entity: sensor.iphone_8_ugo_geocoded_location
                            primary_info: none
                            icon: mdi:map-marker
                            icon_color: yellow
                          - type: horizontal-stack
                            cards:
                              - type: map
                                entities:
                                  - entity: device_tracker.iphone_8_ugo_2
                                aspect_ratio: '2'
                                use_entity_picture: true
              - type: custom:mushroom-chips-card
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: none;
                    --chip-height: 43px
                  }
                chips:
                  - type: template
                    icon_color: |2-
                          {% set state=states('sensor.iphone_7_gabri_battery_state') %}
                                {% if state=='Charging' %}
                                green
                                {% elif state=='Not Charging' %}
                                #6f6f6f
                              {% endif %}
                    entity: sensor.iphone_8_ugo_battery_state
                    content: '{{ states(entity) }}'
                    icon: mdi:power-plug
                    tap_action:
                      action: more-info
                  - type: template
                    entity: sensor.iphone_8_ugo_battery_level
                    content: '{{ states(entity) }} %'
                    icon: |2
                                {% set bl = states('sensor.iphone_8_ugo_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 %}
                    icon_color: |2-
                                {% set bl = states('sensor.iphone_8_ugo_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 %} grey
                                {% endif %}
                    tap_action:
                      action: more-info
                  - type: entity
                    entity: proximity.home
                    icon_color: white
                    card_mod: null
                    style: |
                      ha-card {
                        box-shadow: 0px 0px;
                      }
                
#-------------------------------------------------------------------------------
        #   - type: 'custom:mushroom-person-card'
        #     entity: person.gabriella_2
        #     name: Gabriella
        #     template: sensor_person
        #     use_entity_picture: true
        #     entity_picture: "/local/pictures/person_gabriella.png"
        #     variables:
        #       battery_entity: sensor.iphone_7_gabri_battery_level 

      - type: horizontal-stack
        cards:    
          - type: custom:stack-in-card
            mode: vertical
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.gabriella_2
                    use_entity_picture: true
                    name: Gabriella
                    layout: vertical
                    tap_action:
                      action: more-info
                      browser_mod:
                        command: popup
                        deviceID: this
                        title: Gabriella
                        card:
                          type: custom:mod-card
                          style: |
                            ha-card {
                              padding-right: 15px;
                              padding-left: 15px;
                              padding-bottom: 15px;     
                            }
                          card:
                            type: vertical-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.iphone_7_gabri_geocoded_location
                                primary_info: none
                                icon: mdi:map-marker
                                icon_color: yellow
                              - type: horizontal-stack
                                cards:
                                  - type: map
                                    entities:
                                      - entity: device_tracker.iphone_7_gabri_2
                                    aspect_ratio: '2'
                                    use_entity_picture: true
                  - type: custom:mushroom-chips-card
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-spacing: none;
                        --chip-height: 43px
                      }
                    chips:
                      - type: template
                        icon_color: |2-
                              {% set state=states('sensor.iphone_7_gabri_battery_state') %}
                                    {% if state=='Charging' %}
                                    green
                                    {% elif state=='Not Charging' %}
                                    #6f6f6f
                                  {% endif %}
                        entity: sensor.iphone_7_gabri_battery_state
                        content: '{{ states(entity) }}'
                        icon: mdi:power-plug
                        tap_action:
                          action: more-info
                      - type: template
                        entity: sensor.iphone_7_gabri_battery_level
                        content: '{{ states(entity) }} %'
                        icon: |2
                                    {% set bl = states('sensor.iphone_7_gabri_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 %}
                        icon_color: |2-
                                    {% set bl = states('sensor.iphone_7_gabri_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 %} grey
                                    {% endif %}
                        tap_action:
                          action: more-info
                      - type: entity
                        entity: proximity.home
                        icon_color: white
                        card_mod: null
                        style: |
                          ha-card {
                            box-shadow: 0px 0px;
                          }  

[UgoCo]

Can the image of the person card be enlarged?

[alexandrechoske (Smart Chosk)]

Share the rounded apex chart please

Also with the 4 mushrooms on the left would be great hahah
thanks!

[tmchow]

No, unfortunately switching the double to single quotes didn’t change/fix anything.

[Jelle1991 (Jelle)]

I have a question about the climate card.
Does anyone know if it’s possible to achieve the following:

Right now, when you click this button, you get to see the HVAC modes:

Changes to:

Since i only have 1 HVAC mode button enabled, is it possible to make this button visible in the first view?
Like this: