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

[dbs179]

I’m working on a stack-in card for my AC Filters. I have it mostly sorted out, except I want to change the way the date is shown under the “Installed” sensor. I’d like it to be May 19th, 2023 rather than 2023-05-19. This is probably not specifically Mushroom Card related, but since it is a mushroom template card, nothing I found on a quick search seemed to work.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-title-card
    title: Basement AC Filter
    card_mod:
      style: |
        ha-card {
        padding: 7px 0px 0px 10px !important;
        height: 45px !important;
        box-shadow: none;
        }
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Installed
            secondary: '{{ states(''input_datetime.air_filter_date_installed_basement'') }}'
            icon: >-
              {% if is_state('sensor.basement_ac_filter_install_date_color',
              'Green') %} mdi:calendar-check {% elif
              is_state('sensor.basement_ac_filter_install_date_color', 'Yellow')
              %} mdi:calendar-check {% elif
              is_state('sensor.basement_ac_filter_install_date_color', 'Orange')
              %} mdi:calendar-alert {% elif
              is_state('sensor.basement_ac_filter_install_date_color', 'Red') %}
              mdi:calendar-alert {% else %}  mdi:help-circle {% endif %}
            entity: input_datetime.air_filter_date_installed_basement
            icon_color: >-
              {% if is_state('sensor.basement_ac_filter_install_date_color',
              'Green') %} green {% elif
              is_state('sensor.basement_ac_filter_install_date_color', 'Yellow')
              %} yellow {% elif
              is_state('sensor.basement_ac_filter_install_date_color', 
              'Orange') %} orange {% elif
              is_state('sensor.basement_ac_filter_install_date_color', 'Red') %}
              red {% else %} white {% endif %}
            layout: horizontal
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
      - type: custom:mushroom-template-card
        primary: Remaining
        secondary: '{{ states(''sensor.basement_air_filter_life_remaining'') }}'
        icon: >-
          {% if is_state('sensor.basement_ac_filter_install_date_color',
          'Green') %} mdi:calendar-check {% elif
          is_state('sensor.basement_ac_filter_install_date_color', 'Yellow') %}
          mdi:calendar-check {% elif
          is_state('sensor.basement_ac_filter_install_date_color', 'Orange') %}
          mdi:calendar-alert {% elif
          is_state('sensor.basement_ac_filter_install_date_color', 'Red') %}
          mdi:calendar-aler {% else %}  mdi:help-circle {% endif %}
        entity: sensor.basement_air_filter_life_remaining
        icon_color: >-
          {% if is_state('sensor.basement_ac_filter_install_date_color',
          'Green') %} green {% elif
          is_state('sensor.basement_ac_filter_install_date_color', 'Yellow') %}
          yellow {% elif
          is_state('sensor.basement_ac_filter_install_date_color', 'Orange') %}
          orange {% elif
          is_state('sensor.basement_ac_filter_install_date_color', 'Red') %} red
          {% else %} white {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: Door
        secondary: >-
          {% if
          is_state('binary_sensor.aqara_contact_ac_filter_door_basement','off')
          %} Closed {% elif
          is_state('binary_sensor.aqara_contact_ac_filter_door_basement',
          'on')%} Open {% else %} {{
          states('binary_sensor.aqara_contact_ac_filter_door_basement') }} {%
          endif %}
        icon: |2-
            {% if is_state('binary_sensor.aqara_contact_ac_filter_door_basement', 'off') %}
            phu:aqara-contact
            {% elif is_state('binary_sensor.aqara_contact_ac_filter_door_basement', 'on' ) %}
            mdi:bell-alert
            {% else %} 
            mdi:help-circle
            {% endif %}
        entity: automation.test_actionalble_ac_cover
        icon_color: >-
          {% if
          is_state('binary_sensor.aqara_contact_ac_filter_door_basement','off')
          %} green {% elif
          is_state('binary_sensor.aqara_contact_ac_filter_door_basement', 'on')
          %} red {% else %} orange {% endif %}

[Holdestmade]

Have a look in here, you should be able to do it with examples in there:

The EPIC Time Conversion and Manipulation Thread!

After seeing many threads on the forum asking for help with time conversions and calculations using time and realizing I generally had no real understanding of how time worked in HA I decided to dig in and try to figure it out. After over a week of internet and forum searches I think I’ve now got a lot of it figured out. I’m sure there is more that I don’t have here because sometimes “you don’t know what you don’t know”. So, since I didn’t know this stuff and because of the number of other pos…

secondary: "{{ strptime(states('input_datetime.air_filter_date_installed_basement'), '%Y-%m-%d').strftime('%b %d, %Y') }}"

[dimitri.landerloos]

Seeing CSS not loading immediately and then loading later is usually a symptom of a slow connection to your HA installation. I would try and ping your ha to see what your latency is.

I doubt its an issue of card mod not working right on mushroom cards. The modification would either not work at all or force the card to not load at all.

[pmkoch]

I missed that post apparently. Any idea what I am missing here?

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.shellyplus1_441793a43af8_switch_0
    icon: mdi:fan
    content: Fan
    hold_action:
      action: none
    tap_action:
      action: toggle
    double_tap_action:
      action: none
card_mod:
  style:
    mushroom-template-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
            {% set state = states(switch.shellyplus1_441793a43af8_switch_0) %} {% if state == 'on' %}
              animation: spin 1s linear infinite;
            {% else %}
            {% endif %}
          }

