How did you get the badge icon to show up on your chip?
Amazing thankyou!! Works perfectly
Any way to create a „edit dashboard“ button with mushroom chips?
Or how do you edit the dashboard if you hide the header bar?
is there another way to remove padding around mushroom cards besides using the card_mod? After updating to mushroom v 4.x the padding variable in the card_mod is no longer respected when opening dashboards from my android phone (it does still work fine when opening directly in browser on laptop).
Create a Action button with Tap action set as ‘URL’, and enter your dashboard url as the path, with the following string on the end:
?edit=1
Keep in mind, this will reload the page.
Thats what I did, butIt wont reload the page. And then, there is no option (button) to Finish editing. So yeah, maybe I should let it stay until there are no other options.
I’m assuming you’re using kiosk-mode? Maybe, you could just temporarily disable km using the strings here in your Chip card, or create an input_boolean, then toggle it when required.
Personally, I find it pointless editing on mobile, hence why I enabled it for desktop only.
Hi, I found an old post with a template for a collapsible card with hourly weather forecast (Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #3086 by davidnestico), unfortunately I am getting some borders displayed so it doesn’t look so nice. Tried to hunt them down to mod the CSS but no luck, did anyone perhaps had the same problem and fixed it?
Thanks for the discussion, this got me started on a new dashboard 
hi guys, I hope you can help me. After updating Mushroom cards, my dashboard seems that zoom in. here I attach the screenshot of my dashboard and the relative code.
BEFORE:
AFTER:
Here the code of the first left card “Esterno”
- type: custom:mushroom-template-card
primary: null
secondary: Piano Terra
icon: null
layout: horizontal
tap_action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style: |
ha-card {
--card-primary-font-weight: normal;
--card-secondary-font-weight: normal;
--card-primary-font-size: 0px;
--card-secondary-font-size: 15px;
background-color: rgba(0,0,0,0);
--ha-card-border-width: 0;
}
:host {
margin-top: -15px !important;
margin-bottom: 15px !important;
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Esterno
secondary: >-
{{ states('sensor.salone_outside_temperature') |
round(0) }} °C
icon: mdi:flower
entity: light.gruppo_luci_esterno
tap_action:
action: navigate
navigation_path: luci-esterne
hold_action:
action: toggle
icon_color: yellow
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 90px;
height: 70px;
margin-left: -22px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.motion_portico_occupancy
state: 'on'
chip:
type: template
entity: binary_sensor.motion_portico_occupancy
tap_action:
action: none
icon_color: null
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: light.gruppo_luci_esterno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_esterno
tap_action:
action: toggle
icon_color: amber
icon: mdi:lightbulb
- type: template
entity: input_boolean.non_servo_a_nulla
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: macchina
hold_action:
action: none
icon: mdi:car-electric
alignment: end
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;;
--chip-background: none;
--chip-spacing: 0;
top: -10px;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.gruppo_luci_esterno', 'on') %}
background: rgba(255, 255, 0, 0.1);
{% endif %}
}
:host {
margin-top: -15px !important;
}
thank you in advance
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.helper_test
card_mod:
style: |
ha-card:after {
content: "1";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: red;
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
1 Like
Hi @rhysb ! Could you please help me with this issue? I copied your code posted a few years ago and really love it! I haven’t used my HA for a new months and recently when i logged back in i found there is a little gap between the above two cards. I can’t get it removed. Could you please take a look at it and help me out? Much appreciate!!
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: '{{ states(''sensor.upstairs_ac_temperature'')}}°C'
icon: mdi:bed-double
entity: light.master_bedroom_lights
tap_action:
action: navigate
navigation_path: master-bedroom
hold_action:
action: more-info
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.05);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
ha-card {
width: 240px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.bedroom_motions
icon_color: gray
icon: mdi:motion-sensor
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Motion Detected
content:
type: custom:auto-entities
show_empty: false
card:
type: entities
show_header_toggle: false
state_color: true
filter:
include:
- domain: binary_sensor
attributes:
device_class: motion
area: Master Bedroom
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude:
- entity_id: binary_sensor.garage_1_motion_reolink
- attributes:
device_class: motion
device_manufacturer: Browser Mod
sort:
method: last_changed
ignore_case: false
- type: template
entity: cover.bedroomshutters
icon: |-
{% if is_state(entity, 'open') %}
mdi:blinds-open
{% elif is_state(entity, 'opening') %}
mdi:blinds-open
{% else %}
mdi:roller-shade-closed
{% endif %}
content: '{{ (states(''cover.bedroomshutters'')) | capitalize}}'
icon_color: |-
{% if is_state(entity, 'closing') %}
gray
{% elif is_state(entity, 'open') %}
blue
{% elif is_state(entity, 'opening') %}
gray
{% else %}
#254c6f
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bathroom Shutters
card_mod:
style: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
justify-content: flex-end;
}
.content {
height: auto !important;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,1);
--mdc-dialog-min-height: 0%;
--mdc-dialog-max-height: 80%;
--mdc-dialog-min-width: 80%;
--mdc-dialog-max-width: 100%;
}
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: scene.powerview_hub_bedroom_open
content_info: name
name: Open
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.powerview_hub_bedroom_open
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:window-open
card_mod:
style: |
ha-card {
height: 22px !important; }
- type: entity
entity: scene.powerview_hub_bedroom_close
content_info: name
name: Close
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.powerview_hub_bedroom_close
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:blinds-horizontal-closed
card_mod:
style: |
ha-card {
height: 22px !important; }
- type: entity
entity: scene.powerview_hub_bedroom_both_75
content_info: name
name: Both 75%
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.powerview_hub_bedroom_both_75
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:blinds-horizontal
card_mod:
style: |
ha-card {
height: 22px !important; }
- type: entity
entity: scene.powerview_hub_bedroom_r_75
content_info: name
name: R 75%
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.powerview_hub_bedroom_r_75
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:blinds-horizontal
card_mod:
style: |
ha-card {
height: 22px !important; }
alignment: center
card_mod:
style: |
ha-card {
margin-top: 0px; }
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.bedroom_left
icon: mdi:roller-shade
layout: vertical
show_position_control: false
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
show_tilt_position_control: true
- type: custom:mushroom-cover-card
entity: cover.bedroom_right
icon: mdi:roller-shade
layout: vertical
show_position_control: false
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
show_tilt_position_control: true
card_mod:
style: |
ha-card {
margin-top: -10px !important;}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
--chip-icon-size: 22px;
margin-top: 0px;
margin-right: -0px;
animation: blink 2s linear infinite;
}
@keyframes blink {
40% {opacity: 0;}
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
margin-right: 5px;
{% if states('cover.bedroomshutters') == 'closed' %}
margin-top: 0px;
--chip-icon-size: 18px;
{% else %}
margin-top: 6px;
--chip-icon-size: 19px;
{% endif %}
}
.: |
mushroom-template-chip:nth-child(1) {
{% if states('binary_sensor.bedroom_motions') == 'off' %}
margin-right: 0px !important;
display: none !important;
{% else %}
{% endif %}
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -10px;
--chip-font-size: 11px;
margin-top: 5px;
}
alignment: end
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.master_bedroom_display_2
icon: mdi:speaker
icon_color: |
{% if is_state(entity, 'playing') %}
#266aa7
{% else %}
#999999
{% endif %}
tap_action:
action: more-info
- type: template
entity: media_player.bedroom_chromecast
icon: mdi:monitor
icon_color: |
{% if is_state(entity, 'on') %}
#266aa7
{% else %}
#999999
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bedroom TV
content:
type: glance
entities:
- entity: media_player.bedroom_tv
- entity: media_player.bedroom_chromecast
card_mod:
style:
mushroom-template-chip:nth-child(1)$: >
ha-state-icon { {% if
states('media_player.master_bedroom_display_2') == 'playing'
%}
--card-mod-icon: mdi:music;
--chip-icon-size: 22px;
margin-right: 9px;
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{% elif states('media_player.master_bedroom_display_2') ==
'idle' %}
margin-right: 6px;
--chip-icon-size: 22px;
{% elif states('media_player.master_bedroom_display_2') ==
'paused' %}
margin-right: 6px;
--chip-icon-size: 22px;
{% elif states('media_player.master_bedroom_display_2') ==
'off' %}
margin-right: 5px;
--chip-icon-size: 21px;
--card-mod-icon: mdi:speaker;
{% endif %} }
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('media_player.bedroom_tv') ==
'on' %}
animation: refresh 300ms linear infinite;
{% else %}
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-blue), 0.3) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.1) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-blue), 0.3) 100%); }
}
.: |
ha-card {
--chip-background: transparent !important;
--chip-font-size: 2px;
--chip-height: 46px;
--chip-spacing: -17px;
margin-top: -22px;
bottom: -10px;
}
alignment: end
card_mod:
style:
.: |
ha-card {
--chip-background: transparent !important;
--chip-font-size: 11px;
--chip-height: 38px;
--chip-spacing: -8px;
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.05);
}
card_mod:
style: |
ha-card {
height: 100px;
{% if is_state('light.master_bedroom_lights', 'on') %}
background: rgba(44, 165, 235, 0.05);
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.master_bedroom_light
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
icon: mdi:light-recessed
icon_color: |-
{% if is_state('light.master_bedroom_light', 'on') %}
blue
{% elif is_state('light.master_bedroom_light', 'off') %}
{% endif %}
content: Bedroom
card_mod:
style: |
ha-card {
background-color: rgba(249, 249, 249, 0.02) !important;
width: 50%;
height: 40px !important
}
- type: template
entity: light.master_bedroom_master_bath_light
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
icon: mdi:light-recessed
icon_color: |-
{% if is_state('light.master_bedroom_master_bath_light', 'on') %}
blue
{% elif is_state('light.master_bedroom_master_bath_light', 'off') %}
{% endif %}
content: Bath
card_mod:
style: |
ha-card {
background-color: rgba(249, 249, 249, 0.02) !important;
width: 85%;
height: 40px !important
}
- type: template
entity: light.master_bedroom_other_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bedroom Other Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.master_bedroom_other_lights
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: true
alignment: end
card_mod:
style: |
ha-card {
margin: -20px 8px 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_ceiling_light
name: Ceiling
icon: mdi:chandelier
layout: vertical
use_light_color: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: custom:mushroom-light-card
entity: light.bath_mirror_light
name: Bath Mirror
icon: mdi:mirror-rectangle
layout: vertical
use_light_color: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: custom:mushroom-light-card
entity: light.master_closet_light
name: Closet
icon: mdi:light-recessed
layout: vertical
use_light_color: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
blue
{% else %}
none
{% endif %}
content: Others
icon: mdi:lightbulb-group
card_mod:
style: |
ha-card {
background-color: rgba(249, 249, 249, 0.02) !important;
width: 85%;
height: 40px !important;
}
- type: template
entity: switch.master_bedroom_switches
icon_color: |-
{% if is_state('switch.master_bedroom_switches', 'on') %}
blue
{% elif is_state('switch.master_bedroom_switches', 'off') %}
{% endif %}
icon: mdi:power-socket-uk
content: Outlets
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bedroom Outlets
content:
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.master_bedroom_switches
icon: mdi:power-socket-au
icon_color: >-
{% if is_state('switch.master_bedroom_switches',
'on') %} blue {% else %} none
{% endif %}
content: '{{states(''switch.master_bedroom_switches'')}}'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
margin-top: 10px;
margin-right: 20px;
height: 28px !important;
background-color: transparent !important;
}
alignment: end
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: switch.vics_cellphone_socket_1
icon: mdi:power-socket-au
primary_info: name
name: Victoria Cellphone
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: switch.jamess_cellphone_socket_1
icon: mdi:power-socket-au
primary_info: name
name: James Cellphone
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: transparent !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: switch.tp_link_smart_plug_00fc_prep_kitchen_1
icon: mdi:power-socket-au
primary_info: name
name: Prep Outlet 1
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: switch.tp_link_smart_plug_00fc_prep_kitchen_2
icon: mdi:power-socket-au
primary_info: name
name: Prep Outlet 2
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: transparent !important;
}
card_mod:
style: |
ha-card {
background-color: transparent !important;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
/* Set padding of card */
margin-top: -22px;
transition: all 0s;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
}
card_mod:
style: |
ha-card {
background-color: rgba(249, 249, 249, 0.02) !important;
width: 85%;
height: 40px !important
}
alignment: center
card_mod:
style: |
ha-card {
margin-top: -40px;
margin-bottom: auto;
--chip-spacing: 2px;
}
card_mod:
style: |
ha-card {
height: 100px;
{% if is_state('light.master_bedroom_lights', 'on') %}
background: rgba44, 165, 235, 0.05);
{% endif %}
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 60%, var(--primary-background-color)) !important;
border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
}
Hi lads, can anyone confirm (if this is at all possible)
I’d like the icon to be behind the text and larger / a bit opaque?
I’ve tried this yaml:
but my icon just keeps being above the text not in the background…
type: custom:mushroom-template-card
primary: PAKTIJK
secondary: ''
icon: mdi:home
entity: light.lichten_praktijk
layout_options:
grid_columns: 2
grid_rows: 3
layout: vertical
fill_container: true
card_mod:
style: |
:host {
--ha-card-background: {% if is_state('light.lichten_praktijk', 'on') %} var(--blue-grey-color) {% else %} var(--card-background-color) {% endif %};
}
.mushroom-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px; /* Adjust the size as needed */
z-index: 1;
opacity: 0.2; /* Adjust the transparency as needed */
}
.mushroom-primary, .mushroom-secondary {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
}
like this ?
type: custom:mushroom-template-card
primary: ' '
icon: mdi:home
entity: light.lichten_praktijk
layout_options:
grid_columns: 2
grid_rows: 3
layout: vertical
fill_container: true
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: 'PAKTIJK';
position: absolute;
display: flex;
left: 44%;
top: 30%;
font-size: 15px;
}
Is there a way to force the text in the center both horizontally and vertically
This might be incredibly obvious, but why isn’t there a “Icon tap behavior” option? I’m used to toggling a device by tapping the icon and getting more info by tapping the text next to the icon. I’m trying work around this by using the hold behavior, but this does not work so well for me on my ipad.
Hello all! I have this component on my dashboard:
I tried to add a border to my blinds with percentage and it worked, but the problem is that the icon dimention is smaller than the others; I tried to modify the height and width of percentage, but it’s impossible to center the icon.
How can I resolve that?
Thank you all!
This is my code:
type: custom:button-card
name: Soggiorno
icon: mdi:sofa
show_state: true
tap_action:
action: navigate
navigation_path: '#soggiorno'
custom_fields:
temp: >
[[[ return "T: " + states['sensor.temphum_soggiorno_temperature'].state + '
°C' ]]]
hum: >
[[[ return "H: " + states['sensor.temphum_soggiorno_humidity'].state + ' %'
]]]
mold: >
[[[ return "M: " + states['sensor.indicatore_muffa_soggiorno'].state + ' %'
]]]
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.navigate
data:
path: /lovelace/telecomandosony
icon: mdi:television
entity: media_player.sony_kd_55x80k
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(79, 117, 255, 1)' if is_state('media_player.sony_kd_55x80k', 'on') else 'rgba(79, 117, 255, 0.5)' }};
padding: 5px !important;
border-radius: 100px !important;
- type: template
tap_action:
action: toggle
hold: detail
icon: mdi:globe-light
entity: light.luce_soggiorno
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(34, 151, 153, 1)' if is_state('light.luce_soggiorno', 'on') else 'rgba(34, 151, 153, 0.5)' }};
padding: 5px !important;
border-radius: 100px !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:lamp
entity: light.lampada_soggiorno
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255, 200, 100, 1)' if is_state('light.lampada_soggiorno', 'on') else 'rgba(255, 200, 100, 0.5)' }};
padding: 5px !important;
border-radius: 100px !important;
}
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:table-furniture
entity: light.luce_tavolo
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(199, 37, 62, 1)' if is_state('light.luce_tavolo', 'on') else 'rgba(199, 37, 62, 0.5)' }};
padding: 5px !important;
border-radius: 100px !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:light-recessed
entity: light.luce_cucina
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(232, 92, 13, 1)' if is_state('light.luce_cucina', 'on') else 'rgba(232, 92, 13, 0.5)' }};
padding: 5px !important;
border-radius: 100px !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:wall-sconce-flat
entity: light.luce_penisola
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(130, 17, 49, 1)' if is_state('light.luce_penisola', 'on') else 'rgba(130, 17, 49, 0.5)' }};
padding: 5px !important;
border-radius: 100px !important;
}
btn3:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.finestra_soggiorno
tap_action:
action: toggle
icon: mdi:door-sliding
card_mod:
style: |
ha-card: {
padding: 5px !important;
}
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-white)) {{ (state_attr('cover.finestra_cucina','current_position')) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
transform: rotateY(180deg);
}
::slotted(ha-icon) {
margin-right: 0.45em !important;
z-index: 1;
}
- type: template
entity: cover.finestra_soggiorno
tap_action:
action: toggle
icon: mdi:blinds-horizontal
card_mod:
style: |
ha-card: {
padding: 5px !important;
}
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-white)) {{ (state_attr('cover.finestra_cucina','current_position')) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
transform: rotateY(180deg);
}
::slotted(ha-icon) {
margin-right: 0.45em !important;
z-index: 1;
}
- type: template
entity: climate.midea_ac_145135534890527
tap_action:
action: toggle
icon: |-
{% if is_state('climate.midea_ac_145135534890527', 'cool') %}
mdi:snowflake
{% elif is_state('climate.midea_ac_145135534890527', 'heat') %}
mdi:fire
{% elif is_state('climate.midea_ac_145135534890527', 'dry') %}
mdi:water-percent
{% else %}
mdi:air-conditioner
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state('climate.midea_ac_145135534890527', 'cool') %}
--chip-background: {{ 'rgb(79, 117, 255)' }};
{% elif is_state('climate.midea_ac_145135534890527', 'heat') %}
--chip-background: {{ 'rgb(255, 136, 91)' }};
{% elif is_state('climate.midea_ac_145135534890527', 'dry') %}
--chip-background: {{ 'rgb(250, 188, 63)' }};
{% else %}
--chip-background: {{ 'rgb(30, 32, 30)' }};
{% endif %}
padding: 5px !important;
border-radius: 100px !important;
}
styles:
grid:
- grid-template-areas: >-
"n btn1 btn2 btn3" "temp btn1 btn2 btn3" "hum btn1 btn2 btn3" "mold btn1
btn2 btn3" "i btn1 btn2 btn3"
- grid-template-columns: 1fr min-content min-content min-content
- grid-template-rows: min-content min-content min-content min-content 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: rgb(120, 183, 208)
- border-radius: 500px
icon:
- position: relative
- width: 60px
- color: black
- opacity: '0.6'
card:
- padding: 15px
- height: 190px
custom_fields:
temp:
- padding-top: 10px
- justify-self: start
- font-size: 13px
- opacity: 0.7
hum:
- justify-self: start
- font-size: 13px
- opacity: 0.7
mold:
- justify-self: start
- font-size: 13px
- opacity: 0.7
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: 10px
btn3:
- justify-content: end
- align-self: start
- padding-left: 10px
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
1 Like
good morning I’ve been going crazy for days, I have this code for my air conditioner everything works but I don’t see the ventilation function.
How come???
I use broadlink and smartIR could there be any problem in configuring these two???
type: custom:mushroom-climate-card
entity: climate.cameretta_ac
hvac_modes:
- heat_cool
- heat
- cool
- fan_only
- dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Hi lads,
Small question if anyone knows if this has been done by someone before:
I have a mushroom “play / pause” button made from template card.
The icon color and icon itself change when the media player starts playing.
When pressing the button it can take up to 3 seconds for the music to start playing.
Since the button is ‘in limbo’ at that point people have the tendency to tap the button again.
Is there a way to ad a ‘loading’ icon as intermediate? For x amount of seconds or from the tap until the new state…
Hi to all,
Could you please help me? I would like to change the icon color based on other helper status. It is an automation for vacuum and I would like to see the actually state of helper.
Change the icon-color is working on the template-card but not on the entity. I tried the style: … version also but that also not work.
type: custom:mushroom-entity-card
entity: input_datetime.gizike_idore
icon_color: |-
{% if is_state('input_boolean.gizike_automata_porszivozas','on') %}
green
{% else %}
red
{% endif %}
hold_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.gizike_automata_porszivozas
at now:
and I would like to see:
Many Thanks.
can’t use templates in an entity card, would have to use a mushroom template card or card_mod
1 Like