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

@piitaya do any of the cards support the header/footer options like the lovelace cards to add buttons at the bottom? Didn’t seem to like it for me on the light card

Hi, I have a TADO binary sensor which is created by the integration and shows in HA as window open or closed but in developer tab it’s classed as on or off. In my mushroom card, it shows binary sensor as off.

How can I get it to show window as open or closed in the mushroom card as it should as device class is window ?

I tried adding a customization but it already knows it’s a window ? I don’t want to duplicate the entity



Thanks

Martyn

I use this for my door sensors to convert from on/off to open/close. There’s probably a better way to do it but this works in a mushroom template card. I use it as my secondary info line

{% set state=states(entity) %}
{% if state=='on' %}
open
{% elif state=='off' %}
closed
{% endif %}

Great work! Do you mind sharing your sidebar code?

what does fill_container do?

check my post history. im not at a pc to be able to share right now

You can check this if you want the card to take the full height (useful when you use it in a grid layout :slightly_smiling_face:)

It’s not supported. But you can combine card with vertical stack in card.

Interesting thanks, any plans to support it?

There is plan to add custom buttons on entity card but no footer, header.

I prefer to keep mushroom card simple for now :sweat_smile: :

  • one icon
  • one name
  • one state
  • one line of control

Advanced things can be done with card_mod, vertical stack in card, etc…

Yeah but they don’t look as pretty as yours :smiley:

How did you create the buttons on the room cards?
screenshot-community.home-assistant.io-2022.05.02-22_22_35

this is based on the example provided by @dunner
It is a combination of stack-in-card, horizontal stacks + chips (templates and lights) + no borders

Salon example:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |
          {% if is_state('media_player.sony_bravia_tv', 'off') %}
            mdi:television-classic
          {% else %}
            mdi:television-classic-off
          {% endif %}
        icon_color: |
          {% if is_state('media_player.sony_bravia_tv', 'off') %}
            grey
          {% else %}
            indigo
          {% endif %}
        entity: light.kitchen_led
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        icon: |
          {% if is_state('light.kitchen_led', 'on') %}
            mdi:lightbulb-spot
          {% else %}
            mdi:lightbulb-spot-off
          {% endif %}
        icon_color: |
          {% if is_state('light.kitchen_led', 'on') %}
            yellow
          {% else %}
            grey
          {% endif %}
        entity: light.kitchen_led
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        entity: climate.saswell_gtz03
        icon: |
          {% if is_state('climate.saswell_gtz03', 'off') %}
            mdi:radiator-off
          {% elif is_state('climate.saswell_gtz03', 'auto') %}
            mdi:radiator-disabled
          {% else %}
            mdi:radiator
          {% endif %}
        icon_color: |
          {% if is_state('climate.saswell_gtz03', 'off') %}
            grey
          {% elif is_state('climate.saswell_gtz03', 'auto') %}
            orange
          {% else %}
            red
          {% endif %}
        content: '{{ states(''climate.saswell_gtz03'',) }}  '
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
    alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Salon
        layout: vertical
        icon: mdi:sofa
        icon_color: '#a37208'
        tap_action:
          action: navigate
          navigation_path: salon
        hold_action:
          action: more-info
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.ble_temperature_salon
            icon: mdi:thermometer
            icon_color: yellow
            content: '{{ states(''sensor.ble_temperature_salon'',) }} °C '
            card_mod: null
            style: |
              ha-card {
                  box-shadow: 0px 0px;
              }
          - type: template
            entity: sensor.ble_temperature_salon
            icon: mdi:water-percent
            icon_color: teal
            content: '{{ states(''sensor.ble_humidity_salon'',) }} % '
            card_mod: null
            style: |
              ha-card {
                  box-shadow: 0px 0px;
              }
        alignment: center
~~

Does anyone else have an issue where mushroom cards wont render on a google nest hub?

indeed!

I think the that by default stack-in-card does not have borders
here I have condidational cards as well, showing different if phone is charging or not.
I shall change this simply to the different Icon by state… :wink:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-person-card
    entity: device_tracker.sg21
    use_entity_picture: true
    hide_name: true
    layout: vertical
  - type: conditional
    conditions:
      - entity: binary_sensor.sg21_is_charging
        state: 'on'
    card:
      type: custom:mushroom-entity-card
      entity: sensor.sg21_battery_level
      layout: vertical
      name: SG21
      icon_color: light-green
      icon: mdi:battery-charging-medium
  - type: conditional
    conditions:
      - entity: binary_sensor.sg21_is_charging
        state: 'off'
    card:
      type: custom:mushroom-entity-card
      entity: sensor.sg21_battery_level
      name: SG21
      layout: vertical
      icon_color: green
      icon: mdi:battery-arrow-down

Hi all,
I have got a problem handling the color of an entities icon, depending on its state.
In my case, I have a sensor for waste collection indicating, if waste has to be put for collection. But it’s not working. It defaults to black…
Here is the code for that:

cards:
  - type: custom:mushroom-entity-card
    entity: sensor.gcoll_bio
    icon_color: >-
      {% if is_state('sensor.gcoll_bio.state', 'HEUTE') %} red {% elif
      is_state('sensor.gcoll_bio.state', 'MORGEN') %} orange {% else %} green {%
      endif %}
  - type: custom:mushroom-entity-card
    entity: sensor.gcoll_paper

It’s basically a horizontal-stack which holds two of those entities:


Any idea, what’s wrong with the code? Already a lot of variants… :frowning:

Maybe it’s because of the spaces before and after the color ?

That only works in the template card, doesn’t it?

missing the

%}

at the end of your {% elif statement after ā€œredā€

But also I don’t believe this works in entity card, you’ll need to use a template card if I’m not mistaken.

Does that change dynamically (without refreshing the page) if the state has been changed?