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

[GTunney]

Thanks, sure here is the code for a room tile.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Hallway
    secondary: >-
      {{ states('sensor.sonoff_a44001d0c1_temperature') | round (1) }}°C - {{
      states('sensor.sonoff_a44001d0c1_humidity') | round (0) }}%
    icon: none
    entity: light.hallway_lamp
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /home-v2/hallway
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 400;
            --primary-text-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 170px;
            inline-size: 180px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
            --secondary-text-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -4px;
          } 
        .: |
          :host {
          {% if is_state('light.hallway_lamp', 'on') %}
            background: url('/local/images/areas/hallway.PNG') center;
            background-size: cover;
            background-blend-mode: overlay;
            #filter: grayscale(70%);
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% else %}
            background: url('/local/images/areas/hallwayoff.jpeg') center;
            background-size: cover;
            background-blend-mode: overlay;
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% endif %}
             --mush-icon-size: 0px;
            height: 220px;
            margin-left: -15px !important;
            margin-top: -70px !important;
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.front_door
            state: 'on'
        chip:
          type: template
          entity: binary_sensor.front_door
          icon_color: red
          icon: mdi:door-open
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: lock.front_door
            state: unlocked
        chip:
          type: template
          entity: lock.front_door
          icon_color: red
          icon: mdi:lock-open-variant
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: template
        entity: light.hallway_lamp
        icon: >-
          {{ 'mdi:lightbulb' if is_state('light.hallway_lamp', 'on') else
          'mdi:lightbulb-outline' }}
        icon_color: '{{ ''orange'' if is_state(''light.hallway_lamp'', ''on'') else ''grey'' }}'
        content: >-
          {{ expand(states.light.hallway_lamp) | selectattr( 'state', 'eq',
          'on') | list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: hallway
        hold_action:
          action: more-info
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -15px;
          margin-top: -4px;
        } 
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      {% if is_state('light.hallway_lamp', 'on') %}
          #box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
          #border-radius: 10px;
          #background: rgba(245, 173, 66, 0.3);      {% endif %}
    }

[ketoha]

Hello,

I am experiencing an issue with styling the mushroom-chips-card using card-mod. I’m trying to achieve two things:

1. Set a background style for the entire card.
2. Apply an animation to a specific state icon.

Here’s the working animation code I have:

card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        {{ 'animation: eureka 1.8s infinite;' if is_state('switch.0x540f57fffed36109_l2', 'on') }}
      }

When I try to incorporate the background styling:

card_mod:
  style: |
    .chip-container {
      background-color: #1c1c1c;
      border-radius: 10px;
      padding-top: 10px;
      padding-left: 10px;
    }
    mushroom-template-chip:nth-child(3) ha-state-icon {
      {{ 'animation: eureka 1.8s infinite;' if is_state('switch.0x540f57fffed36109_l2', 'on') else '' }}
    }

The issue arises where the card background styling works, but the animation does not.

If I bypass card-mod and directly use:

- type: custom:mushroom-chips-card
  style: |
    .chip-container {
      background-color: #1c1c1c;
      border-radius: 10px;
      padding-top: 10px;
      padding-left: 10px;
    }

The background styling works perfectly, but I need the animations provided by card-mod.

Any guidance or solutions would be greatly appreciated!

[dimitri.landerloos]

What does this code do when you put it in the template editor:

[dimitri.landerloos]

This should work, but i didnt see your keyframes anywhere, so just put them where i have put the placeholder.

