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

exen904 · October 19, 2024, 5:34pm

Im quite new to templating and dont quite get how I need to set this up, help much appreciated I want to create a plant status card with the mushroom template and change the icon color, depending on the moisture percentage of the sensor.

The value is stated in a attribute of the plant entity, which seems to kind of be my issue.

I currently started with this, taken from another card that successfully changes color depending on the value of the corresponding entity.

type: custom:mushroom-template-card
primary: Monsterra
secondary: "{{state_attr('plant.monsterra', 'moisture')}}%"
icon: mdi:flower
icon_color: |-
  {% set moisture="{{state_attr('plant.monsterra', 'moisture')}}%"
    {% if moisture|int()<= 20 %}
    red
    {% elif moisture|int()>20 and moisture|int() <=65 %}
    green
    {% elif moisture|int()>65 and moisture|int() <=999 %}
    blue
    {% else %}
    red
    {%endif %}
entity: plant.monsterra

the value is displayed as secondary information, but I dont get the icon color to work. I guess the syntax there is not correct for defining the moisture variable?

MrGrey · October 20, 2024, 4:56am

{% set moisture="{{state_attr('plant.monsterra', 'moisture')}}%"

At a glance, you’re quotes seem wrong. Have you tested/tried this in Developer Tools → Templates?

MrGrey.

reste_narquois · October 20, 2024, 7:38am

Should be:

{% set moisture = state_attr('plant.monsterra',  'moisture') %}

You don’t need the curly bracket pairs inside the set variable expression.

And as you have set plant.monsterra as the entity for the card, you can replace all references to it with entity:

{% set moisture = state_attr(entity,  'moisture') %}

WeisserWolf611 · October 20, 2024, 11:27am

I cant get it working. I want to show another Icon if the state is 50% and an other text.

type: custom:mushroom-cover-card
entity: cover.rollladen_office
name: Rolladen
show_position_control: true
show_buttons_control: true
layout: horizontal
card_mod:
  style: |
    ha-state-icon {
      --card-mod-icon: >
        {% if state_attr(entity, "current_position") == 50 %}
          mdi:weather-sunny-alert
        {% else %}
        {% endif %}
    }

I can change the icon, but i am not able to change only in this specific position.
Anyone a simple hint what is wrong?
Thanks alot!

Vandana · October 20, 2024, 1:46pm

Hello guys,

Plz help me out here.

How to add buttons at circled area?

type: custom:mushroom-select-card
entity: input_select.playlists
fill_container: false
name: Select Playlist

exen904 · October 20, 2024, 1:58pm

Thank you so much, that works perfectly. The ammount of brackets also really set me off a bit, but I didnt get the hang of it last night.

Your reference for the entity attribute also solved a second question I was asking myself, thanks a lot for that

fela93 · October 22, 2024, 11:04am

I have in cover card edit each button
for example

mushroom-button:nth-child(1)$: |
            .button ::slotted(*) {
              --card-mod-icon: mdi:arrow-up-bold;
            }
            .button {
              border: 0.1px outset gray !important;
              box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66);
            }

how can I add to this button for example

ha-card:active {
        transform: scale(0.875);
        transition: 0s;
      }

Vandana · October 22, 2024, 11:51am

Guys plz help

majdzik84 · October 25, 2024, 4:38pm

Hi. I changed the custom component from vertical-stack-in-card to stack-in-card and it displays correctly. Try it

FireDragon · October 26, 2024, 4:09pm

Hi @Vandana That’s all I can do

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
          border: none !important;
          box-shadow: none !important;
        }
    cards:
      - type: custom:mushroom-select-card
        entity: input_select.media_player
        fill_container: false
        name: Select speaker
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: [entity_XXX]
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon: mdi:repeat-variant
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
      - type: custom:mushroom-entity-card
        entity: [entity_XXX]
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon: mdi:music-note-off
        icon_color: red
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
      - type: custom:mushroom-entity-card
        entity: [entity_XXX]
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon: mdi:play-pause
        icon_color: green
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }

Vandana · October 26, 2024, 4:30pm

Thank you so so much.

How to extend the dropdown to have the full width?

dylan_09 · October 26, 2024, 5:24pm

