Sorry i want to help but not the right place. This isnt a mushroom card, its the built in tile card. Feel free to make a new topic and send me a message ill then help you there 
omg, I thought these are the same 
I’m attempting (and failing!) to display the current temperature of a room as a ‘secondary’ value in a ‘custom:mushroom-template-card’.
My latest attempt, in all but the ‘secondary’ value succeeds:
type: horizontal-stack
cards:
- type: custom:```mushroom-template-card```
primary: Living room
entity: ```climate.wiser_living_room```
icon: |-
{% set status = states('```climate.wiser_living_room```') %}
{% if status == 'heating' %}
mdi:fire
{% else %}
mdi:snowflake
{% endif %}
icon_color: |-
{% set status = states('climate.```wiser_living_room```') %}
{% if status == 'heating' %}
red
{% else %}
green
{% endif %}
secondary: |-
{% set status = states('```climate.wiser_living_room'```) %}
```show_state```: '```climate.wiser_living_room_current_temperature```'
layout: vertical
Greetings to you all,
today i wanted to share with you a very simple but effective light control card for 4 lights that came about more or less by chance. Through a lot of combining and experimenting with cards from this thread, I came up with this absolutely beautiful combination of different cards. I really like it, so it would be a shame not to share it with you. It’s also interesting that the layout changes a lot depending on how you view your dashboard (grid layout, horizontal and vertical layout), as you can see in the two pictures. But don’t ask me why this happens. Maybe you can tell me. and now have fun with it
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background-image: url('https://hueblog.de/wp-content/uploads/2018/01/Philips_Hue-Lounge.jpg');
background-size: cover;
background-position: center center;
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
cards:
- type: custom:mushroom-light-card
entity: light.kugellampe
layout: vertical
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
- type: custom:mushroom-light-card
entity: light.spot
layout: vertical
primary_info: name
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
- type: custom:mushroom-light-card
entity: light.strahler
layout: vertical
primary_info: name
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
- type: custom:mushroom-light-card
entity: light.ball
layout: vertical
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
1 Like
-
Are you sure the state of your climate entity is
heatingand notheatall of mine areheatwhen 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
Care to share, or anyone else know the how the room buttons are made here?
3 Likes
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;
}
2 Likes
So this is more or less what i had already, but i keep getting overlap from icons.
In the screenshot below i have the example and my old setup
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
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.
100
200
300
400
500
600
700
800
900
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;
}
This pushes the chiplets far down so they are not visable anymore.
But i have created a hack that seems to work.
Icon down from 80 to 77 and resized the card height.
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 from other screenshots it seems like moving the icons to left rather than right might be a better solution as it also looks cleaner.
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.
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.
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
See number 11 here:
How to help us help you - or How to ask a good question - Configuration - Home Assistant Community (home-assistant.io)
1 Like
Thanks, fixed now with your link. I had previously tried just one back-tick.