card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        {{ 'animation: eureka 1.8s infinite;' if is_state('switch.office_screens', 'on') else '' }}
      }
      @keyframes eureka {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    .: |
      .chip-container {
        background-color: #1c1c1c;
        border-radius: 10px;
        padding-top: 10px;
        padding-left: 10px;
      }

[Greg.o (Greg)]

Hi,

However, Temp_Hum_1 is in a room : “Chambre Parentale” :

[jalejandro0211 (Alejandro Arias)]

Hi, please can you share the code for this card?

[dimitri.landerloos]

You would need to actually type in the full entity id which is what i am trying to get you to realise when putting it in the template editor.

if it doesnt work in the template editor it wont work in a card. best to always check there first.

but essentially i assume that your Temp_Hum_1 is a regular sensor. so the ID is probably sensor.temp_hum_1, but i would double check what the id actually is.

[Greg.o (Greg)]

Thx a lot for your help.

I now have an area_name :

But, it doesn’t work for the title of a card :

[dimitri.landerloos]

look at your secondary in the template card you have:

secondary: '{{states.sensor.temp_hum_1_temperature}}'

see what you are missing in your title?

''

around your template.
when you then do that you also need to do:

title: '{{area_name(''sensor.temp_hum_1_temperature'')}}'

as otherwise the internal quotes are just single quotes with outside single quotes (which doesnt work).
can also do this instead:

title: "{{area_name('sensor.temp_hum_1_temperature')}}"

or even this:

title: |- 
  {{area_name('sensor.temp_hum_1_temperature')}}

[Greg.o (Greg)]

Thank you a lot for your patience and your explanations !! Off course, it works now !!

Here is the correct code :

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: '{{ area_name(''sensor.temp_hum_1_temperature'') }}'
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Température
        icon: mdi:home-thermometer-outline
        secondary: '{{ states.sensor.temp_hum_1_temperature.state_with_unit }}'
      - type: custom:mushroom-template-card
        primary: Humidité
        icon: mdi:home-thermometer-outline
        secondary: '{{ states.sensor.temp_hum_1_humidity.state_with_unit }}'

[Montreal666]

Edit: got it. But feel free to educate me on how

  .: |

behaves.

Thx!

        - type: custom:mushroom-select-card
          entity: input_select.ir_command_ac2_temp
          name: test
          secondary_info: last-updated
          icon_type: none
          card_mod:
            style:  
              mushroom-select-option-control$:
                  mushroom-select$: |
                    .mdc-select__anchor{
                      background: blue !important
                    }
                    .mdc-select__selected-text {
                     color: white !important;
              mushroom-state-info$: |
                .container {
                  --primary-text-color: green;
                  --secondary-text-color: orange;
                  }
              .: |
                ha-card {
                 background-color: red;
                 } 

Newbie assistance needed…
Trying to combine multiple styling components but am obviously wrong with the syntax
(no errors returned but only the first styling component works; background-color).
They work individually though.
I’ve checked the guide but couldn’t figure it out.
what am I missing?
Thank you!

        - type: custom:mushroom-select-card
          entity: input_select.ir_command_ac2_temp
          secondary_info: none
          icon_type: none
          card_mod:
            style: |
              ha-card {
               background-color: red;
               }    
              mushroom-select-option-control$:
                mushroom-select$: |
                  .mdc-select__anchor{
                    background: blue !important
                  }
              mushroom-state-info$: |
                .container {
                  --primary-text-color: white;
                  --secondary-text-color: orange;
                  }

[weado]

Maybe I don’t read something, but my mushroom animation doesn’t work . I just copy/paste your code, install card-mod plugin via HACS but it’s doesn’t work… for example with the basic fan animation :

[dimitri.landerloos]

Look at my post with updated animations. How animations are applied changed months ago.

Mushroom Cards - Build a beautiful dashboard easily

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

[dimitri.landerloos]

This explains how these symbols work

Mushroom Cards - Build a beautiful dashboard easily

Here is an explanation of how these symbols work. $ is used when we want to access the shadow-root of an object. like this here: [image] the .shape is within the shadow-root of mushroom-shape-icon so to access it and modify it, we would write this: [image] card_mod: style: mushroom-shape-icon$: | .shape { background: red !important; } you cant just write this, as this wont access the element through the shadow root. [image] card_mod: style: | .shape { …

[LRDC]

Does anybody know how to minimize the delay between clicking the up or down arrow on a mushroom number card and the actual update of the input number value ? I’ve already tried to lower the values of ‘mush-slider-treshold’ and ‘mush-input-number-debounce’ with card-mod and in my theme but the delay of approximately 2 seconds won’t change.

[Montreal666]

I’m trying to use custom:mushroom-select-card as an overlay to a custom:button-card.
Essentially, I just want the select-option part to be visible once the card is clicked, the rest should be transparent.
I’m pretty close to the result (see code below) but two issues remain:

1- can the “bottom bar” be hidden / made transparent?

2- is it possible to custom size the clickable zone so it covers the full card (see gray zone when cursor hovers the card)? I’ve tried changing the font size hoping it would expand the zone but it doesn’t.

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 25% 25% 25% 25%
  grid-template-areas: |
    "A1 A2 A3 A4"
cards:
  - type: horizontal-stack
    view_layout:
      grid-area: A1
    cards:
      - type: custom:button-card
        name: ' '
        entity: input_select.ir_command_ac2_mode
        show_state: true
        show_entity_picture: true
        entity_picture: \local\!MYDATA\WEATHER\temperature2.png
        styles:
          card:
            - font-size: 2rem
            - font-weight: bold
          icon:
            - height: 4rem
            - width: 4rem
  - type: horizontal-stack
    view_layout:
      grid-area: A1
    cards:
      - type: custom:mushroom-select-card
        entity: input_select.ir_command_ac2_mode
        secondary_info: none
        icon_type: none
        fill_container: true
        card_mod:
          style:
            mushroom-select-option-control$:
              mushroom-select$: |
                .mdc-select__anchor{
                  background: none !important
                  }
                .mdc-select__selected-text {
                  color: transparent !important;
                  }
                .mdc-select__dropdown-icon {
                  fill: transparent !important;  
                }
            .: |
              ha-card {
               background: none;
               }    

[dimitri.landerloos]

I dont normally just figure out the answer for people, but i liked the use case so here you go!

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 25% 25% 25% 25%
  grid-template-areas: |
    "A1 A2 A3 A4"
cards:
  - type: horizontal-stack
    view_layout:
      grid-area: A1
    cards:
      - type: custom:button-card
        name: ' '
        entity: input_select.bedroom_fan_direction
        show_state: true
        show_entity_picture: true
        entity_picture: \local\!MYDATA\WEATHER\temperature2.png
        styles:
          card:
            - font-size: 2rem
            - font-weight: bold
          icon:
            - height: 4rem
            - width: 4rem
  - type: horizontal-stack
    view_layout:
      grid-area: A1
    cards:
      - type: custom:mushroom-select-card
        entity: input_select.bedroom_fan_direction
        secondary_info: none
        icon_type: none
        fill_container: true
        card_mod:
          style:
            mushroom-select-option-control$:
              mushroom-select$: |
                .mdc-select__anchor{
                  background: none !important;
                  border-radius: 20px !important;
                }
                .mdc-line-ripple::before {
                  border-bottom-width: 0px !important;
                }
                .mdc-line-ripple::after {
                  border-bottom-width: 0px !important;
                }
                .mdc-select__selected-text {
                  color: transparent !important;
                }
                .mdc-select__dropdown-icon {
                  fill: transparent !important;  
                }
                .mdc-select {
                  position: absolute !important;
                  width: 100% !important;
                  --select-height: 97px;
                  top: 0%;
                  right: 0%;
                }
            .: |
              ha-card {
               background: none;
              }

i had to set the position to absolute for the dropdown, so it may not work well in grids. but since its already in a layout card, perhaps it will, who knows!

                .mdc-line-ripple::before {
                  border-bottom-width: 0px !important;
                }

removes the line before you clicked.

                .mdc-line-ripple::after {
                  border-bottom-width: 0px !important;
                }

removes the blue line from after you have clicked.

[Montreal666]

Amazing. Thanks for the extra mile. Glad you like the use case =)
This will be a great building block for my dashboard. Thank you!
Just to improve my search skills, was this documented in your guide or elsewhere?

[dimitri.landerloos]

Not really. i have a section for the selection value in the select card in my guide. but it doesnt mention removing the line.

Mushroom Cards Card Mod Styling/Config Guide

Person Card

Sections are split: Main Icon Styling You can style the main icon like this: Change the icon type/mdi. [image] card_mod: style: | ha-state-icon { --card-mod-icon: mdi:mushroom; } Change the icon color. [image] card_mod: style: | ha-state-icon { color: orange; } Change icon size. [image] card_mod: style: | ha-state-icon { --icon-symbol-size: 40px; } Rotate Icon. [image] card_mod: style: | ha-state-icon { rotate:…

Select Card is in the same post as the person card.
then go to the selection value sections of this post.

i did answer the question regarding the line removal recently here:

Mushroom Cards - Build a beautiful dashboard easily

.mdc-line-ripple::before { border-bottom-width: 0px !important; } card_mod: style: mushroom-select-option-control$: mushroom-select$: | .mdc-select__anchor{ background: white !important; border-radius: 12px !important; } .mdc-select__dropdown-icon { fill: red !important } .mdc-line-ripple::before { border-bottom-width: 0px !important; }

so perhaps i will update my guide to include it

[weemaba999 (Bart Weemaels)]

Hi all,

I’m using mushroom-entity-buttons to highlight which rooms my vacuum should clean. I had the intention that every button would light up when I press it, but unfortunately they all light up when I press only one.
Is it possible because they all refer to the same script (but with different parameters) ?

Does anyone have a clue how to change that ?

Here’s my code:

          - type: horizontal-stack
            cards:

                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_room_cleaner
                      service_data:
                        room: bartjessie
                    entity: script.jarvis_room_cleaner
                    icon_height: 30px
                    icon: mdi:bed-king-outline
                    layout: vertical
                    name: Master
                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_room_cleaner
                      service_data:
                        room: joosarne
                    entity: script.jarvis_room_cleaner
                    icon_height: 30px
                    icon: mdi:bed-queen-outline
                    layout: vertical
                    name: Pubers
                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_room_cleaner
                      service_data:
                        room: bentjesse
                    entity: script.jarvis_room_cleaner
                    icon_height: 30px
                    icon: mdi:bed-single-outline
                    layout: vertical
                    name: Kids                   
          - type: horizontal-stack
            cards:
                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_room_cleaner
                      service_data:
                        room: hallway
                    entity: script.jarvis_room_cleaner
                    icon_height: 30px
                    icon: mdi:hanger
                    layout: vertical
                    name: Gang                    
                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_room_cleaner
                      service_data:
                        room: berging
                    entity: script.jarvis_room_cleaner
                    icon_height: 30px
                    layout: vertical
                    icon: mdi:vacuum-outline
                    name: Berging
                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_room_cleaner
                      service_data:
                        room: kitchen
                    entity: script.jarvis_room_cleaner
                    icon_height: 30px
                    icon: mdi:silverware-fork-knife
                    name: Keuken
                    layout: vertical
            columns: 4
            square: false
    

Thanks a lot in advance !

Kr,

Bart