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

rhysb · September 5, 2022, 5:34am

Mushrrom cards have the text below the icon, but you could try something like this:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-light-card
    entity: light.lounge_light
    layout: vertical
    secondary_info: none
    name: Lounge
  - type: custom:mushroom-light-card
    entity: light.lounge_cabinet_light
    use_light_color: true
    layout: vertical
    secondary_info: none
    name: Cabinet
  - type: custom:mushroom-light-card
    entity: light.dining_room_light
    layout: vertical
    secondary_info: none
    name: Dining
  - type: custom:mushroom-light-card
    entity: light.kitchen_light
    name: Kitchen
    layout: vertical
    secondary_info: none
  - type: custom:mushroom-light-card
    entity: light.kitchen_bench_light
    secondary_info: none
    layout: vertical
    name: Bench

Vandana · September 5, 2022, 5:44am

thank you… I am using like this also. But I need to decrease the spacing between the cards. eg the Lounge, Cabinet, Dining, Kitchen, Bench entities and also decrease the height. Is that possible ???

Kindly guide

Dirkdejong81 · September 5, 2022, 5:48am

WOW, great, thanks a lot, i was also wondering, how or where i can find this information? trought the browser inspector?

mushroom-state-info$: |
.secondary:before {
content: "({{ s

And specialy the : mushroom-state-info$: |, .secondary:after {

What i did created yesterday is: (but this is the vertical-stack-in-card and the 2x mushroom-card)

rhysb · September 5, 2022, 6:39am

The spacing will decrease as the width decreases. You can fix overall width and height like this:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-light-card
    entity: light.lounge_light
    layout: vertical
    secondary_info: none
    name: Lounge
    card_mod:
      style: |
        ha-card {
          padding: 12px 0px !important;
        }    
  - type: custom:mushroom-light-card
    entity: light.lounge_cabinet_light
    use_light_color: true
    layout: vertical
    secondary_info: none
    name: Cabinet
    card_mod:
      style: |
        ha-card {
          padding: 12px 0px !important;
        }    
  - type: custom:mushroom-light-card
    entity: light.dining_room_light
    layout: vertical
    secondary_info: none
    name: Dining
    card_mod:
      style: |
        ha-card {
          padding: 12px 0px !important;
        }    
  - type: custom:mushroom-light-card
    entity: light.kitchen_light
    name: Kitchen
    layout: vertical
    secondary_info: none
    card_mod:
      style: |
        ha-card {
          padding: 12px 0px !important;
        }    
  - type: custom:mushroom-light-card
    entity: light.kitchen_bench_light
    secondary_info: none
    layout: vertical
    name: Bench
    card_mod:
      style: |
        ha-card {
          padding: 12px 0px !important;
        }    
card_mod:
  style: |
    ha-card {
      width: 300px;
      height: 96px;
    }

Vandana · September 5, 2022, 6:47am

thank you… This is what I wanted…

Marc_de · September 5, 2022, 8:28am

Hello,

I would like to combine the idee of the colored light card and the dropdown feature.
Unfortunately I don’t understand how to handle the color of the dropdown part.

Any ideas for me?

type: conditional
conditions:
  - entity: light.shelly_child_deckenspots
    state: 'on'
card:
  type: custom:stack-in-card
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        grid-template-columns: auto 42px
        margin: '-4px -4px -8px -4px;'
      cards:
        - type: custom:mushroom-light-card
          entity: light.child_deckenspots
          name: Deckenspots
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: false
          show_color_control: true
          collapsible_controls: true
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                {% set r = state_attr('light.child_deckenspots', 'rgb_color')[0] %}
                {% set g = state_attr('light.child_deckenspots', 'rgb_color')[1] %}
                {% set b = state_attr('light.child_deckenspots', 'rgb_color')[2] %}
                background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
                --ha-card-box-shadow: 0px;           
                }
        - type: custom:mushroom-template-card
          entity: input_boolean.dropdown_child_deckenspots
          primary: ''
          secondary: ''
          icon: >-
            {{ 'mdi:chevron-up' if is_state(entity, 'on') else
            'mdi:chevron-down' }}
          icon_color: disabled
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                {% set r = state_attr('light.child_deckenspots', 'rgb_color')[0] %}
                {% set g = state_attr('light.child_deckenspots', 'rgb_color')[1] %}
                {% set b = state_attr('light.child_deckenspots', 'rgb_color')[2] %}
                background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
                align-items: flex-end;
                --ha-card-box-shadow: 0px;
              }
              mushroom-shape-icon {
                --shape-color: none !important;
              }  
    - type: conditional
      conditions:
        - entity: input_boolean.dropdown_child_deckenspots
          state: 'on'
      card:
        type: custom:stack-in-card
        cards:
          - type: custom:mushroom-light-card
            entity: light.child_decke_1
            name: Spot 1
          - type: custom:mushroom-light-card
            entity: light.child_decke_2
            name: Spot 2
          - type: custom:mushroom-light-card
            entity: light.child_decke_3
            name: Spot 3
          - type: custom:mushroom-light-card
            entity: light.child_decke_4
            name: Spot 4
          - type: custom:mushroom-light-card
            entity: light.child_decke_5
            name: Spot 5
          - type: custom:mushroom-light-card
            entity: light.child_decke_6
            name: Spot 6

