Iāve accomplished something similar with light scenes by having input_booleans for each relevant scene and an automation that both activates the scene and updates the state of each input_boolean (turns on the one just hit, turns off all others in the set) when one is hit. You can then add entity cards for each boolean such that it looks like thereās permanent state.
@ Intro_Verti Thanks, very useful. Have this working now. Only thing is that the popup is way to transparent. Do you know how I can change that? Is that a theme setting and if so, do you know which one?
2 Likes
Hello @raphael303,
This is what I made to control my underfloor heating (KNX). Maybe you could use it alsoā¦
This one shows a locked state (for example a Window is open ā heating is not possible)
This one shows that the heating is not locked and that it is open/on. The Icon becomes red as soon as the heating valve is >0%.
The code:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: climate.mf_living
primary: Living room
secondary: >-
{{ states('sensor.mf_living_temperature') }} Ā°C ({{
states('sensor.mf_living_valveposition') }}%)
icon: mdi:thermostat
icon_color: |
{% if is_state('sensor.mf_living_valveposition', '0') %}
grey
{% else %}
deep-orange
{% endif %}
badge_icon: |
{% if 'Locked' in states('sensor.mf_living_diagnosis') %}
mdi:lock
{% endif %}
badge_color: red
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-climate-card
entity: climate.mf_living
icon_type: none
primary_info: none
secondary_info: none
show_temperature_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: end
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 40px;
margin-top: 0px;
margin-right: 5px;
}
chips:
- type: template
content: Comfort
icon: mdi:home-account
icon_color: >-
{% set preset_mode = state_attr('climate.mf_living',
'preset_mode') %} {% if preset_mode == 'comfort' %} orange {%
else %} grey {% endif %}
tap_action:
action: call-service
service: climate.set_preset_mode
data:
preset_mode: comfort
target:
entity_id: climate.mf_living
- type: template
content: Away
icon: mdi:home
icon_color: >-
{% set preset_mode = state_attr('climate.mf_living',
'preset_mode') %} {% if preset_mode == 'away' %} orange {% else
%} grey {% endif %}
tap_action:
action: call-service
service: climate.set_preset_mode
data:
preset_mode: away
target:
entity_id: climate.mf_living
- type: template
content: Sleep
icon: mdi:weather-night
icon_color: >-
{% set preset_mode = state_attr('climate.mf_living',
'preset_mode') %} {% if preset_mode == 'sleep' %} orange {% else
%} grey {% endif %}
tap_action:
action: call-service
service: climate.set_preset_mode
data:
preset_mode: sleep
target:
entity_id: climate.mf_living
17 Likes
I get it with these parts at all nested horizontal vertical-stack-in-card:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border: none;
}
horizontal: true
Maybe helps others too.
2 Likes
Wow! Could you share the code??
Had fun with that. I couldnt change the icon color on a person card, had to change the text color, but this works for me :
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.tim
icon_type: entity-picture
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_g991b_battery_level_2
- type: entity
entity: sensor.daily_steps
icon: mdi:walk
card_mod:
style: |
ha-card {
{% set steps = states('sensor.daily_steps') | int %}
{% if steps > 5000 %}
--text-color: rgb(var(--rgb-green));
{% elif steps < 5000 %}
--text-color: rgb(var(--rgb-amber));
{% elif steps < 2000 %}
--text-color: rgb(var(--rgb-red));
{% else %}
--text-color: rgb(var(--rgb-grey));
{% endif %}
2 Likes
Awesome!
Iām very impressed by the coding. I wouldnāt have had a clue to make this! Thank you! VERY helpful 
Since those values were part of the climate entities I had to make sensors for the temperatures and valve positions, but I think itās worth it.
With my template it looks like this now. Any ideas how to get an even background with the custom:vertical-stack-in-card?
2 Likes
Hello everyone! After some updates (do not know which one) that line bellow Calefactor appears. I do not know how to get rid of it!
Thanks in advanced!
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
AC
secondary: >
{%if is_state('climate.ac_pieza', 'off')%} off {% else %}
{%if states('counter.aux_ac_pieza')|int == 0 and
is_state('climate.ac_pieza', 'heat_cool')%} Idle {% else %} {%if
states('counter.aux_ac_pieza')|int == 1 %} bajo {% else %} {%if
states('counter.aux_ac_pieza')|int == 2 %} med {% else %} {%if
states('counter.aux_ac_pieza')|int == 3 %} alto {% endif %} {% endif
%} {%
endif %} {% endif %} {% endif %}
icon: mdi:air-conditioner
icon_color: |-
{% if is_state_attr("climate.ac_pieza","hvac_action","off") %}
grey
{% else %}
{% if is_state_attr("climate.ac_pieza","hvac_action","idle") or is_state('counter.aux_ac_pieza','0') %}
green
{% else %}
{% if is_state_attr("climate.ac_pieza","hvac_action","heating") %}
orange
{% else %}
{% if is_state_attr("climate.ac_pieza","hvac_action","cooling") %}
blue
{% endif %}
{% endif %}
{% endif %}
{% endif %}
entity: climate.ac_pieza
tap_action:
action: toggle
style: |
ha-card {
padding-bottom: 1px !important;
}
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'rgb(var(--rgb-orange))' if is_state('binary_sensor.contact_sensor_ac_pieza_contact', 'on') else 'rgb(var(--rgb-disabled))' }};
}
- type: custom:mushroom-template-card
primary: Calefactor
secondary: |
{{ state_attr('climate.calefactor_pieza', 'hvac_action') }}
icon: mdi:radiator
icon_color: |-
{% if is_state('climate.calefactor_pieza', 'heat') %}
orange
{% else %}
grey
{% endif %}
entity: climate.calefactor_pieza
tap_action:
action: toggle
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:mushroom-climate-card
entity: climate.ac_pieza
show_temperature_control: true
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
Oh wow 
Teach us! 
I fixed by changed to Mushroom Shadow Theme
I had the same issueā¦On my desktop it was all fine, but on my mobile it wasnāt. Same transparancy.
Iām sure you can change it somewhere in your themes.yaml file(s). For me it was just a matter of changing the theme settings in the standard HA settings:
I just got it!
fill_container: true
...
...
- type: custom:mushroom-template-card
primary: Calefactor
secondary: |
{{ state_attr('climate.calefactor_pieza', 'hvac_action') }}
icon: mdi:radiator
icon_color: |-
{% if is_state('climate.calefactor_pieza', 'heat') %}
orange
{% else %}
grey
{% endif %}
entity: climate.calefactor_pieza
tap_action:
action: toggle
fill_container: true
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:mushroom-climate-card
entity: climate
...
...
This works for me.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
AC
secondary: >
{%if is_state('climate.ac_pieza', 'off')%} off {% else %}
{%if states('counter.aux_ac_pieza')|int == 0 and
is_state('climate.ac_pieza', 'heat_cool')%} Idle {% else %} {%if
states('counter.aux_ac_pieza')|int == 1 %} bajo {% else %} {%if
states('counter.aux_ac_pieza')|int == 2 %} med {% else %} {%if
states('counter.aux_ac_pieza')|int == 3 %} alto {% endif %} {% endif
%} {%
endif %} {% endif %} {% endif %}
icon: mdi:air-conditioner
icon_color: |-
{% if is_state_attr("climate.ac_pieza","hvac_action","off") %}
grey
{% else %}
{% if is_state_attr("climate.ac_pieza","hvac_action","idle") or is_state('counter.aux_ac_pieza','0') %}
green
{% else %}
{% if is_state_attr("climate.ac_pieza","hvac_action","heating") %}
orange
{% else %}
{% if is_state_attr("climate.ac_pieza","hvac_action","cooling") %}
blue
{% endif %}
{% endif %}
{% endif %}
{% endif %}
entity: climate.ac_pieza
tap_action:
action: toggle
style: |
ha-card {
padding-bottom: 1px !important;
}
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'rgb(var(--rgb-orange))' if is_state('binary_sensor.contact_sensor_ac_pieza_contact', 'on') else 'rgb(var(--rgb-disabled))' }};
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
primary: Calefactor
secondary: |
{{ state_attr('climate.calefactor_pieza', 'hvac_action') }}
icon: mdi:radiator
icon_color: |-
{% if is_state('climate.calefactor_pieza', 'heat') %}
orange
{% else %}
grey
{% endif %}
entity: climate.calefactor_pieza
tap_action:
action: toggle
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:mushroom-climate-card
entity: climate.ac_pieza
show_temperature_control: true
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
What did you change?
Okay here is the code and the manual of the page. Every single detail are explained and installation takes only between 10 and 15 minutes.
Please beware that this is not only a page but it also includes automations such as Music follow. Music room presence and history stats.
I believe everyone can install this setup after this manual.
Let the music follow you around the house.
14 Likes
Iām looking to recreate Dwainās room card with a little more control on things like colors and such
Iāve been able to get the chips to show above the card and below the card through examples Iāve found in this thread, but having a hard time figuring out how to get them vertically from the right hand side. Is this possible? Iād like the lightbulb to stay there permanently, and the rest be conditional based on states of various devices. Iād also like to put an mdi icon in the circled area based on heating state.
Did anyone else have their Mushroom Cardsā borders hidden by using this line
card_mod:
style: |
ha-card {--chip-box-shadow: none;}
throughout their .yaml until the borders started re-appearing recently?
Whatās the fix?
2 Likes
Truly above and beyond! Thank you!
1 Like
Did a lot of searching and still not have it solved 100% however below already is a great improvement. If Anyone could tell me how to get the background of the popup and/or the ālights onā header less transparent this would be great.
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.6);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.2);
--mush-icon-size: 43px;
height: 60px;
margin-left: -5px !important;
}
ha-card {
padding: 1px;
background: rgba(var(--rgb-primary-background-color), 0.8);
}