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

[bocchinofr]

Hi,
i don’t see the notifications badge on the bell.

I used only one sensor group but it’s not wok

the code below

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ now().strftime("%A, %-d %B") }}'
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.light.tutte_luci) | selectattr('state', 'eq', 'on') | list | count)
              {% if notifications >= 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 

[dimitri.landerloos]

Post your yaml and we can help

[berkans (Berkan Sezer)]

Home Assistant Unavailable Entities Chip

Page Properties:

• Displays the list of offline entites in the topbar(or anywhere you place it)
• Dynamic icon that changes with the number of unavailable entities. If nothing is offline the icon changes.
• Browser Mod support. If you click the icon a new page, containing the list of unsupported devices will appear.
• Number Display. You will see the number of the offline devices inside the chip.

You can find everything in my github page.

Unavailable Entities

[Ben82cgn (Ben)]

Hey, somone know how to include the humidity?
THX

[dimitri.landerloos]

I dont believe that you can. but you can do something like this if you have card mod and stack in card installed.

type: custom:stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.bedroom_heating
        name: Thermostat
        show_temperature_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              width: 300px
            }
      - type: custom:mushroom-entity-card
        entity: sensor.bedroom_temperature_humidity_humidity
        name: Humidity
        card_mod:
          style: |
            ha-card {
              width: 150px;
              position: absolute;
              right: 25px;
            }

Could even do something like this that works on a smaller screens if you are ok with using the default layout instead.

type: custom:stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.bedroom_heating
        name: Thermostat
        show_temperature_control: true
        card_mod:
          style: |
            ha-card {
              width: 380px
            }
      - type: custom:mushroom-entity-card
        entity: sensor.bedroom_temperature_humidity_humidity
        name: Humidity
        card_mod:
          style: |
            ha-card {
              width: 150px;
              position: absolute;
              right: 5px;
              transform: scalex(-1);
            }
            mushroom-state-info {
              transform: scalex(-1);
              text-align: right;
            }

[dimitri.landerloos]

Please read the FAQ.

Only english is supported.

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[giacominos]

Is there a way to change in the Cover Card what the full close button does? I’ve peculiar blinds, when full down (100%) they tilt and they close at about 80%. So at the moment I use full down (down arrow) for tilt and double click or long press (customized to 80%) to close but the opposite would by ideal. I can’t control the tilting stuff with the tilting option, those blind basically collapse when fully down and tilt, but at 80% they touch the bottom without pressure and stay not tilted.

[BMWAddict (Jasper)]

Really loving mushroom cards and this community of people sharing idea’s.

This is my current dashboard and I use horizontal stacks with mushroom template cards to display the rooms, with temperature and light status. If you click on the room, it opens a more detailed room overview with all the lights.

Couple questions:

1. I find it all a bit too white and colorless. When lights are on the icon turns orange. But that is it. Any tips? Also would like to add amount of lights counter per room next to the temp if possible. Maybe also a fan icon for the bathrooms (on/off)

2. The room cards could potentialy made a bit smaller in my overview so I can possibly fit some more room cards on the main overview instead of scrolling down. Any tips on how to achieve this?

3. The mushroom lock card is great, but could potentialy made a bit smaller. Click on the icon is lock / unlock and show color red or green on status? What do you think? How to do this?

4. I would like to "steal " some of the ideas in this thread but often the copy and paste of code doesn’t work in the visual editor. What’s the best practice here? Open the raw configuration editor on the main page (showing all code) and do editing/pasting from here? I’ve tried for example adding the style elements to the room cards, but getting errors.

5. Under my weather section I would like to create a turn off all lights button chip and show a amount of lights counter. I’ve tried adding another chip to the horizontal stack, but then it’s too big and I don’t want to make the person cards larger. Would actually even prefer the person cards to be more minimalistic.

Code for horizontal stack of two room cards:

- type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: SK Ouders
            secondary: '{{ state_attr(''climate.hoofdslaapk'', ''current_temperature'') }}°C'
            icon: mdi:bed
            entity: light.slaapkamerouderslampen
            badge_color: ''
            icon_color: |-
              {% if is_state('light.slaapkamerouderslampen', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: /dashboard-mushroom/slaapkamer-ouders
          - type: custom:mushroom-template-card
            primary: BK Ouders
            secondary: >-
              {{ states('sensor.signify_netherlands_b_v_sml003_temperature_3')
              }}°C
            icon: mdi:shower
            entity: light.badkamer1lampen
            badge_color: ''
            icon_color: |-
              {% if is_state('light.badkamer1lampen', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: /dashboard-mushroom/badkamer-ouders

[correct_horse]

The following code used to work, to separate the chip icon from its text, but it does not work anymore in recent versions. Would there be an alternative method? Thanks!

card_mod:
  style:
    .chip-container>*:
      $: |
        ha-icon {
          margin-right: 20px;
        }
    .: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
      }

[siwilson (Simon Wilson)]

You are where I was a few weeks/months ago when I first came across Mushroom. After a lot of reading and reverse engineering what other people had done I now have most of my dashboards re-written using Mushroom cards and I am VERY happy with it.

The following is all my opinion based on not being a code expert so there are probably more efficient ways to do this.

The best way to sort colour scheme is create your own theme. I found adding a background image and making your card backgrounds translucent really effective.

Cutting and pasting code into dashboards can be tricky. I found the best way is to copy a card setup you want, add a manual card to your dashboard and then the copied code into it.

Here a few a few of my main dashboards.

Chips section

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: input_boolean.away_mode
    name: Home
    content_info: name
    icon_color: green
  - type: weather
    entity: weather.home
    show_conditions: true
    show_temperature: true
  - type: template
    entity: lock.front_door_lock
    icon: >-
      {{ 'mdi:lock' if is_state("lock.front_door_lock",'locked') else
      'mdi:lock-open' }}
    icon_color: '{{ ''green'' if is_state("lock.front_door_lock",''locked'') else ''red'' }}'
    content: Front Door
    double_tap_action:
      action: none
    tap_action:
      action: more-info
    hold_action:
      action: none
  - type: action
    tap_action:
      action: navigate
      navigation_path: /lovelace-phone/trains
    icon: mdi:train
alignment: center

Kitchen and Living Room section

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: '{{ states("sensor.kitchen_temperature") }}°C'
    icon: mdi:knife
    entity: light.kitchen_light
    tap_action:
      action: navigate
      navigation_path: /lovelace-rooms/kitchen
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state("light.kitchen_light",'on') %}
        yellow
        {% endif %}
    badge_icon: >-
      {{ 'mdi:motion-sensor' if is_state("binary_sensor.kitchen_occupancy",'on')
      else 'none' }}
    badge_color: >-
      {{ 'blue' if is_state("binary_sensor.kitchen_occupancy",'on') else 'none'
      }}
  - type: custom:mushroom-template-card
    primary: Living Room
    secondary: '{{ states("sensor.lounge_temperature") }}°C'
    icon: mdi:sofa
    entity: light.lounge_main
    tap_action:
      action: navigate
      navigation_path: /lovelace-rooms/livingroom
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state("light.lounge_main",'on') %}
        yellow
        {% endif %}
    badge_color: >-
      {{ 'blue' if is_state("binary_sensor.living_room_occupancy",'on') else
      'none' }}
    badge_icon: >-
      {{ 'mdi:motion-sensor' if
      is_state("binary_sensor.living_room_occupancy",'on') else 'none' }}

[dimitri.landerloos]

Try with ha-state-icon instead

card_mod:
  style:
    .chip-container>*:
      $: |
        ha-state-icon {
          margin-right: 20px;
        }
    .: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
      }

[BMWAddict (Jasper)]

Thanks @siwilson. Will have a go with the themes.

Other question: I’ve also added a mushroom-media card but I’m missing buttons to trigger to play a spotify playlist. I was thinking → horizontal stack and then one media-mushroom card and next to that a chip card with command/service to start media → spotify playlist? I want to play music on my Sonos speaker per room and have some predefined buttons for playlist/albums. Only question is how to do this? Do I need another plugin for this? The official HA spotify integration doesn’t support sonos speakers.

[tyr0n (Steve)]

Hi,

i just updated Home Assistant Core and System. Since the update all Mushroom Elements arent working anymore.

I get an Error “Custom element doesnt exist: mushroom-entity-card” and so on. Everything that has to do with mushroom. How can i get this fixed?

Thanks in advance!

[siwilson (Simon Wilson)]

Sorry, I do have Sonos but done;t control it much form HA.

You could try the Sonos Card in HACS

[Ben82cgn (Ben)]

@dimitri.landerloos

custom:mushroom

Thank you!

is it possibile to change the icon color on state on/off ? i try some ways but nothing happend

[dimitri.landerloos]

Something like this should work.

type: custom:stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.bedroom_heating
        name: Thermostat
        show_temperature_control: true
        card_mod:
          style: |
            ha-card {
              width: 478px;
            }
            mushroom-shape-icon {
              {% if state_attr('climate.thermostat','hvac_action') == 'heating' %}
                --icon-color: red !important;
                --shape-color: red !important;
              {% else %}
                
              {% endif %}
            }  
      - type: custom:mushroom-entity-card
        entity: sensor.bedroom_temperature_humidity_humidity
        name: Humidity
        card_mod:
          style: |
            ha-card {
              width: 150px;
              position: absolute;
              right: 5px;
              transform: scalex(-1);
            }
            mushroom-state-info {
              transform: scalex(-1);
              text-align: right;
            }

I prefer to use the state attribute of the thermostat since i dont always turn off my heating myself, so sometimes it will be idle rather than off.

Pick your colors yourself. Ive just used red as an example. But you can put hex values, rgb values, rgba values, or names. It doesnt really matter.

[BMWAddict (Jasper)]

Can somebody explain where I can change my theme? I’m looking to get different background than white or black.

The documentation says. . I must be overlooking it - but where do I find these profile settings? I copied the standard theme and renamed it to custom - hoping that I can change this etc. But how to enable?

> Just select your theme in your Home Assistant profile settings.

4 themes are available :

• Mushroom (default) : If you use this one, just simply uninstall Mushroom Themes as it’s now part of Home Assistant default theme.
• Mushroom Square
• Mushroom Shadow
• Mushroom Square Shadow

I did find this section (changing dashboard home page), but there are no themes visible:

[paddy0174 (Patrick)]

Sidebar > Your Username > Theme Your username is the last entry, and in your user menu it should be the seventh entry from the top, a small pull-down menu.

[BMWAddict (Jasper)]

Thanks - I saw that - but no themese listed there. Any idea’s?

I have this line added and themes folder contains a mushroom folder - with in there the mushroom themes

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

[paddy0174 (Patrick)]

I have a “/” at the end…

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes/

Anyway, you have put these two lines in configuration.yaml? And restarted HA (not only YAML-reload)?