rhysb · September 5, 2022, 10:04am

Background needs to be applied to the top stack-in-card like this:

type: conditional
conditions:
  - entity: light.shelly_child_deckenspots
    state: 'on'
card:
  type: custom:stack-in-card
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        grid-template-columns: auto 42px
        margin: '-4px -4px -8px -4px;'
      cards:
        - type: custom:mushroom-light-card
          entity: light.child_deckenspots
          name: Deckenspots
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: false
          show_color_control: true
          collapsible_controls: true
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px;
              }
        - type: custom:mushroom-template-card
          entity: input_boolean.dropdown_child_deckenspots
          primary: ''
          secondary: ''
          icon: >-
            {{ 'mdi:chevron-up' if is_state(entity, 'on') else
            'mdi:chevron-down' }}
          icon_color: disabled
          hold_action:
            action: none
          card_mod:
            style: |
              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.dropdown_child_deckenspots
          state: 'on'
      card:
        type: custom:stack-in-card
        cards:
          - type: custom:mushroom-light-card
            entity: light.child_decke_1
            name: Spot 1
          - type: custom:mushroom-light-card
            entity: light.child_decke_2
            name: Spot 2
          - type: custom:mushroom-light-card
            entity: light.child_decke_3
            name: Spot 3
          - type: custom:mushroom-light-card
            entity: light.child_decke_4
            name: Spot 4
          - type: custom:mushroom-light-card
            entity: light.child_decke_5
            name: Spot 5
          - type: custom:mushroom-light-card
            entity: light.child_decke_6
            name: Spot 6
  card_mod:
    style: |
      ha-card {
        {% set r = state_attr('light.child_deckenspots', 'rgb_color')[0] %}
        {% set g = state_attr('light.child_deckenspots', 'rgb_color')[1] %}
        {% set b = state_attr('light.child_deckenspots', 'rgb_color')[2] %}
        background: rgba( {{r}}, {{g}}, {{b}}, 0.1 ); 
      }

Yoinkz · September 5, 2022, 11:51am

Thanks much appreciated.
Would it be possible to share the two pictures of the lamp you have within the color wheel card?

image969 · September 5, 2022, 12:51pm

If I’m using a mushroom template card, and I want the icon to change color when I turn it on like normal, can this be achieved if the button is calling a service .

Another words it’s a simple toggle on and off but but it’s by calling a script, because It’s an RF remote integrated with BroadLink

EDIT - I figured it out. Couldn’t find it anywhere so in case anyone tries to do this in there isn’t an easier way that I missing.

I used input number helper with a range from 1 to 2, And then only made one card visible at a time with a conditional card being set to either 1 or 2 value.

Then the action button was a simple call service to increment the step on one card and derement the step on the other card.

macfly92 · September 5, 2022, 1:48pm

Thanks you very much !

pbohannon · September 5, 2022, 3:08pm

Hi there.

If you have a second, could you give me a nudge as to how to accomplish something similar but: with either all chips in a chips card or individual chips, “permanently” leaving the box-shadow red?

The use case is a card I’m working on that greys out motion sensor chips unless there’s motion and then various aspects of the chip changes (icon color, text color, etc.). I’d like a red border around the chip as well, but can’t seem to find the right place to style this. I can handle the sensor on/off condition stuff, I just can’t figure out the CSS…

