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

Lol tried, but nothing works

i have this

>-
      {{ 'mdi:lock-open-outline' if is_state(entity, 'unlocked') else
      'mdi:lock-outline' }}

for the pictogram

'{{ ''red'' if is_state(lock.voordeur, ''unlocked'') else ''green'' }}'

for icon color

{{ state_translated(lock.voordeur) }}

For secundary info

Are you using the UI or YAML? I guess the UI. :slight_smile:

My guess, you didn’t set the entity at the top.

You have two ways to do that. Either you set it in the UI almost at the top of the card config, or you do it in the code editor in YAML.

Please try to do it like this:

  • Create a new card (blue button)
  • Use “manual” as your card type
  • In the code window you paste the underneath code (it’s important because of the white space)
  • Save and please report back, if it works as expected :smiley:
type: custom:mushroom-template-card
primary: {{ state_attr(entity, 'friendly_name') }}
secondary: {{ state_translated(entity) }}
icon: >-
 {{ 'mdi:lock-open-outline' if is_state(entity, 'unlocked') else
 'mdi:lock-outline' }}
entity: lock.voordeur
icon_color: {{ 'red' if is_state(entity, 'unlocked') else '' }}
tap_action:
 action: none
hold_action:
 action: none
double_tap_action:
 action: none

i need to replace the “entity” with my entity right or not?
If not
I get error

Configuratiefouten ontdekt:
missed comma between flow collection entries (264:61)

261 | … ck
262 | …
263 | … hroom-template-card
264 | … e_attr(entity, ‘friendly_name’) }}
------------------------------------------^
265 | … ate_translated(entity) }}
266 | …

Yes and no! :wink:

type: custom:mushroom-template-card
[...]
entity: lock.voordeur # HERE, the entity is set
[...]

If you set the entity once in a Mushroom-card, you can later just use entity to refer to it. Less repeating! :slight_smile: But you can use the real entity_id as well. Just what’s easier for you. :slight_smile:

EDIT:

entity: your_entity_id
primary: "{{ states(entity) }}"

is the same as

entity:
primary: "{{ states('your_entity_id') }}"

Ok nice, i tought so.
Thx for the confirmation
Any idea why its not working? And i get an error?

Honestly, no! :laughing: It can only be something simple like quotes or white spaces. I’m sure, because the code works for me. :slight_smile:

Would you mind posting your complete code of that card from the “code editor”? And, important, please post it with code formatting (see here). It’s important because of the white space. :slight_smile:

- type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: {{ state_attr(entity, 'friendly_name') }}
              secondary: {{ state_translated(entity) }}
              icon: >-
               {{ 'mdi:lock-open-outline' if is_state(entity, 'unlocked') else
               'mdi:lock-outline' }}
              entity: lock.voordeur
              icon_color: {{ 'red' if is_state(entity, 'unlocked') else '' }}
              tap_action:
               action: none
              hold_action:
               action: none
              double_tap_action:
               action: none

i just copied your part, so if it works for you it should work for me but it doesnt
i used preformatting in the post before this, but it doesnt look like i see it

I also tested in developer tools without luck
Should entity be between ’ and ’

1 Like

Ok i got it working after trial and error, if somebody needs, here is the code…

type: custom:mushroom-template-card
                      primary: Voordeur
                      secondary: '{{ state_translated(''lock.voordeur'') }}'
                      icon: >-
                        {{ 'mdi:lock-open-outline' if is_state('lock.voordeur',
                        'unlocked') else
                                       'mdi:lock-outline' }}
                      entity: lock.voordeur
                      icon_color: >-
                        {{ 'red' if is_state('lock.voordeur', 'unlocked') else
                        'green' }}
                      layout: vertical
                      fill_container: false
                      double_tap_action:
                        action: none
                      tap_action:
                        action: more-info
                      hold_action:
                        action: none

Like you see, i had to put the entity between ’ and ’ and also i couldnt use, entity, although set… i have to use the real entity name

1 Like

Anyone have a code for this card, or know how to achieve it? thanks

It’s probably using the stack-in-card and chips.

