left: -50px; did a trick. Thank you so much for your help.
With your HUGE HELP my dashboards look amazing
1 Like
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: " "
icon: mdi:gate
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
animation: gate 6s ease-in-out infinite;
transform-origin: 0%;
}
@keyframes gate {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-110deg); }}
ha-card {
border: none;}
- type: custom:mushroom-template-card
primary: Gate
icon: mdi:gate
icon_color: red
entity: binary_sensor.gates_window_door_is_open
card_mod:
style:
mushroom-shape-icon$: |
.shape {
transform: scaleX(-1);
background: none !important;
}
.: |
ha-state-icon {
animation: gate 6s ease-in-out infinite;
transform-origin: 0%;
}
@keyframes gate {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-110deg); }
}
ha-card {
left: -90px;
top: -.1px;
border: none;}
card_mod:
style: |
ha-card {
width: 220px;
border: none;
}
visibility:
- condition: state
entity: binary_sensor.gates_window_door_is_open
state: "on"
Thank you again
Adjust this to align the gate sides
top: -.1px;
2 Likes
Hi, could someone help me, please. what im doing wrong?
Im trying to figure out how to animate the icon in the chip card.
All examples i found are not working for me. I managed to have the whole chip animated, but i would like to go only for the icon
i cant make it work either with or without the conditional.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: media_player.alexa_dot_duschbad
state: paused
chip:
type: entity
entity: media_player.alexa_dot_duschbad
tap_action:
action: navigate
navigation_path: /dashboard-home/medien-kino
content_info: name
icon: mdi:speaker-wireless
icon_color: purple
name: Dot Bad
alignment: center
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
Thanks in advance
Amazing, this worked, thanks a lot!
Adding stroke: white; or another color is a cool option to consider…
ha-state-icon {
animation: gate 6s ease-in-out infinite;
transform-origin: 0%;
stroke: white;
stroke-width: .4px;
}
2 Likes
You defined the animation under a template-chip, but you are using an entity-chip
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-entity-chip$: |
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: media_player.media_players
state: paused
chip:
type: entity
entity: media_player.media_players
tap_action:
action: navigate
navigation_path: /dashboard-home/medien-kino
content_info: name
icon: mdi:speaker-wireless
icon_color: purple
name: Dot Bad
alignment: center
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-entity-chip$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
1 Like
That’s looks great, thank you. I even add this to my safe card
You are Genius
Thank you again for your help, I think whole community thankful for all what you done
1 Like
i tried sooo long 
Thanks, i changed to template and now its working.
Hi there,
Hope someone can help me. I’ve being trying to create a custom card by combining custom button card with a bunch of mushroom cards. It is almost perfect so far, but I have an issue with the border or contour of the mushroom cards that I am unable to remove after trying all suggested solutions I found on the web. Not sure if I am doing something wrong. Basically here is the code for my card, all mushroom chip cards (btn to btn5) have this annoying radius although is mostly noticeable for btn5 as I want to have transparent background. Is there a way to fix this ? Here is my code :
type: custom:button-card
name: Aliz |
icon: null
entity: device_tracker.mobile_aliz
show_state: true
grid_options:
rows: 2
columns: 6
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn2:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn3:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn4:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn5:
card:
type: vertical-stack
card_mod:
style: |
ha-card {
border: none !important;
}
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
background: none !important;
--chip-background: none !important;
--ha-card-background: none !important;
padding: 0px !important;
--ha-card-background: none !important;
box-shadow: none !important;
border: none !important;
margin: 0px !important;
}
chips:
- type: entity
entity: sensor.mobile_aliz_battery_level
icon: mdi:cellphone
icon_color: white
img: ""
styles:
grid:
- grid_template_areas: "\"n btn\" \"s btn\" \"i btn\""
- grid_template-columns: 1fr 1fr
- grid_template_rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 10px
- height: 10px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
icon: null
card:
- padding: 22px
- height: 120px
- background-color: rgba(91, 65, 105, 0.9)
custom_fields:
btn:
- justify_content: end
- position: absolute
- bottom: 3px
- left: 160px
btn2:
- justify_content: end
- position: absolute
- bottom: 45px
- left: 160px
btn3:
- justify_content: end
- position: absolute
- bottom: 45px
- left: 117px
btn4:
- justify_content: end
- position: absolute
- bottom: 3px
- left: 117px
btn5:
- justify_content: end
- position: absolute
- bottom: 78px
- left: 100px
img:
- justify-content: start
- background-image: url("/local/pictures/user_aliz.png")
- background-size: cover
- position: absolute
- left: 0
- bottom: 0
- margin: 0 0 -9px -13px
- width: 105px
- height: 105px
name:
- position: absolute
- top: 3px
- left: 20px
- justify-self: start
- align_self: start
- font-size: 15px
- font-weight: 600
- color: white
- z-index: 2
state:
- color: rgba(255, 255, 255, 0.7)
- position: absolute
- justify-self: start
- align-self: start
- top: 4.75px
- left: 56px
- font-size: 13px
- font-weight: 400
- z-index: 2
card_mod:
style: |
ha-card {
border-radius: 30px !important;
}
The image of the resulting card:
I also tried with directly the mushroom-chip-card without embedding it into the vertical-stack, but when I do this, the --chip background color is not considered, which is even worst for some reason, this is the code modification for what I mean :
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
borde-radius: 100px !important;
}
The new image result (you can see on the gray wifi icon, color background is not accounted for now …)
If someone can help me or guide me on the right direction I would really appreciate the help. Thanks a lot in advance !!
I am trying to make a cleaner mobile dashboard using mushroom chips card.
I would like to have the color of the switch.blueiris_schedule_away icon change based on the state of the switch. I have tried many things and it just remains white.
Here is my latest try… what am I missing here?
type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: false
- type: spacer
- type: entity
entity: switch.blueiris_schedule_away
tap_action:
action: toggle
card_mod:
style: |
:host {
--icon-color:
{% if is_state('switch.blueiris_schedule_away', 'on') %}
green
{% else %}
gray
{% endif %};
}
- type: entity
entity: switch.blueiris_schedule_day_night
tap_action:
action: toggle
- type: spacer
- type: menu
alignment: justify
(I have read this page: Mushroom Cards Card Mod Styling/Config Guide)
what is curious to me, is that if I just use a button within a horizontal stack card that the icon changes color based on state and I am not even specifying that behavior. (Here with At Home “on” and Away “off”)
type: horizontal-stack
cards:
- show_name: true
show_icon: true
name: Away
entity: switch.fincajill_schedule_away
type: button
tap_action:
action: toggle
show_state: false
- show_name: true
show_icon: true
name: At Home
entity: switch.fincajill_schedule_day_night
type: button
tap_action:
action: toggle
show_state: false
Any help getting this working would be greatly appreciated!
Your chip code for the phone should look like this
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.mobile_aliz_battery_level
icon: mdi:cellphone
icon_color: white
card_mod:
style: |
ha-card {
--chip-background: none !important;
border: none! important;
}
1 Like
This will work
type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: false
- type: spacer
- type: entity
entity: switch.blueiris_schedule_away
tap_action:
action: toggle
card_mod:
style: |
ha-card {
color: {{ 'green' if is_state('switch.blueiris_schedule_away', 'on') else 'grey' }}
}
Your code for the WIFI chip looks fine. Did you test it with a different device like a light? I think your state 'CCS_VZLA-5GHz' may be the issue.
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
You did have a typo borde-radius: 100px !important; borde vs border
1 Like
Hi @LiQuid_cOOled , thanks a lot for the reply ! I already tried this way, but for some reason if I do it like this, then not even the transparent background color is applied and the border is still there.
type: custom:button-card
name: Aliz |
icon: null
entity: device_tracker.mobile_aliz
show_state: true
grid_options:
rows: 2
columns: 6
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn2:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn3:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn4:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(126, 161, 112, 1.0)' if is_state('sensor.mobile_aliz_wifi_connection', 'CCS_VZLA-5GHz') else 'rgba(180, 180, 180, 1.0)'}} !important;
padding: 5px !important;
border-radius: 100px !important;
}
chips:
- type: template
icon: mdi:wifi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ""
btn5:
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.mobile_aliz_battery_level
icon: mdi:cellphone
icon_color: white
card_mod:
style: |
ha-card {
--chip-background: none !important;
border: none! important;
}
img: ""
styles:
grid:
- grid_template_areas: "\"n btn\" \"s btn\" \"i btn\""
- grid_template-columns: 1fr 1fr
- grid_template_rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 10px
- height: 10px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
icon: null
card:
- padding: 22px
- height: 120px
- background-color: rgba(91, 65, 105, 0.9)
custom_fields:
btn:
- justify_content: end
- position: absolute
- bottom: 3px
- left: 160px
btn2:
- justify_content: end
- position: absolute
- bottom: 45px
- left: 160px
btn3:
- justify_content: end
- position: absolute
- bottom: 45px
- left: 117px
btn4:
- justify_content: end
- position: absolute
- bottom: 3px
- left: 117px
btn5:
- justify_content: end
- position: absolute
- bottom: 78px
- left: 100px
img:
- justify-content: start
- background-image: url("/local/pictures/user_aliz.png")
- background-size: cover
- position: absolute
- left: 0
- bottom: 0
- margin: 0 0 -9px -13px
- width: 105px
- height: 105px
name:
- position: absolute
- top: 3px
- left: 20px
- justify-self: start
- align_self: start
- font-size: 15px
- font-weight: 600
- color: white
- z-index: 2
state:
- color: rgba(255, 255, 255, 0.7)
- position: absolute
- justify-self: start
- align-self: start
- top: 4.75px
- left: 56px
- font-size: 13px
- font-weight: 400
- z-index: 2
card_mod:
style: |
ha-card {
border-radius: 30px !important;
}
This is what I get . Also tried applying the card without vertical stack and same behavior, background color is not applied. Vertical stack was the only way background color enforced was working. Is there any way to debug this ? What could be wrong ?
What version of card mod are you using, v3.50 or the latest v3.4.4?
When I test the code I provided with my phone entity and an example pic, I get this
1 Like
That was the issue !
I was using v3.5.0, I switched to v3.4.4 and it is working now.
Thanks a lot !! 
1 Like
Good looking card! Glad we got it worked out!!!
1 Like
Is there any way to resize any of the mushroom cards, btn to btn5 so they can each have desired given size ? I tried adding width and height values inside each part of the styles section but didn’t work.
eg.
styles:
btn5:
- justify_content: end
- position: absolute
- bottom: 86px
- left: 95px
- height: 86px
- width: 95px
Also tried with some card-mod styling inside the definition of ther card above but did not work either. Also, what is the best place to start learning how to edit and create my cards ? Until here I have mostly achieved this by an example card and then brute force, logic and chatGPT for modifying them, but feel I’m missing the basics haha…
The btn5: styles are going to control the custom:button-card’s location and available space on your card. It will not alter the Mushroom card properties imbedded in that space
For Example
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.iphone_battery_level
icon: mdi:cellphone
card_mod:
style: |
ha-card {
--chip-background: none !important;
border: none !important;
--chip-icon-size: 50px;
color: yellow !important;}
img: ""
styles:
grid:
- grid_template_areas: "\"n btn\" \"s btn\" \"i btn\""
- grid_template-columns: 1fr 1fr
- grid_template_rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 10px
- height: 10px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
card:
- padding: 22px
- height: 120px
- background-color: rgba(91, 65, 105, 0.9)
custom_fields:
btn:
- justify_content: end
- position: absolute
- bottom: 3px
- left: 160px
btn2:
- justify_content: end
- position: absolute
- bottom: 45px
- left: 160px
btn3:
- justify_content: end
- position: absolute
- bottom: 45px
- left: 117px
btn4:
- justify_content: end
- position: absolute
- bottom: 3px
- left: 117px
btn5:
- justify_content: end
- position: absolute
- bottom: 50px
- left: 280px
- height: 40px
I moved the Mushroom icon and made it yellow
The basic for Mushroom are here
For Custom Button Cards here
Card Mod Main Thread
1 Like