Will save some room by not pasting the CSS attempts that didn’t work, but I was thinking it’d be as simple as using box-shadow: 0 0 20px red or something similar without the animation clause from previous examples and without the active clause in this example… but… where?

Looks like the hierarchy for an individual chip in this card is: mushroom chips card->shadow root->ha card->mushroom template chip->shadow root->mushroom chip->shadow root->ha-card->shadow root. I think I’ve tried most of the permutations as to where to put the red box-shadow but am obviously missing something

To further illustrate, I was able to make the border for the entirety of the card change as per this pic, but I’d like to be able to do it for individual chips (or apply the same conditional logic to all). e.g. “Kitchen Motion” could have the red border around it.

tempus2016 · September 5, 2022, 3:22pm

Anyone using the swipe card, how have you gotten around the horrible styling issue? Seems the border around the entities I want to swipe are showing up weird. The top 2 buttons are inset and not like the 3D Printer dropdown. @rhysb any idea?

pbohannon · September 5, 2022, 3:39pm

NVM, sorted Now to try and make if binary_sensor check affect the box-shadow for every single chip… for about 25 chips

style: |
        ha-card {
          --chip-box-shadow: 0px 0px 20px red;
          --text-color: {{ "#999999" if is_state('binary_sensor.kitchen_motion_sensor_1', 'off') }};
        }

nullae · September 5, 2022, 5:34pm

Thank you all for the wonderful card_mod examples.

I’ve scoured this thread to understand, but I’m failing to find a way to combine two card_mod style things, state based icons along with a state based animation.

mushroom-shape-icon { contents no longer function if
mushroom-shape-icon$: | onward is used. I assume it’s overriding the former, but I lack the knowledge to merge them.

      - type: custom:mushroom-climate-card
        entity: climate.master_bedroom
        name: Heater
        icon: mdi:heat-wave
        hvac_modes:
          - heat
        primary_info: none
        secondary_info: last-changed
        show_temperature_control: true
        layout: horizontal
        double_tap_action:
          action: more-info
        card_mod:
          style:
            .: |
              mushroom-badge-icon {
                {% if state_attr(config.entity, 'hvac_action') == 'idle' %}
                  --icon-color: grey;
                  --card-mod-icon: mdi:pause;
                {% endif %}
              }
              mushroom-shape-icon {
                {% set preset = state_attr(config.entity, 'preset_mode') %}
                --card-mod-icon: 
                {% if preset == 'none' %}
                  mdi:heat-wave
                {% elif preset == 'comfort' %}
                  mdi:fireplace
                {% elif preset == 'sleep' %}
                  hue:scene-nightlight
                {% else %}
                  mdi:heat-wave
                {% endif %};
              }
            mushroom-state-info$: |
              .primary:before {
                content: 
                {% if state_attr(config.entity, "hvac_action") == 'idle' %}
                  "Idling"
                {% else %}
                  "{{ state_attr(config.entity, "hvac_action") }}"
                {% endif %};
              }
              .primary:after {
                content: 
                {% if states('switch.fireshrine_timer') == 'on' %}
                  "⏲"
                {% endif %};
              }
              .primary::first-letter {
                text-transform: uppercase;
              }
            mushroom-shape-icon$: |
              .shape {
                {% if state_attr(config.entity, 'hvac_action') == 'heating' %}
                --shape-animation: ping 3s infinite;
                {% endif %}
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
                }
                
                70% {
                  box-shadow: 0 0 0 6px transparent;
                }
                
                100% {
                  box-shadow: 0 0 0 0 transparent;
                }
              }

The other thing I’ve noticed is that the icon state change doesn’t occur until reloading my pop-up for this card, however the animation and displayed text is able to update with state change just fine.

Tim_Knowlden · September 5, 2022, 6:19pm

@Airyphyla code, also @rhysb asked for it too requires a date time helper creating for each reminder

Lovelace Card:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: '{{ user }}, Here are you reminders!'
    subtitle: ''
  - type: custom:decluttering-card
    template: rec_event
    variables:
      - entity: input_datetime.kitchen_sink_water_filter
      - name: Kitchen Sink Water Filter
      - icon: water-opacity
      - interval: 182
      - interval_text: (due every 6 Months)
  - type: custom:decluttering-card
    template: rec_event
    variables:
      - entity: input_datetime.tim_toothbrush_head_replace
      - name: Tim Toothbrush head replacement
      - icon: toothbrush
      - interval: 93
      - interval_text: (due every 3 Months)