[dbs179]

@Holdestmade

secondary: “{{ strptime(states(‘input_datetime.air_filter_date_installed_basement’), ‘%Y-%m-%d’).strftime(‘%b %d, %Y’) }}”

That worked perfectly!!! Thank you!

[dimitri.landerloos]

Try like this.

You need keyframes as i dont think spin is natively supported for chips.

Change your entities back to your own and change is_state to be checking for on instead of off

card_mod:
  style:
    mushroom-template-chip$:nth-child(1): |
      ha-state-icon {
        {% if is_state('switch.office_screen_left','off') %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      } 

[GeorgeCastanza]

Thanks for the help. The response for is as follows:
{{is_state(‘person.me’, [‘home’, ‘not_home’, ‘unknown’])}} is false

{{is_state(‘person.me’, [‘Home’, ‘not_home’, ‘unknown’])}} is true

However, it does not change to green, it stays blue.

[fugley]

not sure if its any help altho to spin a fan ill use the below

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: fan.main_bathroom_fan
    icon: |
      {% set state = states(entity) %} {% if state == 'on' %}
        mdi:fan
      {% elif state == 'off' %}
        mdi:fan
      {% endif %}
    icon_color: |
      {% set state = states(entity) %} {% if state == 'on' %}
        #8BC34A
      {% elif state == 'off' %}
         #9E9E9E
      {% endif %}
    card_mod: null
    style: |
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      ha-card {
        --chip-box-shadow: 0px 0px;
        animation: rotation linear infinite;
        {% if states('fan.main_bathroom_fan') == 'on' %}
         animation-duration: 1.5s;
        {%- else -%}
        {%- endif %}
        }

[pmkoch]

This works great. Thank you so much!

[dimitri.landerloos]

Ok. And what is the responss when you do:

{{states('person.me')}}

?

[GeorgeCastanza]

@dimitri.landerloos

Ok. And what is the responss when you do:

{{states('person.me')}}

Home

Appreciate the help.

[mhoogenbosch (Martijn Hoogenbosch)]

Did you ever find the answer to this? I do not believe iOS provides such information with the default config.

[dimitri.landerloos]

Can you try and change in the card where it says

--state-person-home: var(--green-color);

And

{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}

To

--state-person-Home: var(--green-color);

And

{% if is_state(config.entity, ['Home', 'not_home', 'unknown']) %}

With capital H?

It will be case sensitive i am pretty sure.

[TommyWelle (Tommy Welle Jacobsson)]

Any way to have the temperature show next to the title, instead of under?

type: conditional
conditions:
  - entity: input_boolean.boolean_dashboard_oppe
    state: 'on'
  - entity: input_boolean.boolean_dashboard_nede
    state: 'off'
  - entity: input_boolean.boolean_dashboard_ute
    state: 'off'
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:minimalistic-area-card
          title: Trappa
          area: Trappa
          hide_unavailable: false
          tap_action:
            action: call-service
            service: script.popup_trappa
          hold_action:
            action: navigate
            navigation_path: /lovelace-panel/trappa
          entities:
            - sensor.verisure_rv_soveromsgang_fukt
            - sensor.verisure_rv_soveromsgang_temp
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: light.trappa_1
              icon: |-
                {% if is_state(config.entity, 'on') %}
                  hue:ceiling-fugato-three-alt
                {% else %}
                  hue:ceiling-fugato-three-alt
                {% endif %}
              icon_color: |-
                {% if is_state(config.entity, 'on') %}
                orange
                {% else %}
                grey
                {% endif %}
              content_info: none
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-icon-size: 0.8em                   
            - type: template
              entity: binary_sensor.aqara_motion_trappa_motion_1
              icon: |-
                {% if is_state(config.entity, 'on') %}
                  mdi:eye
                {% else %}
                  mdi:eye-off-outline
                {% endif %}
              icon_color: |-
                {% if is_state(config.entity, 'on') %}
                green
                {% else %}
                grey
                {% endif %}
              tap_action:
                action: more_info
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-icon-size: 0.8em
            - type: template
              entity: binary_sensor.aqara_motion_trappa_motion_1
              icon: |-
                {% if is_state(config.entity, 'on') %}
                  mdi:stairs
                {% else %}
                  mdi:stairs
                {% endif %}
              icon_color: |-
                {% if is_state(config.entity, 'on') %}
                green
                {% else %}
                grey
                {% endif %}
              tap_action:
                action: more_info
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-icon-size: 0.8em 
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0;
                margin-top: -10px;                     
    - type: vertical-stack
      cards:
        - type: custom:minimalistic-area-card
          title: Toalett
          area: Toalett
          hide_unavailable: false
          tap_action:
            action: call-service
            service: script.popup_toalett
          hold_action:
            action: navigate
            navigation_path: /lovelace-panel/toalett
          entities:
            - sensor.verisure_rv_soveromsgang_fukt
            - sensor.verisure_rv_soveromsgang_temp
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: light.dolys_1
              icon: |-
                {% if is_state(config.entity, 'on') %}
                  mdi:ceiling-light
                {% else %}
                  mdi:ceiling-light-outline
                {% endif %}
              icon_color: |-
                {% if is_state(config.entity, 'on') %}
                orange
                {% else %}
                grey
                {% endif %}
              content_info: none
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-icon-size: 0.8em                     
            - type: template
              entity: binary_sensor.hue_motion_do_motion
              icon: |-
                {% if is_state(config.entity, 'on') %}
                  mdi:eye
                {% else %}
                  mdi:eye-off-outline
                {% endif %}
              icon_color: |-
                {% if is_state(config.entity, 'on') %}
                green
                {% else %}
                grey
                {% endif %}
              tap_action:
                action: more_info
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-icon-size: 0.8em            

                           
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0;
                margin-top: -10px;  

[dimitri.landerloos]

Since the card you are trying to modify isnt a mushroom card i would suggest taking this question to the page of the custom card you are using.

In this case “custom:minimalistic-area-card”

[reypm]

Nope, that seems to be Android only, iOS does not provide such info as far as I know

[Numotiv (Tyler)]

Hey all, I was wondering if someone could possibly help me out. I’m trying to make a light card similar to the google home app. Entire card is a slider, has a drop down arrow etc. Reading through a bunch of examples (especially @rhysb) here I’ve bumbled most the way to what I want but need help with a couple things.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-light-card
    entity: light.main_light
    show_brightness_control: true
    tap_action:
      action: toggle
    icon_color: none
    card_mod:
      style:
        .: |
          mushroom-light-brightness-control {      
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200%;
            opacity: 0.3;
            --control-height: 102px;
            --control-border-radius: var(--ha-card-border-radius, 12px);
            --rgb-disabled: var(--rgb-card-background-color);
          }
          mushroom-state-item {
            z-index: 1;
            max-width: fit-content;
            margin-bottom: 0px;
            pointer-events: none;
          }
          mushroom-shape-icon {
            pointer-events: auto;
            {% if is_state(config.entity, 'on') %}
            --card-mod-icon: mdi:lightbulb;
            --card-mod-icon-color: rgb(115,92,0); 
            {% else %}
            --card-mod-icon: mdi:lightbulb-outline;
            --card-mod-icon-color: rgb(31,31,31);
            {% endif %}
          }
            ha-card {
              --icon-symbol-size: 0.6em;
              padding: 30px 10px !important;
              width: 200% !important;
              --card-primary-font-weight: 700;
              --card-secondary-font-weight: 700;
              --keep-background: true;
            {% if is_state(config.entity, 'on') %}
              background: rgb(255,239,201);
              --primary-text-color: rgb(115,92,0);
              --secondary-text-color: rgb(115,92,0);
            {% else %}
              background: rgb(242,246,252);
              --primary-text-color: rgb(31,31,31);
              --secondary-text-color: rgb(31,31,31);
            {% endif %}
            }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(entity, 'off') %}
            mdi:chevron-down 
          {% elif is_state(entity, 'on') %}   
            mdi:chevron-up    
          {% endif %}
        tap_action:
          action: toggle
        entity: input_boolean.living_room_toggle
        icon_color: 31,31,31
        card_mod:
          style: |
            ha-card {
               --chip-icon-size: 0.7em;
               --chip-padding: 0px 6px;
               --chip-height: 35px;
               --chip-border-radius: 100px;
             }      
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: white;
          padding: 34px 15px;
        } 