Here is mine, similar to what you are looking for

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Living Room
    secondary: >-
      {{ states('sensor.atc_9bf4_temperature') | round(0) }} °C | {{
      states('sensor.atc_9bf4_humidity') | round(0) }} %
    icon: mdi:sofa
    entity: light.living_room_lights
    icon_color: |-
      {% if is_state('light.living_room_lights', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: living-room-1
    hold_action:
      action: none
    multiline_secondary: false
    layout: horizontal
    fill_container: false
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card
          {background: transparent;
           border-style: none;
          }
        :host {
          --mush-icon-size: 90px;
          height: 100px;
          margin-left: -10px !important;
        }
        ha-card:after {
          content: " {{ states.light | selectattr('state', 'eq', 'on')
            | rejectattr('name', 'search', 'First Floor')
            | map(attribute='entity_id') | map('area_name')
            | select('in', ['Living Room'])
            | list | count }}";
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            background: none;
            color: ;
            font-weight: regular;
            border-radius: 50% 50%;
            top: 5px;
            left: 80px;
            width: 30px;
            height: 30px;
            font-size: 20px;
            
            }   
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-spacing: 2px;
          background: transparent !mportant;
        }
    chips:
      - type: template
        entity: binary_sensor.back_door_contact
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:door-open
          {% else %}
            mdi:door-closed
          {% endif %} 
        icon_color: |-
          {% if is_state('binary_sensor.back_door_contact', 'on') %}
            red
          {% else %}
            teal
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: template
        entity: binary_sensor.door_to_garage_contact
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:door-open
          {% else %}
            mdi:door-closed
          {% endif %} 
        icon_color: |-
          {% if is_state('binary_sensor.door_to_garage_contact', 'on') %}
            red
          {% else %}
            
          {% endif %}
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: template
        entity: binary_sensor.top_living_room_window_contact
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:window-open-variant
          {% else %}
            mdi:window-closed-variant
          {% endif %} 
        icon_color: >-
          {% if is_state('binary_sensor.top_living_room_window_contact', 'on')
          %}
            red
          {% else %}
            teal
          {% endif %}
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: template
        entity: binary_sensor.window_contact
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:window-open-variant
          {% else %}
            mdi:window-closed-variant
          {% endif %} 
        icon_color: |-
          {% if is_state('binary_sensor.window_contact', 'on') %}
            red
          {% else %}
            
          {% endif %}
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: light
        entity: light.living_room_wall_lights
        double_tap_action:
          action: none
        content_info: none
        icon: mdi:light-recessed
        tap_action:
          action: more-info
        hold_action:
          action: none
        use_light_color: true
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: light
        entity: light.living_fan
        double_tap_action:
          action: none
        icon: mdi:ceiling-fan-light
        icon_color: primary
        use_entity_picture: false
        tap_action:
          action: more-info
        hold_action:
          action: none
        content_info: none
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: entity
        entity: fan.living_fan
        double_tap_action:
          action: none
        icon: mdi:ceiling-fan
        use_light_color: true
        content_info: none
        tap_action:
          action: more-info
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: entity
        entity: cover.shades_curtain
        double_tap_action:
          action: none
        icon: mdi:curtains
        icon_color: primary
        content_info: none
        use_entity_picture: false
        tap_action:
          action: more-info
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card
              {background: transparent !important;
               border-style: none;
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.back_door_contact
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.back_door_contact
          icon_color: red
          content_info: none
    alignment: end
card_mod:
  style: |
    ha-card {
      --vertical-stack-card-gap: 10px;
      background: url('/local/MyPictures/rock wall.jpg');
      background-size: 200%;
    }

image

1 Like

Custom remote control popup for my chromecast using card-mod

2 Likes

Anyone happen to know a fix to this? :slight_smile:

I can’t install mushroom today:

ut conditional cards per user would be. I’m guessing it won’t be 10+ users so that should be annoying, but doable.

I dont know how to explain it better than what the warning message is telling you, but its saying you cant install that version of mushroom as its made for a newer version of HA than the one you are using.

the one mentioned 2024.8.0b0 is the beta release for the release coming out this wednesday. which is 2024.8.0.

so probably just wait until then? or select the previous version when downloading:
image

or as described you can call a service with the specific version number you want to install:
image

so the service call probably looks like this - but not sure, have never used it:

Hello !
How can I reduce the distance between these chip cards ?
image

In the past, this code in card mod helped to make the distance between them smaller. After another update this code doesn’t work anymore (

 card_mod:
  style: |
    ha-card {
    --chip-box-shadow: none;
    --chip-background: none;
    --chip-spacing: -0.5em;
    --chip-icon-size: 0.5em;                
    --chip-border-width: 0;
    position: absolute;
    right: 0px;
    top: 30px;
    }

I checked your code still works fine with me.
what versions are you on

2 Likes

Right now, version 4.0.0 is installed