That worked! Excellent! Thanks for your help! 
This is how youâd apply the logic you used in a button-card in a Mushroom Template Card or a Mushroom-Chips card.
An easier way would be to create a cover group with these entities in them. It would reduce your coding significantly.
type: custom:mushroom-template-card
icon: |-
{% set t1 = states('cover.persiana_cozinha') %}
{% set t2 = states('cover.persiana_escritorio') %}
{% set t3 = states('cover.persiana_quarto_camila') %}
{% set t4 = states('cover.persiana_quarto_j_s') %}
{% set t5 = states('cover.persiana_quarto_matilde') %}
{% set t6 = states('cover.persiana_quarto_sonia') %}
{% set t7 = states('cover.persiana_sala_eside') %}
{% set t8 = states('cover.persiana_sala_lside') %}
{%if (t1 == 'open' or t2 >= 'open' or t3 >= 'open'or t4 >= 'open' or t5 >= 'open' or t6 >= 'open' or t7 >= 'open' or t8 >= 'open') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{% set t1 = states('cover.persiana_cozinha') %}
{% set t2 = states('cover.persiana_escritorio') %}
{% set t3 = states('cover.persiana_quarto_camila') %}
{% set t4 = states('cover.persiana_quarto_j_s') %}
{% set t5 = states('cover.persiana_quarto_matilde') %}
{% set t6 = states('cover.persiana_quarto_sonia') %}
{% set t7 = states('cover.persiana_sala_eside') %}
{% set t8 = states('cover.persiana_sala_lside') %}
{%if (t1 == 'open' or t2 >= 'open' or t3 >= 'open'or t4 >= 'open' or t5 >= 'open' or t6 >= 'open' or t7 >= 'open' or t8 >= 'open') %}
green
{% else %}
red
{% endif %}
1 Like
Thanks for the support.
Now iâm strugling on how to integrate in here:
As i can see i cant only change the - type: template by this one.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:window-shutter
content: Persianas
card_mod:
style: |
ha-card {
--chip-background: rgb(0, 0, 0) !important;
--chip-height: 80px !important;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Persianas
style: |
--popup-min-width: 1000px;
--popup-border-radius: 28px;
target: null
content:
type: vertical-stack
cards:
Any advise?
Thanks
Are you talking about editing multiple chips? I donât quite understand what you are looking to change
Like this?
or like this
I have this card:
That when i click it it opens this:
And i have this code:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:window-shutter
content: Persianas
card_mod:
style: |
ha-card {
--chip-background: rgb(0, 0, 0) !important;
--chip-height: 80px !important;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Persianas
style: |
--popup-min-width: 1000px;
--popup-border-radius: 28px;
target: null
content:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Acçþes grupo
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.abrir_persianas_diario
name: Abertura diĂĄria
- type: custom:mushroom-light-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: input_boolean.fechar_persianas_saida_casa
name: Fecho saĂda casa
........
And i want that the icon that i have in here:
Changes with the code you sent, for me to know only by the icon state if i have shutters open or if all are closed.
My doubt is how to insert your code into mine to change the icon.
Thanks
Hi,
With a mushroom-template-card, is there a way to force the heigh of the boxes?
I have the following happening when there is no text in the secondary element:
Here is the code behind:
- type: custom:mod-card
card_mod:
#class: content
style: |
ha-card {
background: none;
border-width: 0;
box-shadow: none;
--mush-icon-size: 30px;
--mush-card-secondary-font-size: 11px;
margin-left: 10px;
margin-right: 10px;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Salle de bain
secondary: "{{states('sensor.temphum_sdb_temperature') }}°C -
{{states('sensor.thermostat_sdb_mode') }} -
{{states('sensor.thermostat_sdb_requested_temp')}}°C-
{{states('sensor.temphum_sdb_humidity')}}%"
icon: mdi:shower
icon_color: ""
tap_action: !include /config/popup/sdb.yaml
double_tap_action:
action: none
hold_action:
action: none
- type: custom:mushroom-template-card #!TODO
primary: Dressing
secondary: ""
icon: mdi:hanger
icon_color: |-
{% if is_state('light.lampe_bureau_grenier', 'on') %}
red
{%endif%}
entity: light.lampe_bureau_grenier
tap_action: !include /config/popup/grenier.yaml
hold_action:
action: toggle
double_tap_action:
action: none
Many thanks.
Has anyone tested mushroom cards in the new sections UI. No styling seems to take effect for me.
âEdit, duh I needed Card-Mod installed 
Hi there, I have an odd problem, Iâm sure this config used to work in my lovelace UI yaml but no longer seems to, since I moved to the visual editor - could anyone advise how to make the font fill the box, currently both the box and font are bigger but the font is being contained in a smaller area for some reason:
- type: custom:mushroom-entity-card
entity: sensor.smart_meter_electricity_power
name: Live Electricity Consumption (W)
primary_info: state
icon_color: red
secondary_info: name
fill_container: true
icon_type: icon
card_mod:
style: |
ha-card {
height: 150px !important;
--card-primary-font-size: 3rem;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
}
1 Like
Add --card-primary-line-height: 3rem; That should resolve the issue.
type: custom:mushroom-entity-card
entity: sensor.smart_meter_electricity_power
name: Live Electricity Consumption (W)
primary_info: state
icon_color: red
secondary_info: name
fill_container: true
icon_type: icon
card_mod:
style: |
ha-card {
height: 150px !important;
--card-primary-font-size: 3rem;
--card-primary-line-height: 3rem;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
}
1 Like
Have you tried the two cards in single card without card-mod? They line up fine so itâs a mod setting.
Whatâs above it in the full card?
If you add another card-mod on the Dressing card you can control the height with height:
- type: custom:mushroom-template-card
primary: Dressing
secondary: ''
icon: mdi:hanger
icon_color: red
entity: light.pc_spot
card_mod:
style: |
ha-card {
height:80px !important;
}
Thankyou, worked a treat!
Hello, how can I add a second option here, when the icon is displayed.
It should also be displayed when it is âunavailableâ
- type: template
entity: binary_sensor.fenster_garage1
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_garage1', 'on') %}
mdi:garage-open-variant
{% elif is_state('binary_sensor.fenster_garage1', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:garage-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_garage1', 'on') %}
orange
{% elif is_state('binary_sensor.fenster_garage1', 'unavailable') %}
blue
{% else %}
black
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: transparent;
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.fenster_garage1', 'on') %}
display: none !important;
{% endif %}
}
This is making the icon disappear when the sensor isnât on
{% if not is_state('binary_sensor.fenster_garage1', 'on') %}
display: none !important;
{% endif %}
}
Just delete it and see if that is what you are looking for
card_mod:
style: |
ha-card {
--chip-background: transparent;
background: none !important;
border: none !important;
}
Yes, that is correct. But now the icon should also be displayed when the senso is âunavailableâ. So to speak, it should only disappear when the sensor is âoffâ
I thought it would work that way, but something is still not working.
{% if not is_state('binary_sensor.fenster_garage1', 'off') %}
display: none !important;
{% endif %}
}
Just change your logic to only target the âoffâ state.
card_mod:
style: |
ha-card {
--chip-background: transparent;
background: none !important;
border: none !important;
{% if is_state('binary_sensor.fenster_garage1', 'off') %}
display: none !important;
{% endif %}
}
Of course - why didnât I think of that myself?
THANK YOU
Iâm trying to reduce the vertical gap between cards, but canât figure out. Any ideas please? thanks
square: true
type: grid
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Family
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.1
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.2
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.3
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
columns: 2
Hello, can I also get this view in such a way that the hidden (switched off) entities
entities that cause the space between them are changed so that only the visible (switched on) entities
so that only the visible (switched on) entities are displayed next to each other.
The PV button should therefore be directly next to the BORD BUTTON
Or is there a simpler, better option here?
square: false
type: grid
columns: 15
cards:
- type: custom:mushroom-template-card
secondary: Briefk
icon: mdi:mailbox-open
icon_color: light-blue
layout: vertical
entity: input_boolean.briefkasten
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 7px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('input_boolean.briefkasten', 'off') %}
display: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: HausTĂź
icon: mdi:door-open
icon_color: red
layout: vertical
entity: binary_sensor.fenster_door
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 7px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('binary_sensor.fenster_door', 'off') %}
display: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: Gara1
icon: mdi:garage-open-variant
icon_color: red
layout: vertical
entity: binary_sensor.fenster_garage1
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 7px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('binary_sensor.fenster_garage1', 'off') %}
display: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: PV
icon: mdi:solar-power-variant
icon_color: orange
layout: vertical
entity: switch.pv_solar
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 7px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('switch.pv_solar', 'off') %}
display: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: Sleep
icon: mdi:bed-double
icon_color: blue
layout: vertical
entity: group.schlafen_all_helper
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 7px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('group.schlafen_all_helper', 'off') %}
display: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: Board
icon: mdi:sofa
icon_color: orange
layout: vertical
entity: switch.wz_led_board_power
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 7px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('switch.wz_led_board_power', 'off') %}
display: none !important;
{% endif %}
}