You had two vertical-stack-in-cards and bogus mushroom chip so I remove an unnecessary ones. Serveral bad indetions and a few missing car mod where style was used
2 Likes
Thank you.
Hi, thanks for the help. I can make my 2 buttons separately but I canât do it in the same template.
In the meantime, I made a horizontal stack but that is not the purpose of mushroom chips card
The first :
type: custom:mushroom-chips-card
chips:
- type: template
content: >-
Aujourd'hui {{ states('sensor.rte_tempo_couleur_actuelle') }} restant {{
states('sensor.jours_' +
states('sensor.rte_tempo_couleur_actuelle').lower() + '_restants') }}
{% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
{% if tempo == 'Bleu' %}
{% elif tempo == 'Blanc' %}
{% elif tempo =='Rouge' %}
{% else %} Indéterminé
{% endif %}
entity: sensor.rte_tempo_prochaine_couleur
card_mod:
style: |
ha-card {
--chip-background: {% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
{% if tempo == 'Bleu' %} DodgerBlue
{% elif tempo == 'Blanc' %} whitesmoke
{% elif tempo == 'Rouge' %} red
{% endif %};
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: '{{ states("input_number.prix_achat_hp_" + states("sensor.rte_tempo_couleur_actuelle").lower()) }} | {{ states("input_number.prix_achat_hc_" + states("sensor.rte_tempo_couleur_actuelle").lower()) }} âŹ/kwh';
display: flex;
padding-top: 0.3em;
}
The second :
type: custom:mushroom-chips-card
chips:
- type: template
content: >-
Demain {{ states('sensor.rte_tempo_prochaine_couleur') }} restant {{
states('sensor.jours_' +
states('sensor.rte_tempo_prochaine_couleur').lower() + '_restants') }}
{% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
{% if tempo == 'Bleu' %}
{% elif tempo == 'Blanc' %}
{% elif tempo =='Rouge' %}
{% else %} Indéterminé
{% endif %}
entity: sensor.rte_tempo_prochaine_couleur
card_mod:
style: |
ha-card {
--chip-background: {% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
{% if tempo == 'Bleu' %} DodgerBlue
{% elif tempo == 'Blanc' %} whitesmoke
{% elif tempo == 'Rouge' %} red
{% endif %};
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: '{{ states("input_number.prix_achat_hp_" + states("sensor.rte_tempo_prochaine_couleur").lower()) }} | {{ states("input_number.prix_achat_hc_" + states("sensor.rte_tempo_prochaine_couleur").lower()) }} âŹ/kwh';
display: flex;
padding-top: 0.3em;
}
Put them together like this:
type: custom:mushroom-chips-card
chips:
- type: template
content: >-
Aujourd'hui {{ states('sensor.rte_tempo_couleur_actuelle') }} restant {{
states('sensor.jours_' +
states('sensor.rte_tempo_couleur_actuelle').lower() + '_restants') }}
{% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
{% if tempo == 'Bleu' %}
{% elif tempo == 'Blanc' %}
{% elif tempo =='Rouge' %}
{% else %} Indéterminé
{% endif %}
entity: sensor.rte_tempo_prochaine_couleur
card_mod:
style: |
ha-card {
--chip-background: {% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
{% if tempo == 'Bleu' %} DodgerBlue
{% elif tempo == 'Blanc' %} whitesmoke
{% elif tempo == 'Rouge' %} red
{% endif %};
}
- type: template
content: >-
Demain {{ states('sensor.rte_tempo_prochaine_couleur') }} restant {{
states('sensor.jours_' +
states('sensor.rte_tempo_prochaine_couleur').lower() + '_restants') }}
{% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
{% if tempo == 'Bleu' %}
{% elif tempo == 'Blanc' %}
{% elif tempo =='Rouge' %}
{% else %} Indéterminé
{% endif %}
entity: sensor.rte_tempo_prochaine_couleur
card_mod:
style: |
ha-card {
--chip-background: {% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
{% if tempo == 'Bleu' %} DodgerBlue
{% elif tempo == 'Blanc' %} whitesmoke
{% elif tempo == 'Rouge' %} red
{% endif %};
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: '{{ states("input_number.prix_achat_hp_" + states("sensor.rte_tempo_couleur_actuelle").lower()) }} | {{ states("input_number.prix_achat_hc_" + states("sensor.rte_tempo_couleur_actuelle").lower()) }} âŹ/kwh';
display: flex;
padding-top: 0.3em;
}
mushroom-template-chip:nth-child(2)$: |
span:after {
content: '{{ states("input_number.prix_achat_hp_" + states("sensor.rte_tempo_prochaine_couleur").lower()) }} | {{ states("input_number.prix_achat_hc_" + states("sensor.rte_tempo_prochaine_couleur").lower()) }} âŹ/kwh';
display: flex;
padding-top: 0.3em;
}
nth-child refers to the chip number that you are applying it to. So you need to update this. You cant have 2 nth-child(1) for example.
1 Like
I understand like your explanation
mushroom-template-chip:nth-child(1)$
Thanks
Amazing that fixed it. Thanks a lot
Hey Guys, maybe someone has an idea:
First of all, iâm very new to HA, but i try to work my way trough.
I tried to use those beautiful Mushroom Cards with fold-entity-row and a restriction card:
That works so far: See yaml
I was able to set up vertical and horizontal stacks under the custom restriction card, (see section âToreâ)
but im unable to do so unter section âLichtâ and or âSteckdosenâ.
Anybody an idea how to implement horizontal stacks in the âLichtâ section?
Probably just a formatting Error 
type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: Licht
entities:
- type: custom:mushroom-light-card
entity: light.dachkasten_front
secondary_info: state
show_brightness_control: true
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:mushroom-light-card
entity: light.dachkasten_seite
secondary_info: state
show_brightness_control: true
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:mushroom-light-card
entity: light.dachkasten_terrasse
secondary_info: state
show_brightness_control: true
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:mushroom-light-card
entity: light.gartenhaus_deckenlicht
- type: custom:mushroom-light-card
entity: light.einfahrtsleuchten_bewegung
- type: custom:mushroom-light-card
entity: light.einfahrtsleuchten_dauer
- type: custom:mushroom-light-card
entity: light.gartenleuchten_bewegung
- type: custom:mushroom-light-card
entity: light.gartenleuchten_dauer
- type: custom:fold-entity-row
head:
type: section
label: Steckdosen
entities:
- type: custom:mushroom-entity-card
entity: switch.sd_terrasse
- type: custom:mushroom-entity-card
entity: switch.aussen_sd_einfahrt
- type: custom:mushroom-entity-card
entity: switch.aussen_sd_garten
- type: custom:mushroom-entity-card
entity: switch.gartenhaus_sd_400v
- type: custom:fold-entity-row
head:
type: section
label: Tore
entities:
- type: custom:restriction-card
restrictions:
confirm:
text: wirklich ausfĂŒhren?
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_button.garagentor_offnen
name: Garage Ăffnen
icon: mdi:garage-open-variant
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: binary_sensor.garagentor_geoffnet
icon: mdi:garage-open-variant
secondary_info: none
name: Garage Offen
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_button.garagentor_schliessen
name: Garage SchlieĂen
icon: mdi:garage-variant
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: binary_sensor.garagentor_geschlossen
icon: mdi:garage-variant
secondary_info: none
name: Garage Geschlossen
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_button.garagentor_luften
name: Garage LĂŒften
icon: mdi:garage-alert-variant
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: binary_sensor.garagentor_luften
icon: mdi:garage-alert-variant
secondary_info: none
name: Garage LĂŒften
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.einfahrtstor_l_geoffnet
icon: mdi:gate-open
secondary_info: none
name: Tor L offen
- type: custom:mushroom-entity-card
entity: binary_sensor.einfahrtstor_r_geoffnet
icon: mdi:gate-open
secondary_info: none
name: Tor R offen
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.einfahrtstor_l_geschlossen
icon: mdi:gate
secondary_info: none
name: Tor L geschlossen
- type: custom:mushroom-entity-card
entity: binary_sensor.einfahrtstor_r_geschlossen
icon: mdi:gate
secondary_info: none
name: Tor R geschlossen
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_button.einfahrtstor_offnen_schliessen
name: Tor Ăffnen/SchlieĂen
icon: mdi:gate-alert
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: input_button.einfahrtstor_gehtur
name: Tor GehtĂŒr
icon: mdi:gate-arrow-left
tap_action:
action: toggle
title: AuĂen
show_header_toggle: false
state_color: true
I keep trying to understand. And I canât center the text (at least the second line)
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
content: 1st Line example
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: 'center';
display: flex;
padding-top: 0.3em;
color: var(--secondary-text-color);
}
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: center;
width: 100%;
}
Can someone please direct me to the templates for these cards? I canât find them in any of my HA directories! (latest on RPi4B). Iâd like to edit some in yaml but canât find the templates to adapt anywhere. Thanks in advance!
do any one have a nice card for the washing/dryer?
You cant just add things like the mushroom-state-info. The chips dont have this element whatsoever. Take a look at the guide in my profile to help with simple styling.
To center the secondary we created with card mod do this:
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: '2nd Line';
display: flex;
padding-top: 0.3em;
color: var(--secondary-text-color);
justify-content: center;
}
If you also want to center the âprimaryâ do this:
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: '2nd Line Longer';
padding-top: 0.3em;
color: var(--secondary-text-color);
}
span {
display: flex;
flex-direction: column;
align-items: center;
}
2 Likes
Everything works very well.
I took the opportunity to make another card. How do you make the 3 cards the same size and on a single line?
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.consommation_jour
content: Conso jour
card_mod:
style: |
ha-card {
--chip-background: rgba(30, 144, 255);
--text-color: rgba(255, 255, 255);
}
- type: template
entity: sensor.consommation_mensuel
content: Conso mensuelle
card_mod:
style: |
ha-card {
--chip-background: rgba(245, 245, 245);
--text-color:
}
- type: template
entity: sensor.consommation_annuel
content: Conso annuelle
card_mod:
style: |
ha-card {
--chip-background: rgba(255, 0, 0);
--text-color: rgba(255, 255, 255);
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: '{{ states('sensor.consommation_jour')}} âŹ' ;
display: flex;
padding-top: 0.3em;
justify-content: center;
}
span {
display: flex;
flex-direction: column;
align-items: center;
}
mushroom-template-chip:nth-child(2)$: |
span:after {
content: '{{ states('sensor.consommation_mensuel')}} âŹ' ;
display: flex;
padding-top: 0.3em;
justify-content: center;
}
span {
display: flex;
flex-direction: column;
align-items: center;
}
mushroom-template-chip:nth-child(3)$: |
span:after {
content: '{{ states('sensor.consommation_annuel')}} âŹ' ;
display: flex;
padding-top: 0.3em;
justify-content: center;
}
span {
display: flex;
flex-direction: column;
align-items: center;
}
alignment: justify
Mushroom template card and mushroom chips card vertical alignment issue.
How do I move down the chips card(doors) to align with the template card(washing machine)?
Tried padding, margin etc using the dev tools, nothing seems working.
Stripped down version of the card below
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Utility
enity: switch.washing_machine_plug
icon: mdi:washing-machine
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: 70px;
--ha-card-border-width: 0px;
height: 66px;
margin-left: -23px !important;
margin-top: -3px !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch.washing_machine_plug
tap_action:
action: more-info
icon: mdi:washing-machine
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
--spacing:0px
}
:host {
padding: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.side_door_sensor_contact
tap_action:
action: more-info
content_info: none
card_mod:
style: |
ha-card {
--chip-border-width: 0;
--chip-background: none;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Thanks in advance.
Hi, I would like to know how to increase the size of the person card image.
this is the code I use:
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.ugo
layout: vertical
icon_type: entity-picture
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ugo_iphone_x_battery_level
content_info: none
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: entity
entity: sensor.ugo_iphone_x_connection_type
content_info: none
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
margin-top: -5%;
margin-bottom: 2%;
}
Add --icon-symbol-size: 40px; !important to your card_mod: settings and adjust the 40px size accordingly.
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--icon-symbol-size: 40px !important;
}
Anyone interested in helping me figure out an adaptation of this for a weather card? I canât get the size right for Today and Tomorrow. The main icon has too much of a gap below to the bottom chips area.
Code
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 200px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: >-
{{ state_attr( entity, 'temperature') }}{{ state_attr( entity,
'temperature_unit') }}
icon: mdi:weather-{{ states( entity) }}
entity: weather.home_2
tap_action:
action: more-info
hold_action:
action: none
icon_color: amber
fill_container: true
layout: horizontal
multiline_secondary: false
double_tap_action:
action: none
badge_icon: ''
secondary: Currently
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.025);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
margin-right: -88px !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.home_2
icon: >-
mdi:weather-{{ state_attr( entity, 'forecast').0.condition
}}
content: >-
Today: {{ state_attr( entity, 'forecast').0.temperature
}}{{ state_attr( entity, 'temperature_unit') }}/{{
state_attr( entity, 'forecast').0.templow }}{{ state_attr(
entity, 'temperature_unit') }}
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.home_2
icon: >-
mdi:weather-{{ state_attr( entity, 'forecast').1.condition
}}
content: >-
Tomorrow: {{ state_attr( entity, 'forecast').1.temperature
}}{{ state_attr( entity, 'temperature_unit') }}/{{
state_attr( entity, 'forecast').1.templow }}{{ state_attr(
entity, 'temperature_unit') }}
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
card_mod: style
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ as_timestamp(states('sensor.sun_next_setting')) |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-down
- type: template
content: >-
{{ as_timestamp(states('sensor.sun_next_rising')) |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-up
- type: spacer
- type: entity
entity: sensor.moon_phase
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
:host([dark-mode]) {
# background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
@Itsme6582 You should be able to just add a negative margin-top: setting to the card_mod: settings. Something like thisâŠ
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 200px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: >-
{{ state_attr( entity, 'temperature') }}{{ state_attr( entity,
'temperature_unit') }}
icon: mdi:weather-{{ states( entity) }}
entity: weather.home_2
tap_action:
action: more-info
hold_action:
action: none
icon_color: amber
fill_container: true
layout: horizontal
multiline_secondary: false
double_tap_action:
action: none
badge_icon: ''
secondary: Currently
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.025);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
margin-right: -88px !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.home_2
icon: >-
mdi:weather-{{ state_attr( entity, 'forecast').0.condition
}}
content: >-
Today: {{ state_attr( entity, 'forecast').0.temperature
}}{{ state_attr( entity, 'temperature_unit') }}/{{
state_attr( entity, 'forecast').0.templow }}{{ state_attr(
entity, 'temperature_unit') }}
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.home_2
icon: >-
mdi:weather-{{ state_attr( entity, 'forecast').1.condition
}}
content: >-
Tomorrow: {{ state_attr( entity, 'forecast').1.temperature
}}{{ state_attr( entity, 'temperature_unit') }}/{{
state_attr( entity, 'forecast').1.templow }}{{ state_attr(
entity, 'temperature_unit') }}
card_mod:
style: |
ha-card {
box-shadow: none !important;
margin-top: -15px !important;
}
card_mod: style
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ as_timestamp(states('sensor.sun_next_setting')) |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-down
- type: template
content: >-
{{ as_timestamp(states('sensor.sun_next_rising')) |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-up
- type: spacer
- type: entity
entity: sensor.moon_phase
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -10px !important;
}
:host([dark-mode]) {
# background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
You also have the option to adjust the padding within the card.
I also cleared my browser cache, but that doesnât seem to work.
OddâŠitâs working for me with your code. Iâm not quite sure why itâs not working for you.
yes, it works with the little man in the example, I put an image and it always remains the same size