Are you sure the state of your climate entity is heating and not heat all of mine are heat when on.
A template that gets the current temperature of a climate entity looks something like this:
{{state_attr(''climate.bedroom_heating'',''current_temperature'') }}
So your fixed card (change entities back to your own and change state to heating if that is right for yours.) Is below:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living room
entity: climate.bedroom_heating
icon: |-
{% set status = states('climate.bedroom_heating') %}
{% if status == 'heat' %}
mdi:fire
{% else %}
mdi:snowflake
{% endif %}
icon_color: |-
{% set status = states('climate.bedroom_heating') %}
{% if status == 'heat' %}
red
{% else %}
green
{% endif %}
secondary: '{{state_attr(''climate.bedroom_heating'',''current_temperature'') }}'
layout: vertical
jeey2k
December 30, 2023, 1:54am
9362
Care to share, or anyone else know the how the room buttons are made here?
3 Likes
Markus1995
December 30, 2023, 7:22am
9363
Can you please share your yaml code for your dashboard? I realy like the room cards
1 Like
Very likely something like this:
type: grid
columns: 2
square: false
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: 1st Bedroom
secondary: '{{state_attr(''climate.bedroom_heating'',''current_temperature'')}}°C'
icon: mdi:bed
card_mod:
style: |
ha-card {
transform: scalex(-1);
padding-bottom: 20px !important;
border: none !important;
}
mushroom-state-info {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
mushroom-shape-icon {
position: absolute;
--icon-size: 80px;
top: -38px;
right: -56px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-green), 0.2) !important;
}
card_mod:
style: |
ha-card {
border: none !important;
--chip-border-width: 0 !important;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: 1st Bedroom
secondary: '{{state_attr(''climate.bedroom_heating'',''current_temperature'')}}°C'
icon: mdi:bed
card_mod:
style: |
ha-card {
transform: scalex(-1);
padding-bottom: 20px !important;
border: none !important;
}
mushroom-state-info {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
mushroom-shape-icon {
position: absolute;
--icon-size: 80px;
top: -38px;
right: -56px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-green), 0.2) !important;
}
card_mod:
style: |
ha-card {
border: none !important;
--chip-border-width: 0 !important;
}
@jeey2k @Alwin_Hummels
2 Likes
jeey2k
December 30, 2023, 9:33am
9365
So this is more or less what i had already, but i keep getting overlap from icons.
Code example
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Stue
secondary: >-
{{ states('sensor.sensor_stue_co2_atom_stue_temperature') | round(0)
}} °C
icon: mdi:sofa-outline
entity: light.sofaspotter
tap_action:
action: navigate
navigation_path: stue
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
card_mod:
style: |
ha-card {
transform: scalex(-1);
padding-bottom: 20px !important;
border: none !important;
}
mushroom-state-info {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
mushroom-shape-icon {
position: absolute;
--icon-size: 80px;
top: -38px;
right: -56px;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.flos_2
content_info: none
tap_action:
action: toggle
icon: mdi:lamp
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.gubi
content_info: none
icon: mdi:chandelier
use_light_color: true
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_dining_room_smoke_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.ms6_stue_home_security_motion_detection
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.sofaspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
.....
card_mod:
style: |
ha-card {
height: 115px;
{% if is_state('light.sofaspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
Faecon
December 30, 2023, 10:43am
9366
[afbeelding]
Can I use card mod to correct the font ?
Where can I see what font is used in the other (correct) card ?
The wrrong font is in the custom:time-picker-card, other cards are custom:mushroom-template-card
I have a card with a different font of the mushroom cards, how can I change that ?
I’m not 100% positive, but based off the pics the font looks the same to me. The font weights DO appear to be different and that can be adjusted via the theme or card by card. You can use card_mod to test my theory or post your card code.
From what I saw in the code they are using different weights/font-size . The chart below defines from thin to thick characters. 400 is the same as normal , and 700 is the same as bold.
add this mod to test and adjust up and down to see if its the font-weight is the issue
card_mod:
style: |
ha-card{
font-weight: 400;
}
2 Likes
with position: absolute; you are locking in the icon-size and forcing the overlap.
Let’s start by removing that line of code and work from there.
mushroom-shape-icon {
--icon-size: 80px;
top: -38px;
right: -56px;
}
jeey2k
December 30, 2023, 11:51am
9369
This pushes the chiplets far down so they are not visable anymore.
But i have created a hack that seems to work.
mushroom-shape-icon {
position: absolute;
--icon-size: 77px;
top: -38px;
right: -56px;
}
and
card_mod:
style: |
ha-card {
height: 120px;
}
This gives a bigger box so the chips are not cut off atleast.
But to do this i need to assign each position, is there any cleaner way ?
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 2px;
}
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 42px;
}
Gives this result.
Can you please post the entire card’s code with both entities? It will be easier to troubleshoot.
jeey2k
December 30, 2023, 12:19pm
9371
Shure
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Stue
secondary: >-
{{ states('sensor.sensor_stue_co2_atom_stue_temperature') | round(0)
}} °C
icon: mdi:sofa-outline
entity: light.sofaspotter
tap_action:
action: navigate
navigation_path: stue
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
card_mod:
style: |
ha-card {
transform: scalex(-1);
padding-bottom: 20px !important;
border: none !important;
}
mushroom-state-info {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
mushroom-shape-icon {
position: absolute;
--icon-size: 77px;
top: -38px;
right: -56px;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 2px;
}
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 42px;
}
- type: light
entity: light.flos
content_info: none
tap_action:
action: toggle
icon: mdi:lamp
use_light_color: true
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 82px;
}
- type: light
entity: light.gubi
content_info: none
icon: mdi:chandelier
use_light_color: true
card_mod:
style: |
ha-card {
position: absolute;
left: 122px;
}
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_dining_room_smoke_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.ms6_stue_home_security_motion_detection
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 115px;
{% if is_state('light.sofaspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kjøkken
secondary: '{{ states(''sensor.motionkjokken_temperature'') | round(0) }} °C'
icon: mdi:silverware-fork-knife
entity: light.kjokkenspotter
tap_action:
action: navigate
navigation_path: kjokken
hold_action:
action: toggle
icon_color: '{{ ''orange'' 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.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.kjokkenspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
- type: light
entity: light.pendellampe
content_info: none
tap_action:
action: toggle
icon: mdi:ceiling-light-multiple
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.benkebelysning
content_info: none
icon: mdi:wall-sconce-flat
use_light_color: true
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_kitchen_co_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.motionkjokken_motion
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.kjokkenspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
I see a couple of issues with your card_mod settings. Definitely fixable! Im on EST time and need sleep. I’m positive @dimitri.landerloos will see the same issues and may respond. I’ll definately follow up with edits and explanations. Please research spitting card_mod adds with .: | using @dimitri.landerloos tutorial links in his profile.
digitl
December 30, 2023, 2:27pm
9373
Despite the kitchen heating being on and the study heating being off, both results are a red fire icon.
What am I doing wrong please: my actual dashboard has 13 of these and the issue persists throughout?
type: grid
cards:
- type: custom:mushroom-template-card
primary: Kitchen
entity: climate.wiser_kitchen
icon: >-
{% if state_attr('climate.wiser_kitchen', 'is_heating') == 'true'%}
mdi:fire-off
{% else %}
mdi:fire
{% endif %}
icon_color: >-
{% if state_attr('climate.wiser_living_room', 'is_heating') == 'true'%}
blue
{% else %}
red
{% endif %}
secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }}'
layout: vertical
- type: custom:mushroom-template-card
primary: Study
entity: climate.wiser_study
icon: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
mdi:fire-off
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
blue
{% else %}
red
{% endif %}
secondary: '{{ state_attr(''climate.wiser_study'', ''current_temperature'') }}'
layout: vertical
jeffcrum
December 30, 2023, 3:05pm
9374
1 Like
digitl
December 30, 2023, 3:09pm
9375
Thanks, fixed now with your link. I had previously tried just one back-tick.
Im pretty sure your entity doesnt have a an attribute called is_heating you are probably looking for the hvac_action
So probably something like this:
icon: >-
{% if state_attr('climate.wiser_kitchen', 'hvac_action') == 'heating'%}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
digitl
December 30, 2023, 4:14pm
9377
It does and it offers just true or false.
I suspect my problem is the repeated use of the coding for each room but I don’t know enough to be able to discover why.
Hmmm, it all looks correct to me then. Have you checked that the actual attribute moves from true to false when the heating is turned off.
digitl
December 30, 2023, 4:28pm
9379
Thanks for the suggestion. Just checked and I’ve watched it change.
At the same time, I’m sure one set of icon and icon colour changes affected the other.
digitl
December 30, 2023, 4:44pm
9380
I’ve changed icons and icon_color between the two rooms. The kitchen is heating but the study is not so it appears that the results of the If statements are reversed for both rooms.
type: grid
cards:
- type: custom:mushroom-template-card
primary: Kitchen
entity: climate.wiser_kitchen
icon: >-
{% if state_attr('climate.wiser_kitchen', 'is_heating') == 'true'%}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
icon_color: >-
{% if state_attr('climate.wiser_living_room', 'is_heating') == 'true'%}
red
{% else %}
blue
{% endif %}
secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }}'
layout: vertical
- type: custom:mushroom-template-card
primary: Study
entity: climate.wiser_study
icon: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
mdi:fire
{% else %}
mdi:snowflake
{% endif %}
icon_color: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
red
{% else %}
green
{% endif %}
secondary: '{{ state_attr(''climate.wiser_study'', ''current_temperature'') }}'
layout: vertical