Tried to find a tip to my question in this very long thread. Maybe solution would be very easy.
I show different numbers without units in mushroom template and entity cards. But for all numbers trailing zeros are cut off. 5.00 will be shown as 5.
The only way I found is to add a char (e.g. a dot) after number.
Code snippet:

{{ '%.2f' | format(states('sensor.ebusd_cop_current') | float) }}

This will cut off any trailing zeros.
Seems mushroom card do same magic on numbers and removes trailing zeros when no other text follows.

Vandana · October 27, 2024, 4:19am

type: custom:stack-in-card
mode: horizontal
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: switch.geyser
        icon: mdi:water-boiler
        layout: vertical
        icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle

Hello Guys,

How do I remove the spaces between each mushroom-template-card?

Kindly guide

reste_narquois · October 27, 2024, 7:43am

Why are you using a core horizontal-stack card within a custom stack-in-card in horizontal mode? It’s completely redundant.

See if removing it helps. If not, you might have to set the gap variable through card-mod.

Vandana · October 27, 2024, 8:02am

Thank you so much… fixed…

FireDragon · October 27, 2024, 1:08pm

@Vandana Change options according to personal needs.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-select-card
    entity: input_select.chon_loa
    fill_container: false
    name: Select Playlist
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: [entity_id]
        icon_color: green
        icon: mdi:repeat-variant
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }   
      - type: entity
        entity: [entity_id]
        icon_color: orange
        icon: mdi:repeat-variant
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }  
      - type: entity
        entity: [entity_id]
        icon_color: purple
        icon: mdi:repeat-variant
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }  
      - type: entity
        entity: [entity_id]
        icon_color: red
        icon: mdi:repeat-variant
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }

type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          background: rgba(28,28,28,0.6)
        } 
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 90% 10%
        cards:
          - type: custom:mushroom-select-card
            entity: input_select.chon_loa
            fill_container: false
            name: Select Playlist
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background: none;
                } 
          - type: vertical-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: action
                    icon_color: blue
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      data:
                        color_temp: 154
                      target:
                        entity_id: [light_id]
                    icon: mdi:lightbulb
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: rgba(var(--rgb-blue), 0.2);
                        } 
              - type: custom:mushroom-chips-card
                chips:
                  - type: action
                    icon_color: amber
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      data:
                        color_temp: 267
                      target:
                        entity_id: [light_id]
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: rgba(var(--rgb-amber), 0.2);
                        } 
              - type: custom:mushroom-chips-card
                chips:
                  - type: action
                    icon_color: orange
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      data:
                        color_temp: 500
                      target:
                        entity_id: [light_id]
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: rgba(var(--rgb-orange), 0.2);
                        }

Vandana · October 27, 2024, 1:18pm

Exactly what i was looking for…

Thank you so so so so much…

SetMonkey13 · October 29, 2024, 3:42pm

Is it possible to change the secondary info to the fan card to show High, Medium, Low, or Off instead of the percentage?
I’ve used this on other cards.

 [[[ 
     if (entity.attributes.percentage == 100) return "High";
     if (entity.attributes.percentage == 74) return "Medium";
     if (entity.attributes.percentage == 25) return "Low";
     if (entity.attributes.percentage == 0) return "Off";
     return "Unknown"; 
   ]]]

Faecon · October 29, 2024, 4:08pm

is it possible to template “primary” ?
Like this ?

          cards:
            - type: custom:mushroom-template-card
                {% if state_attr('media_player.wachtzaal', 'source') == 'Spotify Connect' %}
                  primary: Spotify-Lijst ({{ state_attr("media_player.wachtzaal", 'media_artist') }} - {{ state_attr("media_player.wachtzaal", 'media_title') }})
                {% else %}
                  primary: Muziek
                {% endif %}

Holdestmade · October 29, 2024, 4:46pm

      cards:
        - type: custom:mushroom-template-card
             primary: |-
               {% if state_attr('media_player.wachtzaal', 'source') == 'Spotify Connect' %}
                 Spotify-Lijst ({{ state_attr("media_player.wachtzaal", 'media_artist') }} - {{ state_attr("media_player.wachtzaal", 'media_title') }})
               {% else %}
                 Muziek
               {% endif %}