Decluttering Card template:

decluttering_templates:
  rec_event:
    default:
      - icon: calendar-clock
      - next_text: Next due in
      - overdue_text: Overdue by
      - almost_due_offset: 1
      - unit_sec: 86400
      - interval_text: ''
      - service: script.script_set_timedate
      - comments: Resets the timer of last event to now
    card:
      type: custom:mushroom-template-card
      entity: '[[entity]]'
      icon: mdi:[[icon]]
      icon_color: >-
        {%- set ts_period = [[interval]]*[[almost_due_offset]]*[[unit_sec]] %}

        {%- set ts_event = as_timestamp(states.[[entity]].state) %}

        {%- set ts_now = as_timestamp(now())|round(0) %}

        {%- set ts_delta = (ts_now - ts_event) %}

        {% if (ts_period != 0) and (ts_delta > ts_period) %}red {% elif
        (ts_period-ts_delta) < [[almost_due_offset]]*[[unit_sec]] %}orange {%
        endif %}
      primary: '[[name]]'
      layout: horizontal
      tap_action:
        action: call-service
        service: '[[service]]'
        service_data:
          entity: '[[entity]]'
          timedate: 0
        confirmation:
          text: Reset the timer of last event to now?
      secondary: >-
        {%- set ts_period = [[interval]]*[[unit_sec]] %} {%- set ts_event =
        as_timestamp(states.[[entity]].state) %} {%- set ts_now =
        as_timestamp(now())|round(0) %} {%- set ts_delta = (ts_now - ts_event)
        %} {%- set ts_xdiff = (ts_period - ts_delta)|abs %} {% if ts_delta <
        ts_period %}[[next_text]] {% else %}[[overdue_text]] {% endif %}{% if
        ts_xdiff >= 604800 %}{{ (ts_xdiff // 604800) | int }}w, {{ (ts_xdiff %
        604800 // 86400) | int }}d {% elif ts_xdiff >= 86400 %}{{ (ts_xdiff %
        604800 // 86400) | int }}d {% elif ts_xdiff >= 3600 %}{{ (ts_xdiff %
        86400 // 3600) | int }}h {% elif ts_xdiff >= 600 %}{{ (ts_xdiff % 3600
        // 60) | int }}m {% elif ts_xdiff >= 60 %}{{ (ts_xdiff % 3600 // 60) |
        int }}m, {{ (ts_xdiff % 60) | int }}s {% else %}{{ (ts_xdiff % 60) | int
        }}s {% endif %} [[interval_text]].
      style: |-
        {%- set ts_period = [[interval]]*86400 %}
        {%- set ts_event = as_timestamp(states.[[entity]].state) %}
        {%- set ts_now = as_timestamp(now())|round(0) %}
        {%- set ts_delta = (ts_now - ts_event) %}
        ha-card {
          border: solid 2px {% if (ts_period != 0) and (ts_delta > ts_period) %}red {% elif (ts_period-ts_delta) < [[almost_due_offset]]*[[unit_sec]] %}orange {% elif (ts_period == 0) or (ts_delta < ts_period) %}var(--card-background-color) {% else %}red {% endif %};
        }

Script to reset to zero:

alias: Set Timedate
sequence:
  - service: input_datetime.set_datetime
    data:
      timestamp: >-
        {{ now().timestamp() + (timedate | default(0)) * (unit | default(86400))
        }}
      entity_id: "{{ entity }}"
mode: single

Tim_Knowlden · September 5, 2022, 6:21pm

@rhysb

In reality it would be lovely to be able to have a countdown bar for how many days until next due date. Plus be able to see last date it was carried out.

anon33484932 · September 5, 2022, 6:48pm

Hi, is it possible to insert one or more icons in the template card? In the content I would like to write some text-icon-text-icon-text, is it possible?

image969 · September 5, 2022, 7:13pm

Is there a way to hide this ugly padlock with card-mod? I’m using the Lovelock card or whatever

it’s called.

Freedom_1976 · September 5, 2022, 10:55pm

Thank you so much, that a great job. I understand my mistake about the speed and also discover the preset…

fastender · September 5, 2022, 11:17pm

But the crowning glory would be an animation with SVG. It’s a pity that nothing is being developed in this direction.