I don’t have heat/cool, only heat.
What I want to do is like your first picture, but make the temperature control as wide as both controls with only a single control.
I tried your code, but only got this:
Also got this weird error.
I understand more now, so let me see what I can do. The card is built for all scenarios and it holds that left space for the heat_cool button when activated.
There was a lot of code for heat_cool in the code you posted.
Yes, sorry about that. The heat cool code is something I haven’t touched yet. It is a copy from another user in this thread!
Let’s see where we are with this. You should get this…
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: climate.hc1
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'heat_cool') %}
mdi:sun-snowflake
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state_attr(entity,
'hvac_action', 'heating') %}
deep-orange
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
var(--blue-color)
{% elif is_state_attr(entity,
'hvac_action', 'fan') %}
turquoise
{% else %}
disabled
{% endif %}
primary: |
{{ states('sensor.a4c1385c22dd_temperature') | round(1) }} °C
secondary: |-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state_attr(entity,
'hvac_action', 'heating') %}
Heating
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
Cooling
{% elif is_state(entity, 'heat') %}
Heat
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %}
- type: custom:mushroom-template-card
entity: sensor.a4c1385c22dd_humidity
primary: |
{{ states(entity) | round(1) }} %
secondary: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.a4c1385c22dd_temperature
name: Temperature
color: var(--red-color)
- entity: sensor.a4c1385c22dd_humidity
name: Humidity
color: var(--light-blue-color)
y_axis: secondary
hours_to_show: 12
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
points: false
labels: false
labels_secondary: false
fill: fade
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
{% set state = states('climate.hc1') %}
{% set states = {'heat_cool':'green',
'heat':'#FF5722',
'cool':'var(--blue-color)',
'dry':'orange',
'fan_only':'turqoise'} %}
{{states.get(state,'grey')}}
fill: {{COLOR}};
stroke: {{COLOR}};
}
.line--rect:last-of-type,
.fill--rect:nth-of-type(2),
.line--points:last-of-type {
fill: var(--blue-color);
stroke: var(--blue-color);
}
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 70%;
flex: auto;
}
div#root > :last-child {
width: 30%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.hc1
layout: horizontal
primary_info: none
secondary_info: none
icon: mdi:fire
icon_type: icon
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
position: absolute;
width: 70%;
left: 25%;
z-index: 1 !important;
background-color: {{ 'rgba(255, 144, 0, .4)' if state_attr('climate.hc1', 'hvac_action') ==
'heating' else 'rgba(255, 140, 0, 1)' }}
}
.: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
icon: mdi:thermometer-water
icon_color: |
{% if is_state(entity, 'eco') %}
light-green
{% elif is_state(entity, 'high_demand') %}
red
{%- else -%}
orange
{%- endif %}
layout: horizontal
entity: water_heater.dhw1
secondary: |
{% if is_state(entity, 'eco') %}
Eco
{% elif is_state(entity, 'high_demand') %}
Komfort
{%- else -%}
Normal
{%- endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border-style: none;
display: flex;
justify-content: center;
flex-direction: column;
}
2 Likes
Thanks man! Works great!!
Hello,
I have a hopefully simple question to the community.
Im trying to create a Mushroom climate card, which Icon color is changing in dependence to the temperature.
This works so far, but I try to change the colour of the shape also, but this rather doesnt work.
My code is:
card_mod:
style: |
ha-card {
{% if ( states('sensor.ha_temperatur_schlafzimmer') | float(0) > 19) %}
--card-mod-icon-color: green;
{% elif ( states('sensor.ha_temperatur_schlafzimmer') | float(0) > 17 < 19)%}
--card-mod-icon-color: orange;
{% elif ( states('sensor.ha_temperatur_schlafzimmer') | float(0) < 17)%}
--card-mod-icon-color: red;
{% endif %}
}
}
.: |
mushroom-shape-icon$: |
.shape {
--shape-color: white;
}
Does anyone have an idea? Chat GPT fails also 
I have no clou where the shape color is defined, kind of light pink
I think I understand.
card_mod:
style: |
ha-card {
{% if ( states('sensor.ha_temperatur_schlafzimmer') | float(0) > 19) %}
--card-mod-icon-color: green;
{% elif ( states('sensor.ha_temperatur_schlafzimmer') | float(0) > 17 < 19)%}
--card-mod-icon-color: orange;
{% elif ( states('sensor.ha_temperatur_schlafzimmer') | float(0) < 17)%}
--card-mod-icon-color: red;
{% endif %}
}
}
ha-state-icon {
color: white;
}
@LiQuid_cOOled will help more when he can.
thank you for your support. still not working on my side
oh I got it wrong.
although I would now be interested in the answer.
if using mushroom template you can use the build in icon colour icon_color: white but with your code that didn’t change to white for me either.
I also tried yours with !important; on the end
I had another go this worked for me
type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
.: >
ha-card {
{% if ( states('sensor.ha_temperatur_schlafzimmer') | float(0) > 19) %}
--card-mod-icon-color: green;
{% elif ( states('sensor.ha_temperatur_schlafzimmer') | float(0) > 17 <
19)%}
--card-mod-icon-color: orange;
{% elif ( states('sensor.ha_temperatur_schlafzimmer') | float(0) < 17)%}
--card-mod-icon-color: red;
{% endif %}
}
1 Like
@SchwabiI I simplified a few things…
Your IF statement can be 2 steps vs 3 and icon_color: will accept templates in the mushroom template card. This saves an additional mod.
type: custom:mushroom-template-card
primary: Shape Color
secondary: test
icon: mdi:home
icon_color: |
{% if states('sensor.ha_temperatur_schlafzimmer') | int < 17 %}
red
{% elif states('sensor.ha_temperatur_schlafzimmer') | int < 19 %}
orange
{% else %}
green
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: white !important;
}
2 Likes
Hello LiQuid_cOOled, thanks for your help and providing this nice code.
I really appreciate that.
I tested it for my use case and it works pretty well.
type: custom:mushroom-template-card
primary: Schlafzimmer
secondary: ''
icon: mdi:home-thermometer
icon_color: |
{% if states('sensor.ha_temperatur_schlafzimmer') | int < 17 %}
blue
{% elif states('sensor.ha_temperatur_schlafzimmer') | int < 19 %}
orange
{% else %}
green
{% endif %}
layout: horizontal
multiline_secondary: false
fill_container: false
entity: climate.intelligente_raumregelung
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: white !important;
}
Do you have an idea how to write the actual value of the entitiy “sensor.ha_temperatur_schlafzimmer” so that it is also displayed in the card?
found out on my own:
secondary: '{{states(''sensor.ha_temperatur_schlafzimmer'')}}°'
ty
1 Like
I have a very minor issue with a new card I am trying to do with stack in card.
i couldn’t get it within one statement of stack-in-card so I split it into 2 but now have the radius of the 2 in the middle. the picture explains it better. I could remove the radius but it wouldn’t match the other cards.
is it a simple fix or should I change the card?
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: p o n d
icon: mdi:fish
secondary: 'o u t s i d e l i g h t s '
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--primary-text-color: white;
--secondary-text-color: green;
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 1.5rem;
}
- type: custom:stack-in-card
title: Pond Switches
keep:
background: true
box_shadow: true
mode: horizontal
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
primary: Wifi
secondary: '{{ states(''sensor.4ch_relay_wifi_signal_percent'')}}%'
icon: mdi:wifi
multiline_secondary: true
icon_color: >-
{% set state =
states('sensor.4ch_relay_wifi_signal_percent')|float(-1) %}
{% if state >= 20 %} blue
{% else %} red
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
secondary: |-
{% set s = states('sensor.4ch_relay_uptime_sensor')|int %}
{{ s | timestamp_custom("%H:%M:%S", false) }}
primary: Uptime
icon: mdi:timer
icon_color: blue
entity: sensor.4ch_relay_uptime_sensor
tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
layout: vertical
secondary_info: state
tap_action:
action: toggle
entity: input_boolean.esphome_backlight
name: Backlight
icon: mdi:fit-to-screen
icon_color: blue
card_mod:
style:
$: |
h1.card-header {
font-size: 16px;
padding-top: 1px;
padding-bottom: 18px;
color:var(--secondary-text-color);
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -15px;
}
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Pump & filter
icon: mdi:water-pump
icon_color: |-
{% set state = states('switch.4ch_relay_relay1') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-1-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay1
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Air Pump
icon: mdi:chart-bubble
icon_color: |-
{% set state = states('switch.4ch_relay_relay2') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-2-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay2
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Waterfall
icon: mdi:waterfall
icon_color: |-
{% set state = states('switch.4ch_relay_relay3') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-3-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay3
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Bridge Downlights
icon: mdi:light-flood-down
icon_color: |-
{% set state = states('switch.4ch_relay_relay4') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-4-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay4
fill_container: false
layout: vertical
No need to change. border-radius: 10px 10px 0px 0px; in two spots will fix it.
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: p o n d
icon: mdi:fish
secondary: 'o u t s i d e l i g h t s '
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--primary-text-color: white;
--secondary-text-color: green;
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 1.5rem;
}
- type: custom:stack-in-card
title: Pond Switches
keep:
background: true
box_shadow: true
mode: horizontal
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
primary: Wifi
secondary: '{{ states(''sensor.4ch_relay_wifi_signal_percent'')}}%'
icon: mdi:wifi
multiline_secondary: true
icon_color: >-
{% set state =
states('sensor.4ch_relay_wifi_signal_percent')|float(-1) %}
{% if state >= 20 %} blue
{% else %} red
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
secondary: |-
{% set s = states('sensor.4ch_relay_uptime_sensor')|int %}
{{ s | timestamp_custom("%H:%M:%S", false) }}
primary: Uptime
icon: mdi:timer
icon_color: blue
entity: sensor.4ch_relay_uptime_sensor
tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
layout: vertical
secondary_info: state
tap_action:
action: toggle
entity: input_boolean.esphome_backlight
name: Backlight
icon: mdi:fit-to-screen
icon_color: blue
card_mod:
style: |
ha-card {
border: none;
padding-top: 1px;
padding-bottom: 18px;
color:var(--secondary-text-color);
border-radius: 10px 10px 0px 0px;
--ha-card-header-font-size: 16px;
}
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -15px;
border-radius: 0px 0px 10px 10px;
--ha-card-header-font-size: 5px !important;
}
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Pump & filter
icon: mdi:water-pump
icon_color: |-
{% set state = states('switch.4ch_relay_relay1') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-1-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay1
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Air Pump
icon: mdi:chart-bubble
icon_color: |-
{% set state = states('switch.4ch_relay_relay2') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-2-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay2
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Waterfall
icon: mdi:waterfall
icon_color: |-
{% set state = states('switch.4ch_relay_relay3') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-3-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay3
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
secondary: Bridge Downlights
icon: mdi:light-flood-down
icon_color: |-
{% set state = states('switch.4ch_relay_relay4') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
multiline_secondary: true
badge_icon: mdi:numeric-4-box-outline
badge_color: blue
tap_action:
action: toggle
entity: switch.4ch_relay_relay4
fill_container: false
layout: vertical
brilliant, I should of thought about that.
so I can use the same principle to apply a border to one side or top and bottom for example.
Thanks again
Yes sir!!!
1 Like
Finally had a chance to update the guide to the newest version of Mushroom and Card Mod.
This now fixes the issues with addressing icons in buttons on cards that have them. and fixes the change in addressing text color.
i am still extremely busy at work, so this is not a return of me being able to respond to things sent to me.
5 Likes
Thank you so much for making this guide. You saved me hours and hours of troubleshooting.