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

[berkans (Berkan Sezer)]

Hi Rhysb

How can I add two conditions to the bottom code.

--primary-text-color:  {{ 'rgb(var(--rgb-amber))' if not is_state('input_boolean.news_chip_fenerbahce', 'off') else 'rgb(var(--rgb-white))' }};

I would like it to check the condition of fenerbahçe chip and also another chip. If any of the booleans are on I would like it to color the text.

I tried

--primary-text-color:  {{ 'rgb(var(--rgb-amber))' if not is_state('input_boolean.news_chip_fenerbahce', 'off') or  ' if not is_state('input_boolean.fenerbahce', 'off')  else 'rgb(var(--rgb-white))' }};

But it doesn’t work

[SNoof85 (Sébastien)]

• Create a new dashboard
• go to this dashboard
• click on the three dots menu on the up right
• Click on edit dashboard
• Select start from an empty dashboard
• click on take over control
• add a new card with the “add a card” button
• choose any mushroom card you want…
• Enjoy

[Stephman (Stephane)]

Thanks. Actually the mushroom cards were not displayed. Since then I’ve rebooted several times and added manually a line in the configuration.yaml and now they appears…
thanks

[image969 (James Scialdone)]

Is there a way to change the width of a chip card? I want the icon to stay the same and the height to stay the same, but I want the border going round the icon to be wider.

[theandouz]

Looks good! I noticed you changed the alarm card as well and I wanted to add my code for that as well, I added a drop-down for the keypad and I have an automation setup so that if the alarm goes off it automatically opens the keypad

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 44px
      margin: '-4px -4px -18px -4px'
    cards:
      - type: custom:mushroom-alarm-control-panel-card
        entity: alarm_control_panel.home_alarm
        states: null
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.alarm_panel_dropdown
        primary: ''
        secondary: ''
        icon: mdi:chevron-down
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon:
              $: |
                .shape ha-icon {
                  transition: transform 0.14s !important;
                  {{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
                }
              .: |
                ha-card {
                  align-items: flex-end;
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }
  - type: conditional
    conditions:
      - entity: input_boolean.alarm_panel_dropdown
        state: 'off'
    card:
      type: custom:mushroom-alarm-control-panel-card
      entity: alarm_control_panel.home_alarm
      states:
        - armed_home
        - armed_away
      primary_info: none
      secondary_info: none
      icon_type: none
      card_mod:
        style: |
          ha-card {
            background: none;
            --ha-card-box-shadow: 0px;
          }
  - type: conditional
    conditions:
      - entity: input_boolean.alarm_panel_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:mushroom-alarm-control-panel-card
          entity: alarm_control_panel.home_alarm
          primary_info: none
          secondary_info: none
          icon_type: none
          states:
            - armed_home
            - armed_away
          show_keypad: true
          card_mod:
            style: |
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px
              }
      card_mod:
        style: |
          ha-card {
            background: none;
            --ha-card-box-shadow: 0px;
          }

alias: Open Alarm Panel Dropdown if alarm
description: ""
trigger:
  - platform: state
    entity_id:
      - alarm_control_panel.home_alarm
    to: triggered
condition: []
action:
  - service: input_boolean.turn_on
    data: {}
    target:
      entity_id: input_boolean.alarm_panel_dropdown
  - service: notify.mobile_app_iphone
    data:
      message: Home Alarm Triggered
mode: single

[raglandan (Mark Thorn)]

I’m struggling to change the Font color on a Mushroom Title card based on the time of day. This works fine to change the font color to White. But I want to change it to black after sunset as my background image changes and white becomes unreadable.

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Scenes
  subtitle: ''
card_mod:
  style:
    mushroom-title-card:
      $: |
        h1 {
          --primary-text-color: rgb(var(--rgb-white));  
          --title-font-size: 30px;  
        }

I somehow need to get an if statement for sun.sun.state inserted in there somewhere but I have no idea where or how. Where do I slot this in?

{% if states.sun.sun.state == "above_horizon" %}
{% elif states.sun.sun.state == "below_horizon" %}

[Boostin4HP]

That’s awesome! Unfortunately I can’t get the dropdown to accept a code to disarm/arm. Did you have to do anything else? I’m using Alarmo.

[sashaz]

Can anyone help to customise the Lovelace-hourly-weather bar so it is styled in the mushroom look? I have used a bit of a bar code to start it but nothing I do changes it to look more like a mushroom card.
I wanted to change the fonts (size and type) plus the bar itself to match the mushroom bar.

GitHub - decompil3d/lovelace-hourly-weather: Hourly weather card for Home...

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto
      margin: '-4px -4px -12px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.openweathermap_condition
        icon: mdi:weather-cloudy
        icon_color: yellow
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:hourly-weather
        entity: weather.openweathermap
        icons: false
        label_spacing: '2'
        num_segments: '12'
        name: ' '
        card_mod:
          style: |
            ha-card {
              padding: 0px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
              --mush-rgb-red: 244, 67, 54;
              --mush-rgb-pink: 233, 30, 99;
              --mush-rgb-purple: 156, 39, 176;
              --mush-rgb-deep-purple: 103, 58, 183;
              --mush-rgb-indigo: 63, 81, 181;
              --mush-rgb-blue: 33, 150, 243;
              --mush-rgb-light-blue: 3, 169, 244;
              --mush-rgb-cyan: 0, 188, 212;
              --mush-rgb-teal: 0, 150, 136;
              --mush-rgb-green: 76, 175, 80;
              --mush-rgb-light-green: 139, 195, 74;
              --mush-rgb-lime: 205, 220, 57;
              --mush-rgb-yellow: 255, 235, 59;
              --mush-rgb-amber: 255, 193, 7;
              --mush-rgb-orange: 255, 152, 0;
              --mush-rgb-deep-orange: 255, 87, 34;
              --mush-rgb-brown: 121, 85, 72;
              --mush-rgb-grey: 158, 158, 158;
              --mush-rgb-blue-grey: 96, 125, 139;
              --mush-rgb-black: 0, 0, 0;
              --mush-rgb-white: 255, 255, 255;
            }
            hour {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            temperature {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-backgroundbar {
              opacity: 0.9;
              filter: brightness(1);
            }

[berkans (Berkan Sezer)]

So I have upgraded my football page.

On the first build I could not navigate between the team pages. Everything was automatic. Whenever a team had a match day only its related data was shown on the page. If there wasn’t any match on that day only general football news page was shown.

But now I could easily navigate between the team pages.

As you can see top located chips controls every news. With the help of those chips I can navigate between 4 teams, can see their schedule and read latest news.

Good thing about these chips is whenever I read a teams page it highlights it’s chip automatically and greys out others.

When I press a chip to follow a team, a small timer with 2 minute period activates. If I navigate to another teams page within this 2m period, then the timer reloads. When I am done, at the end of 2m period, the page automatically goes back to the team page who has a match schedule on that day. If there isn’t any game, the page displays general football news.

Everything is done automatically. The pictures on the pages are dynamic and are taken from the the related teams last released rss feed so it changes constantly.

I was also going to display match scores on this page automatically but unfortunately Google calendar does not update subscribed calendars instantly. Instead it sometimes takes more than 48 hours. But I have the data containing match scores, line ups and etc… maybe I may think of something in the future.

So as for this page, I have used 10 input booleans and 6 automations plus a single page with 1663 lines of code. The page was built with conditional cards. Automations brought a dynamic structure. Everything is tied to each other and works in harmony.

Now I am also going to built separate pages containing tech and general news. I can even filter news to my personal interest. As an example I can create a filter that searches Cnet for news regarding iPhone.

[berkans (Berkan Sezer)]

So I have also been working on my devices page lately. It took me more then a week to complete it. I have added all my devices into this single page even the climates or water heaters.

I have 8 zones at my home. All of them has smart devices. Some has more like my livingroom having more then 15 bulbs. With the help of automations and third party integrations I was able to create one single page to control all of them.

So old crappy page looked like this.

The rooms are located on the top. With the help of custom swipe card I can scroll to the right to see the additional rooms. The chips I used there counts the total opened devices in numbers. This also includes devices like termostats or air conditions or even my monitor. At the begining the page opens with all current devices. I can display every turned on or turned off devices in my house from this page. But whenever I want to go to room basis I only double click the room chip on the top and then the page only displays the devices specific to the room I clicked on.

As you can see above, the only displayed devices are the ones located in my office. A time is also activated with the double press of the office chip. After a minute the page turns back to displaying all house devices.

As you can see the mushroom light card is also used in this single page and it is controllable. The sun icon controls the light cards. When pressed it disables the light control.

The circle next to “Open Lights” menu is also functional and controls offline devices. If I don’t want to see turned off devices I simply press this button.

When I also double click any devices, if it is a light type, a new window with color wheel control will open and will let me to control the light individually.

The chip row also lets me to control color wheels for 4 rooms and navigation between them is possible.

I can even see if my air condition is turned on or not.

Or maybe my water heater.

As you can see. The water heater icon not only shows if the device is online or not but also shows that it is currently boiling water with a red picture. Normally it turns out white.

So in summary every single aspect of my household can easily be controlled from this one single page.

To build this page it took lots of codes, automations and creation of so many booleans.

[theandouz]

Try this updated code, I think because the keypad card wasn’t technically attached to the state buttons it wasn’t able to accept the code to disarm.

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 44px
      margin: '-4px -4px -18px -4px'
    cards:
      - type: custom:mushroom-alarm-control-panel-card
        entity: alarm_control_panel.home_alarm
        states: null
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.alarm_panel_dropdown
        primary: ''
        secondary: ''
        icon: mdi:chevron-down
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon:
              $: |
                .shape ha-icon {
                  transition: transform 0.14s !important;
                  {{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
                }
              .: |
                ha-card {
                  align-items: flex-end;
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }
  - type: conditional
    conditions:
      - entity: input_boolean.alarm_panel_dropdown
        state: 'off'
    card:
      type: custom:mushroom-alarm-control-panel-card
      entity: alarm_control_panel.home_alarm
      states:
        - armed_home
        - armed_away
      primary_info: none
      secondary_info: none
      icon_type: none
      card_mod:
        style: |
          ha-card {
            background: none;
            --ha-card-box-shadow: 0px;
          }
  - type: conditional
    conditions:
      - entity: input_boolean.alarm_panel_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:mushroom-alarm-control-panel-card
          entity: alarm_control_panel.home_alarm
          primary_info: none
          secondary_info: none
          icon_type: none
          states:
            - armed_home
            - armed_away
          show_keypad: true
          card_mod:
            style: |
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px
              }
      card_mod:
        style: |
          ha-card {
            background: none;
            --ha-card-box-shadow: 0px;
          }

[snairolf (Rolf S)]

This looks great. How did you add the battery icon. Could you share the code for that please? Sorry if I missed it.

[atomicpapa (Glenn Morrison)]

ABSOLUTELY BRILLIANT!!!

Would you mind sharing where you get your RSS feeds? I’ve been digging around tonight to find some for the teams we support and there seem to be more options than I can count and it is all very confusing as to what can do what. I assume you are using the custom feedparser and list cards. If not, please correct me. Anything you can share on how you created this would be greatly appreciated!

Thanks!

[image969 (James Scialdone)]

Am I the only person in the community thats having this problem? I still can’t get a reply

[filikun]

Does anyone know if I can get icon and text aligned left in a vertical layout of the template card like these on iOS?

[theandouz]

You can add the battery icon using the first template card, just need to add this small section

    badge_icon: |+
      {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
      {% if battery_level == 100 %}
        mdi:battery
      {% elif battery_level > 0 %}
        mdi:battery-{{ battery_level }}
      {% else %}
        mdi:battery-alert-variant-outline
      {% endif %}
    badge_color: |-
      {% set battery_level = states(entity) | int %}
      {% if battery_level > 90 %} 
        green
      {% elif battery_level > 60 %}
        light-green
      {% elif battery_level > 50 %}
        lime
      {% elif battery_level > 40 %}
        yellow
      {% elif battery_level > 30 %}
        amber
      {% elif battery_level > 20 %}
        orange
      {% elif battery_level > 10 %}
        deep-orange
      {% else %}
        red
      {% endif %} 
    tap_action:
      action: more-info
    entity: sensor.front_door_battery

Full card code w/ battery icon

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >-
      {% if is_state('lock.front_door','unlocked') and
      is_state('binary_sensor.front_door_alarm_sensor','on') %}
        Open and Unlocked
      {% elif is_state('binary_sensor.front_door_alarm_sensor','on') %}
        Door Open
      {% elif is_state('lock.front_door','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.front_door','unlocked') and
      is_state('binary_sensor.front_door_alarm_sensor','on') %}
        mdi:door-open
      {% elif is_state('binary_sensor.front_door_alarm_sensor','on') %}
        mdi:door-open
      {% elif is_state('lock.front_door','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    layout: vertical
    icon_color: >-
      {% if is_state('lock.front_door','locked') and
      is_state('binary_sensor.front_door_alarm_sensor','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: |+
      {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
      {% if battery_level == 100 %}
        mdi:battery
      {% elif battery_level > 0 %}
        mdi:battery-{{ battery_level }}
      {% else %}
        mdi:battery-alert-variant-outline
      {% endif %}
    badge_color: |-
      {% set battery_level = states(entity) | int %}
      {% if battery_level > 90 %} 
        green
      {% elif battery_level > 60 %}
        light-green
      {% elif battery_level > 50 %}
        lime
      {% elif battery_level > 40 %}
        yellow
      {% elif battery_level > 30 %}
        amber
      {% elif battery_level > 20 %}
        orange
      {% elif battery_level > 10 %}
        deep-orange
      {% else %}
        red
      {% endif %} 
    tap_action:
      action: more-info
    entity: sensor.front_door_battery
  - type: custom:mushroom-lock-card
    entity: lock.front_door
    name: Laundry Room Door
    primary_info: none
    secondary_info: none
    icon_type: none
    layout: vertical
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.front_door','locked') and
      is_state('binary_sensor.front_door_alarm_sensor','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

[berkans (Berkan Sezer)]

Thank you very much. Yes I am using feedparser and list cards. Depending on the source of rss xml feeds they are quite reliable for displaying rss.

Everything I have done in creating this page, including the codes and the wiki is explained here. You can find step by step installation process.

Home Assistant Custom Football Page · berkansezer77/home-assistant Wiki

[atomicpapa (Glenn Morrison)]

Thank you! I think I just found what I will spend my day working on.

[Boostin4HP]

Yup that fixed it, thank you!

[Boostin4HP]

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >-
      {% if is_state('lock.door_lock_2','unlocked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        Open and Unlocked
      {% elif
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        Door Open
      {% elif is_state('lock.door_lock_2','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.door_lock_2','unlocked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif is_state('lock.door_lock_2','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.door_lock_2','locked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off')
      %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: >-
      {% set battery_level = (states('sensor.front_door_sensor_battery_level') |
      int / 10) | round(0) | int * 10 %} {% if battery_level == 100 %}
      mdi:battery {% elif battery_level > 0 %} mdi:battery-{{ battery_level }}
      {% else %} mdi:battery-alert-variant-outline {% endif %}
    badge_color: >-
      {% set battery_level = states('sensor.front_door_sensor_battery_level') |
      int %}

      {% if battery_level > 90 %} green

      {% elif battery_level > 60 %} light-green

      {% elif battery_level > 50 %} lime

      {% elif battery_level > 40 %} yellow

      {% elif battery_level > 30 %} amber

      {% elif battery_level > 20 %} orange

      {% elif battery_level > 10 %} deep-orange

      {% else %} red

      {% endif %}
    tap_action:
      action: none
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:lock-smart
        icon_color: disabled
        badge_icon: |-
          {% set battery_level = (states('sensor.door_lock_battery_level_2') |
          int / 10) | round(0) | int * 10 %}
          {% if battery_level == 100 %} mdi:battery
          {% elif battery_level > 0 %} mdi:battery-{{ battery_level }}
          {% else %} mdi:battery-alert-variant-outline
          {% endif %}
        badge_color: >-
          {% set battery_level = states('sensor.door_lock_battery_level_2') |
          int %}

          {% if battery_level > 90 %} green

          {% elif battery_level > 60 %} light-green

          {% elif battery_level > 50 %} lime

          {% elif battery_level > 40 %} yellow

          {% elif battery_level > 30 %} amber

          {% elif battery_level > 20 %} orange

          {% elif battery_level > 10 %} deep-orange

          {% else %} red

          {% endif %}
        tap_action:
          action: navigate
          navigation_path: keypad-front_door
        card_mod:
          style: |
            ha-card {
              --icon-border-radius: 12px;
            }
      - type: custom:mushroom-lock-card
        entity: lock.door_lock_2
        name: Front Door
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            ha-card {
              margin-top: -12px;
              margin-left: -52px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.door_lock_2','locked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }