Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

It does and it offers just true or false. :grinning:

I suspect my problem is the repeated use of the coding for each room but I donā€™t know enough to be able to discover why.

Hmmm, it all looks correct to me then. Have you checked that the actual attribute moves from true to false when the heating is turned off.

Thanks for the suggestion. Just checked and Iā€™ve watched it change.

At the same time, Iā€™m sure one set of icon and icon colour changes affected the other.

Iā€™ve changed icons and icon_color between the two rooms. The kitchen is heating but the study is not so it appears that the results of the If statements are reversed for both rooms.

states_2

type: grid
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    entity: climate.wiser_kitchen
    icon: >-
      {% if state_attr('climate.wiser_kitchen', 'is_heating') == 'true'%}
      mdi:fire   
      {% else %}
      mdi:fire-off   
      {% endif %}
    icon_color: >-
      {% if state_attr('climate.wiser_living_room', 'is_heating') == 'true'%}
      red   
      {% else %}
      blue   
      {% endif %} 
    secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }}'
    layout: vertical
  - type: custom:mushroom-template-card
    primary: Study
    entity: climate.wiser_study
    icon: |-
      {% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
      mdi:fire
      {% else %}
      mdi:snowflake
      {% endif %}
    icon_color: |-
      {% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
      red
      {% else %}
      green
      {% endif %} 
    secondary: '{{ state_attr(''climate.wiser_study'', ''current_temperature'') }}'
    layout: vertical

ac8020c7988443935c63c1a156a1496273b90f86

Iā€™m trying to replicate this with just motion, light, and media player icons on the bottom right of the card, but with no light entity background.

Icons donā€™t seem to show for some reason, any ideas? thanks

Thanks, i will try it !

Post the code you have right now so we can help :slight_smile:

Thanks, I edited @rhysb code then butchered it somehow lol.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: '{{ states("sensor.landing_motion_temperature") | round(0) }} Ā°C'
    icon: mdi:sofa
    entity: light.living_room_light
    tap_action:
      action: navigate
      navigation_path: lounge
    hold_action:
      action: toggle
    icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.landing_motion
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.sky_q
            state_not: 'off'
          - entity: media_player.sky_q
            state_not: unavailable
        chip:
          type: template
          icon_color: disabled
          icon: |-
            {% set media_type = state_attr('media_player.sky_q',
            'media_content_type') %}
            {% if media_type == 'tvshow' %}
              mdi:television-classic
            {% elif media_type == 'movie' %}
              mdi:movie-open
            {% elif media_type == 'music' %}
              mdi:music
            {% elif media_type == 'playlist' %}
              mdi:music
            {% else %}
              mdi:plex
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.landing_motion
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-outline
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
card_mod:
  style: |
    ha-card {
      height: 102px;
    }
    :host {
      background: var(--card-background-color);
      border-radius: var(--ha-card-border-radius);
    }

What icons arent showing? Modified the conditons with my entities and they show up just fine.

Light entity icon doesnā€™t show at all, not sure what the last icon is tbh. I think the code also needs clearing up, as Iā€™ve only removed the light entity for the background under card_mod and nothing else.

There is no light entity icon in your code, so i would assume that is it.

The first bit of the code that refers to your light is for the main big icon at the top left of the card :slight_smile:

Otherwise no light entity mentioned.

(Original post by rhysb doesnt have a light entity chip either, so you would need to add your own if you want it :slight_smile: )

1 Like

Oh wow, makes sense now lol, thanks for your help. :+1:

1 Like

With this to move them to the left just use the built in alignment for mushroom chips instead of moving chips individually. Like this:

type: custom:mushroom-chips-card
chips:
  - type: light
    entity: light.sofaspotter
    content_info: none
    use_light_color: true
    icon: mdi:light-recessed
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - type: light
    entity: light.spisestue
    content_info: none
    icon: mdi:light-recessed
    tap_action:
      action: toggle
    use_light_color: true
    hold_action:
      action: more-info
alignment: start

So for your full config like this:

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Stue
        secondary: >-
          {{ states('sensor.sensor_stue_co2_atom_stue_temperature') | round(0)
          }} Ā°C
        icon: mdi:sofa-outline
        entity: light.sofaspotter
        tap_action:
          action: navigate
          navigation_path: stue
        hold_action:
          action: toggle
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
        card_mod:
          style: |
            ha-card {
                transform: scalex(-1);
                padding-bottom: 20px !important;
                border: none !important;
              }
              mushroom-state-info {
                transform: scalex(-1);
              }
              ha-state-icon {
                transform: scalex(-1);
              }
              mushroom-shape-icon {
                position: absolute;
                --icon-size: 77px;
                top: -38px;
                right: -56px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: light
            entity: light.sofaspotter
            content_info: none
            use_light_color: true
            icon: mdi:light-recessed
            tap_action:
              action: toggle
            hold_action:
              action: more-info
          - type: light
            entity: light.spisestue
            content_info: none
            icon: mdi:light-recessed
            tap_action:
              action: toggle
            use_light_color: true
            hold_action:
              action: more-info
          - type: light
            entity: light.flos
            content_info: none
            tap_action:
              action: toggle
            icon: mdi:lamp
            use_light_color: true
            hold_action:
              action: more-info
          - type: light
            entity: light.gubi
            content_info: none
            icon: mdi:chandelier
            use_light_color: true
          - type: conditional
            conditions:
              - entity: binary_sensor.nest_protect_dining_room_smoke_status
                state: 'on'
            chip:
              type: template
              icon_color: red
              icon: mdi:fire-alert
              style: |
                ha-card {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }  
          - type: conditional
            conditions:
              - entity: binary_sensor.ms6_stue_home_security_motion_detection
                state: 'on'
            chip:
              type: template
              icon_color: blue
              icon: mdi:motion-sensor
              state: 'on'
              style: |
                ha-card {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
        alignment: start
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          }  
    card_mod:
      style: |
        ha-card {
          height: 115px;
          {% if is_state('light.sofaspotter', 'on') %}
             background: rgba(255, 152, 0, 0.1);
          {% endif %}
        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: KjĆøkken
        secondary: '{{ states(''sensor.motionkjokken_temperature'') | round(0) }} Ā°C'
        icon: mdi:silverware-fork-knife
        entity: light.kjokkenspotter
        tap_action:
          action: navigate
          navigation_path: kjokken
        hold_action:
          action: toggle
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--rgb-primary-text-color), 0.025);
              --mush-icon-size: 76px;
              height: 66px;
              margin-left: -18px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: light
            entity: light.kjokkenspotter
            content_info: none
            use_light_color: true
            icon: mdi:light-recessed
            tap_action:
              action: toggle
            hold_action:
              action: more-info
          - type: light
            entity: light.pendellampe
            content_info: none
            tap_action:
              action: toggle
            icon: mdi:ceiling-light-multiple
            use_light_color: true
            hold_action:
              action: more-info
          - type: light
            entity: light.benkebelysning
            content_info: none
            icon: mdi:wall-sconce-flat
            use_light_color: true
          - type: conditional
            conditions:
              - entity: binary_sensor.nest_protect_kitchen_co_status
                state: 'on'
            chip:
              type: template
              icon_color: red
              icon: mdi:fire-alert
              style: |
                ha-card {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }  
          - type: conditional
            conditions:
              - entity: binary_sensor.motionkjokken_motion
                state: 'on'
            chip:
              type: template
              icon_color: blue
              icon: mdi:motion-sensor
              state: 'on'
              style: |
                ha-card {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                } 
        alignment: end
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          }  
    card_mod:
      style: |
        ha-card {
          height: 102px;
          {% if is_state('light.kjokkenspotter', 'on') %}
             background: rgba(255, 152, 0, 0.1);
          {% endif %}
        }

FYI with the newest version of card mod what you have here (in the second card in the horizontal stack) will not work.

          - type: conditional
            conditions:
              - entity: binary_sensor.motionkjokken_motion
                state: 'on'
            chip:
              type: template
              icon_color: blue
              icon: mdi:motion-sensor
              state: 'on'
              style: |
                ha-card {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                } 

You always need to have:

          - type: conditional
            conditions:
              - entity: binary_sensor.motionkjokken_motion
                state: 'on'
            chip:
              type: template
              icon_color: blue
              icon: mdi:motion-sensor
              state: 'on'
              card_mod:
                style: |
                  ha-card {
                    animation: blink 1s linear infinite;
                  }
                  @keyframes blink {
                    50% {opacity: 0;}
                  } 

Going forward. Just using style: | without card_mod first is now fully dead.

1 Like

Hi,
Iā€™m counting the lights on in specific area. The color of the icon of the mushroom template card is amber when there is at least 1 light on in the room and grey when there isnā€™t. Pretty simple and working.
However i want to reject some of the lights with a specific device_class: DNDMode.
The code is working to count the correct number of lights (excluding the DNDMode) in the mushroom badge icon.
Iā€™m using this code for it:

mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";

However the same rejectattr code is not working for the icon color.

icon_color: >-
          {%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}
          amber {% else %} grey {% endif %}

Any idea what could be wrong?

Full code
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq'
          , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr (
          'attributes.device_class' , 'eq' , 'DNDMode') |list | count > 0 %}
          amber {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lichten aan
              style: |
                --popup-border-radius: 12px;
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: light
                      options:
                        type: custom:mushroom-light-card
                        show_brightness_control: true
                        layout: horizontal
                        tap_action:
                          action: toggle
                        use_light_color: true
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                              --ha-card-border-width: 0;
                            }
                  exclude:
                    - domain: light
                      attributes:
                        device_class: DNDMode
                card:
                  type: custom:layout-card
                  layout:
                    margin: 0px 10px 10px 10px
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
          target: {}
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }

A very big thank you for such a detailed answer, this setup is pretty old from the early mushroom days gues i have some rewrites to do.

Any suggestions to use button-card instead of stack-in-card?
Stack in card seems like a dead project, last comit in 2020.

@jeey2k I typically use vertical-stack-in-card and layout card combined. The grid option on layout-card is very dynamic and allows easy adjustments to columns.

Vertical-stack-in-card has a horizontal option as well.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Outdoor Lights
    style: |
      ha-card
      { --title-padding: 12px 12px 4px;
        --title-font-size: 16px;
        --primary-text-color: ;
        --title-font-weight: 100;
        }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card 

Thanks. It is working.

And can I change the blue squares in another colour ? Because it does not matches my colours

@Faecon Yes add ths line --tpc-text-color: yellow; to change the text color and --tpc-elements-background-color: red; to change the background color. Change the color to your preference.

card_mod:
  style: |
    ha-card{
     font-weight: 400;
     --tpc-text-color: yellow;
     --tpc-elements-background-color: red;
      }

1 Like

You are actually overiding the badge color with background: rgb(var(--rgb-orange)); It wasnā€™t actually amber but rgb(var(--rgb-orange).

image

icon_color: | references the shape background color, not the badge background color. You can place your if statement like this in card_modā€¦

background: {% if expand(area_entities('woonkamer')) | selectattr (  'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list |  count > 0 %}} amber
            {% else %}
                green 
            {% endif %}
                          }
card_mod:
  style: |
       mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";         
              position: absolute;
              color: var(--card-background-color);
              width: 100%;
              height: 100%;
              border-radius: 50%;
              display: flex;
              top: 0;
              justify-content: center;
              align-items: center;
              background: {% if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}}
                          amber {% else %}
                          blue
                 {% endif %}
                }
            ha-card {
              --ha-card-border-width: 0;  
            }

1 Like

Hi many thanks for your support.
I indeed mean the background color of the shape, not the background of the badge. Thatā€™s indeed orange.

SchermĀ­afbeelding 2023-12-31 om 00.18.28

Instead of the above picture, it should be like this:
SchermĀ­afbeelding 2023-12-31 om 10.23.31

It was working perfectly before when using this code:

icon_color: >-
          {%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count > 0 %}
          amber {% else %} grey {% endif %}

I just added | rejectattr ('attributes.device_class','eq','DNDMode') to the code, but that does seem to break it.

icon_color: >-
          {%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}
          amber {% else %} grey {% endif %}