My first issue is --shape-color: none !important; doesn’t get rid of the background of the icon. I tried looking through the css in my web browser but can’t quite figure it out. Does anyone have a solution to this?

The second thing is for the light slider. Is there a way to customize the Progress and Track separately? Currently I’m using @rhysb example that uses the icon color which I don’t want. The icon will be entirely different than the progress and track.

The final problem is I can make the slider fill the entire space when its on which is technically 200% and need to be dragged all the way left and right but to start the sliding you have to click on the left half of the card first. Nothing is clickable from center until the mushroom chip that will pop up separate cards in a grid after I figure this part out. Is there a way to make the entire card act as the slider when its off? I tried --control-width but that didn’t seem to do anything.

Thanks again if anyone can point me in the right direction. This community is awesomely helpful thus far!

[Step]

I’ve tried this, not sure why it doesn’t work:

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.airco_woonkamer
        icon: |-
          {% set state=states('climate.airco_woonkamer') %}
          {% if is_state(entity, 'cool') %}
            mdi:snowflake
          {% elif state=='heat' %}
            mdi:fire
          {% else %}
            mdi:fan-off
          {% endif %}
        icon_color: |-
          {% set state=states('climate.airco_woonkamer') %}
          {% if state=='off' %}
            grey
          {% elif state=='cool' %}
            blue
          {% elif state=='heat' %}
            red
          {% else %}
            pink
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
    alignment: end
    card_mod:
      style: |
        .chip-container :nth-child(1)$: |
          ha-icon {
            {{ 'animation: spin 1s linear infinite;' if is_state('climate.airco_woonkamer', 'off') }}
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          }
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          }

I’d like it to spin the chip if it’s set to ‘cool’ or ‘heat’. First I’d figure to try it with ‘off’. I’ve read your article about setting it as a parent and child. I’m sure the error is somewhere, but fishing through the posts. I can’t seem to get my hands on the working code. Any ideas?

[dimitri.landerloos]

Try and just change ha-icon to ha-state-icon

[Step]

@dimitri.landerloos

ha-state-icon

It’s still not spinning (based on the code it should infinite spin because it’s the AC is off):

    card_mod:
      style: |
        .chip-container :nth-child(1)$: |
          ha-state-icon {
            {{ 'animation: spin 1s linear infinite;' if is_state('climate.airco_woonkamer', 'off') }}
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          }
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          }