brilliant, sorry didn’t know it was an animated gif, that’s why I moved the chips next to the picture.
Thnx once again, you helped me a lot!
this works. I combined it with another animation.
type: custom:mushroom-template-card
icon: mdi:home
primary: Gradient
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.shape:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
--shape-animation: spin 1s infinite linear;
border-radius:50%;
animation: spin 2s ease infinite;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
1 Like
Does not getting an answer from anyone mean that it is not possible to get visual feedback when pressing the button on my cover card? Or is there something wrong with my question?
Cool, it works thanks a lot. Step closer in building some nice Hue App Security look a like lovelaces 
Hi all, sorry if my question is redundant (I tried to search in this topic and pt1 and didn’t see any similar question comes up). Is there any way to replicate this UI Lovelace Minimalist card for rooms that include the light toggle like this? Tya!
Edited: Nvm I found a similar post in the pt1 and made some modifications for sizes and added animation, here is the code if anyone needs it:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: |
{% if is_state('light.kitchen_dimmer', 'on') %}
amber
{% else %}
#03A9F4
{% endif %}
primary: Kitchen
secondary: '{{ states(''sensor.living_room_temperature'')|round(2) }}°f'
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/kitchen
double_tap_action:
action: toggle
hold_action:
action: none
badge_icon: |
#{% if is_state('light.kitchen_dimmer', 'on') %}
# mdi:motion-outline
#{% else %}
# mdi:lightbulb
#{% endif %}
badge_color: |
#{% if is_state('light.kitchen_dimmer', 'on') %}
# blue
#{% else %}
# grey
#{% endif %}
fill_container: false
multiline_secondary: false
entity: light.kitchen_dimmer
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -45px; /* Adjusted for new height */
left: -140px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -45px; /* Adjusted for new height */
left: -140px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -40px;
top: 40px; /* Adjusted for new height */
}
.: |
:host {
--mush-icon-size: 130px; /* Adjusted for new height */
}
ha-card {
background: none;
}
ha-state-icon {
animation: steam 2s ease-in-out infinite;
}
@keyframes steam {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: inset(39% 0 0 0); }
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
style: |
mushroom-badge-icon {
left: 135px;
top: 8px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-height: 5px;
--chip-padding: 5em
}
- type: light
entity: light.kitchen_dimmer
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-icon-size: 20px;
--chip-font-size: 0;
}
- type: template
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-height: 54px;
}
- type: entity
entity: sensor.mudroom_5_1min
icon: mdi:lightning-bolt
alignment: end
card_mod:
style:
.: |
ha-card {
width: 40%;
margin-left: 59%;
top: -160px;
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-icon-size: 18px;
}
card_mod:
style: |
ha-card {
height: 150px;
margin-left: auto;
margin-right: auto;
border-style: none;
box-shadow: none;
margin-top: auto;
}
4 Likes
Can someone help me fix the border of this card please?
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.dreamscreen
show_brightness_control: true
collapsible_controls: true
show_color_control: true
icon: mdi:television-ambient-light
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.dreamscreen_mode_video
icon_color: red
icon: mdi:movie
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-red), 0.2)' if is_state('light.dreamscreen', 'on') else 'rgba(var(--rgb-disabled), 0.1)' }};
}
- type: entity
entity: switch.dreamscreen_mode_music
icon_color: green
icon: mdi:waveform
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-green), 0.2)' if is_state('light.dreamscreen', 'on') else 'rgba(var(--rgb-disabled), 0.1)' }};
}
- type: entity
entity: switch.dreamscreen_mode_ambient
icon_color: blue
icon: mdi:lightbulb
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-blue), 0.2)' if is_state('light.dreamscreen', 'on') else 'rgba(var(--rgb-disabled), 0.1)' }};
}
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;
}
Can you tell me how to change the size of the chips? And can you tell me if I did something wrong with the grid style?
type: custom:button-card
name: Гостиная
icon: mdi:sofa
custom_fields:
temp: >
[[[ return states['sensor.klimat_vannaia_temperature'].state + '°C' ]]]
hum: >
[[[ return states['sensor.klimat_vannaia_humidity'].state + '%' ]]]
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l2
card mod:
style: >
ha-card {
--chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l2', 'on')
padding: 5px!important:
border-radius: 100px|!important;
}
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l1
card mod:
style: >
ha-card {
--chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l1', 'on')
padding: 5px!important:
border-radius: 100px|!important;
- width: 170px
- height: 170px
}
styles:
grid:
- grid-template-areas: '"n btn1" "temp btn1" "hum btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- position: absolute
- font-size: 20px
- opacity: '0.7'
- left: 24px
hum:
- position: absolute
- font-size: 24px
- opacity: '0.7'
- left: 140px
btn1:
- position: absolute
- justify-content: end
- padding-left: 6px
- top: 140px
- width: 200px
- height: 10px
name:
- justify-self: start
- align-self: start
- font-size: 45px
- font-weight: 450
- color: black
img_cell:
- justify-content: start
- position: absolute
- width: 170px
- height: 170px
- right: -18px
- top: -18px
- margin: 0 0 -20px -20px
- background: '#FFC47E'
- border-radius: 500px
icon:
- position: relative
- width: 90px
- color: black
- opacity: '0.5'
you can use these to change chip size, font , etc
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-icon-size: 30px;
--chip-height: 50px;
--chip-font-size: 50px;
}
chips:
- type: entity
entity: person.xxxx
from the picture it looks like the chips are bigger
it works fine my end.
type: custom:button-card
name: Гостиная
icon: mdi:sofa
custom_fields:
temp: |
[[[ return states['sensor.landing_temperature'].state + '°C' ]]]
hum: |
[[[ return states['sensor.landing_humidity'].state + '%' ]]]
btn1:
card:
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-icon-size: 50px;
}
chips:
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l2
card mod:
style: >
ha-card { --chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l2', 'on') padding: 5px!important:
border-radius: 100px|!important; }
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l1
card mod:
style: >
ha-card { --chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l1', 'on') padding: 5px!important:
border-radius: 100px|!important; - width: 170px - height: 170px }
styles:
grid:
- grid-template-areas: '"n btn1" "temp btn1" "hum btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- position: absolute
- font-size: 20px
- opacity: '0.7'
- left: 24px
hum:
- position: absolute
- font-size: 24px
- opacity: '0.7'
- left: 140px
btn1:
- position: absolute
- justify-content: end
- padding-left: 6px
- top: 140px
- width: 200px
- height: 10px
name:
- justify-self: start
- align-self: start
- font-size: 45px
- font-weight: 450
- color: black
img_cell:
- justify-content: start
- position: absolute
- width: 170px
- height: 170px
- right: '-18px'
- top: '-18px'
- margin: 0 0 -20px -20px
- background: '#FFC47E'
- border-radius: 500px
icon:
- position: relative
- width: 90px
- color: black
- opacity: '0.5'
instead of --chip-width:
use
width: 240px !important ;
Can someone have a look and tell me if this is formatted correctly? This is a section from a mushroom-template-card. The code works, but as you can see, the editor doesn’t seem to like it, and when I save the code, I get a warning that “comments will be deleted”, so the editor is seeing the hex color codes as comments, but they aren’t actually deleted and they do work as expected on the dashboard. I’ve tried a couple of different things formatting wise, but they all result in no color changes. Basically, should this be different?
you need single quote " ’ " around color hex codes eg. ‘#00d0b1’
I would swear I tried that and fixed the comment issue, but broke the color change. I’ve just gone back and done it though and its working now, so I must not have done it properly the first time. Thank you.
Is there a way to use another entity’s image as an icon in a mushroom chips card?
chip:
type: entity
entity: sensor.personiphoneble
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
name: Person
content_info: state
icon: person.person
Update: Best way I found to do this is to use the chips card then template option then rely on referencing the state or image indirectly.
Dear Community,
it’s possible add a button/switch in right corner???
my goal is turn off and turn on the NAS.
my code is:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#nas'
name: Network Area Storage
- type: grid
columns: 1
square: false
cards:
- type: custom:bubble-card
card_type: separator
name: Nas
icon: mdi:nas
styles: |
.separator-container div:last-child {
opaticy: 1|important;
}
- type: custom:vertical-stack-in-card
mode: horizontal
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.nas007_ping
color: '#14ff8d'
hours_to_show: 8
points_per_hour: 8
hour24: true
line_width: 1
bar_spacing: 10
update_interval: 30
height: 70
aggregate_func: avg
group: true
animate: true
show:
labels: false
fill: gradient
state: false
name: false
icon: false
card_mod:
style: |
ha-card {
border-radius: 8px;
margin-bottom: -60px;
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: Nas007
secondary: >-
{% set
attr=state_attr('binary_sensor.nas007_stploop_com','round_trip_time_avg')
%} {% set state=states('binary_sensor.nas007_stploop_com',
'round_trip_time_avg') %} {% if attr==None%}
🟥 0 ms - Down
{% elif attr>10%}
🟨 {{ state_attr('binary_sensor.nas007_stploop_com', 'round_trip_time_avg') }} ms - Raggiungibile
{% elif attr<10%}
🟩 {{ state_attr('binary_sensor.nas007_stploop_com', 'round_trip_time_avg') }} ms - Raggiungibile
{% endif %}
picture: /local/loghi/zyxel.png
tap_action:
action: navigate
navigation_path: '#nas007'
card_mod:
style: |
ha-card {
--icon-size: 35px;
--icon-border-radius: 0;
height: !important;
background: transparent;
}
Let me know
Thanks!
Does anyone have code for this Area card? thanks
- type: horizontal-stack
cards:
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.eetplaats
icon: mdi:air-conditioner
icon_color: X,x,x
I added the chips card and changed the icon color to the same color as the background. Because I want to reserve the empty space to have a cleaner nicer stack in card.
Is there a better way to get that empty space ?
So to make it short… I dont want the airco icon, but still want the grey space around it …