Ok nice, i tought so.
Thx for the confirmation
Any idea why its not working? And i get an error?
Honestly, no! 
It can only be something simple like quotes or white spaces. I’m sure, because the code works for me. 
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.
- 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: noneLike 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%;
}
1 Like
Anyone happen to know a fix to this?
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:
or as described you can call a service with the specific version number you want to install:
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 ?
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
This code works only if you put positive value in --chip-spacing (
Negative chip spacing hasn’t worked for me either, it happened when upgrading to 2024.7.x
Positive works but negative doesn’t adjust the spacing. I raised this in the card_mod thread as well but it seems to have gone un-noticed.
1 Like
ah OK didn’t check negative values.
Hello,
Really love this looks great, however.
I cannot get this to work what is it that I am missing?
Here is my code:-
icon: mdi:shimmer
entity: input_boolean.animate_motion_detected_kitchen
icon_color: amber
primary: Sparkle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: stars 4s linear infinite;
}
.shape {
--shape-color: rgba(var(--rgb-disabled), 0.2);
}
@keyframes stars {
0%, 3.1%, 14.1%, 40.1%, 55.1% { clip-path: inset(0 0 0 0); }
3%, 40% { clip-path: polygon(48% 100%, 48% 62%, 0 63%, 0 0, 100% 0, 99% 100%); }
14% { clip-path: polygon(49% 45%, 48% 100%, 0 100%, 0 0, 100% 0, 100% 36%); }
55% { clip-path: polygon(0 100%, 0 60%, 41% 65%, 49% 46%, 100% 44%, 100% 100%); }
}
please can someone help as I am pulling my hair out!