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 %}
2 Likes

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.

1 Like

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

4 Likes

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

1 Like

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
~~
2 Likes

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

1 Like

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?

2 Likes

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.

1 Like

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