That’s the magic sauce.
Add this to the ha-card of stack-in-card 
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Thanks @theandouz
I’d recommend re-downloading from here as there are a number of tweaks for this card.
Hi all,
I’m running 2x Sensibo thermostats and I have the Mushroom Cards on my dashboard.
A problem I’ve run into is that only one of the mushroom climate cards is displaying the hvac mode badge.
The card on the left is from my Sensibo Air and the one on the right (not displaying the badge) is my Sensibo Sky.
Both cards are configured exactly the same except obviously pointing to different entities/sensors.
Any ideas?
Is there a way to theme this like the mushroom cards and have an icon etc and shading around it ?
This seems to be ideal for my calling heat request a bit higher up
Thanks in advance
Not all climate entities support hvac action (if your thermostat is currently cooling or heating) and the badge use hvac action.
Hi, i need to fix my room view, i have used this before
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: Stue
secondary: |-
{{states ('sensor.mi_air_purifier_3_3h_temperature') | round(1)}}°C 🌡️
{{states ('sensor.mi_air_purifier_3_3h_humidity')}}% 💦
icon: mdi:sofa
layout: vertical
icon_color: blue
multiline_secondary: true
fill_container: false
- type: custom:mushroom-template-card
primary: Kjøkken
secondary: |-
{{states ('sensor.mi_air_purifier_3_3h_temperature') | round(1)}}°C 🌡️
{{states ('sensor.mi_air_purifier_3_3h_humidity')}}% 💦
icon: mdi:fridge
layout: vertical
icon_color: teal
multiline_secondary: true
- type: custom:mushroom-template-card
primary: Påbygg
secondary: |-
{{states ('sensor.mi_air_purifier_3_3h_temperature') | round(1)}}°C 🌡️
{{states ('sensor.mi_air_purifier_3_3h_humidity')}}% 💦
icon: mdi:table-chair
layout: vertical
icon_color: teal
multiline_secondary: true
- type: custom:mushroom-template-card
primary: Matheo
secondary: |-
{{states ('sensor.netatmo_matheo_temperature') | round(1)}}°C 🌡️
{{states ('sensor.netatmo_matheo_humidity')}}% 💦
icon: mdi:face-man
layout: vertical
icon_color: green
multiline_secondary: true
- type: custom:mushroom-template-card
primary: Emma
secondary: |-
{{states ('sensor.netatmo_emma_temperature') | round(1)}}°C 🌡️
{{states ('sensor.netatmo_emma_humidity')}}% 💦
icon: mdi:face-woman
icon_color: pink
multiline_secondary: true
badge_icon: ''
badge_color: ''
fill_container: false
layout: vertical
- type: custom:mushroom-template-card
primary: Kjeller
secondary: |-
{{states ('sensor.mi_air_purifier_3_3h_temperature') | round(1)}}°C 🌡️
{{states ('sensor.mi_air_purifier_3_3h_humidity')}}% 💦
icon: mdi:home-floor-b
layout: vertical
icon_color: orange
multiline_secondary: true
This makes it look like this
Instead i want something like this
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Matheo
secondary: |-
{{states ('sensor.netatmo_matheo_temperature') | round(1)}}°C 🌡️
{{states ('sensor.netatmo_matheo_humidity')}}% 💦
icon: mdi:face-man
multiline_secondary: true
icon_color: green
fill_container: false
tap_action:
action: navigate
navigation_path: ''
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: light
entity: light.ledstripe_matheo
content_info: none
icon: mdi:led-strip
- type: light
entity: light.downlights_matheo
icon: mdi:light-recessed
content_info: none
- type: light
entity: light.nattlampe_matheo
icon: mdi:floor-lamp
content_info: none
- type: entity
entity: script.light_nightmode_matheo
icon: mdi:lightbulb-night
content_info: none
tap_action:
action: toggle
- type: conditional
conditions:
- entity: binary_sensor.sensor_stue_occupancy
state: 'on'
chip:
type: entity
entity: binary_sensor.sensor_stue_occupancy
icon_color: red
content_info: none
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
This looks like this, i love this view, however i really want to grid this so i can have it two in width. Tried variations with grid etc, but it wont work as i want, any tips?
You mean like this?
Mushroom Card Single Line:
type: custom:mushroom-template-card
primary: Mushrooms
secondary: 42 grown
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.secondary {
position: absolute;
right: 10px;
top: 10px;
border: solid rgba(var(--rgb-disabled), 0.3);
border-radius: 12px;
padding: 12px;
}
Another option: I use a custom:layout-card with a title and a chip next to it. I can click the chip to run a script, or in this case toggle an automation that notifies me when the RPi temp is high.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-colums: 70% 30%
grid-template-rows: auto
grid-template-areas: |
"left right"
grid-gap: 0px
margin: '-4px'
cards:
- type: custom:mushroom-title-card
title: Raspberry Pi
subtitle: ''
view_layout:
grid-area: left
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.meld_hoge_temperatuur_van_raspberry_pi_processor
content: |-
{% if is_state(entity, 'on') %}
Aan
{% else %}
Uit
{% endif %}
icon: |-
{% if is_state(entity, 'on') %}
mdi:bell
{% else %}
mdi:bell-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
deep-orange
{% else %}
disabled
{% endif %}
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.meld_hoge_temperatuur_van_raspberry_pi_processor
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
margin: 12px 2px 0px;
--chip-background: none;
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 12px;
}
view_layout:
grid-area: right
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
Thank you, that is brilliant, but I just need to get the card to auto size vertically, if thats possible. Im guessing its a height: auto; or something like that on the card but not found it yet.
Appreciate your response.
Did you ever do a weather card, as I saw you gave an example but just seen your animated weather icons now and they would be brilliant and better than an svg or gif 
Hi
This is brilliant for something else I have in mind, so thank you for sharing. its really appreciated 
You were close, like this:
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
span:nth-child(2) {
font-size: 24px;
}
That’s really weird because I believe the sky is older than the air, one would think the older would support hvac actions.
You can’t template a Mushroom Person Card, but you can do it with card_mod:
type: custom:mushroom-person-card
entity: person.ally
use_entity_picture: true
layout: vertical
hide_name: true
hide_state: false
badge_icon: mdi:home
card_mod:
style: |
ha-card {
--badge-icon-size: 1.0em;
--card-mod-icon:
{% if is_state('person.ally', 'Driving') %}
mdi:car
{% else %}
mdi:home
{% endif %};
}
:host {
--mush-icon-size: 84px;
--mush-badge-size: 33px;
height: 110px;
margin-left: -18px !important;
}
Unfortunately, once we use position: absolute; it takes it out of the bounds of the card. We’d need to do it a different way. I’ll have a think…
I have played around with some Mushroom based Weather Cards, but it is was very specific to my Weatherflow Weather Station.
Thanks for the help. This will cause the badge icon to lose all the other zones that i’ve configured, correct? If possible, i’d like to keep all my zone badge icons but just have the ‘Driving’ state use the car or even the ‘Away’ icon.
Maybe you can use a conditional card
type: conditional
conditions:
- entity: sensor.hacs
state_not: '0'
card:
type: custom:mushroom-template-card
primary: HACS
secondary: |-
{% if states('sensor.hacs') == "0" %}
Up-to-date
{% else %}
{% for item in state_attr('sensor.hacs', 'repositories') -%}
{%- if loop.first %}{{states('sensor.hacs')}} update(s): {% elif loop.last %} , {% else %}, {% endif -%}
'{{ item.display_name | lower }}'
{%- endfor %}
{% endif %}
multiline_secondary: true
icon: mdi:store
icon_color: orange
fill_container: false
tap_action:
action: navigate
navigation_path: ../hacs/entry
Hi. Sure. It is a lot of code. I can not paste it here. I am getting error. Send me priv message with your email. I will send you code and necessary pictures and fonts. If anyone else is interested send me priv message.
Hi,
I see this in the log…any idea what this is ?
Logger: frontend.js.latest.202212070
Source: components/system_log/init.py:256
First occurred: 15:22:05 (1 occurrences)
Last logged: 15:22:05
Just designed these light cards in case anyone may be interested. I’m using the Tile card, but you can easily move the card mod section over to a Mushroom Light or Template Card. I wanted to be able to use the same code with lights that support brightness and those that don’t since I use one Decluttering Template and so I accounted for all that with templates. Just fill in your entity name and it should work for you.
type: tile
entity: light.table_lamp
icon_tap_action:
action: toggle
color: orange
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: custom:light-popup-card
entity: light.table_lamp
settings: true
settingsCard:
type: custom:more-info-card
cardOptions:
entity: light.table_lamp
card_mod:
style: >
{% if states('light.table_lamp') == "on" and state_attr('light.table_lamp',
'brightness') != None %}
{% set temp = (state_attr('light.table_lamp', 'brightness') / 255 * 100) | round(0) %}
ha-card {
background-image: linear-gradient(to right, rgb(250, 225, 140) {{temp}}%, rgb(252, 239, 205) {{temp}}%);
{{ '--primary-text-color: black;' if is_state('light.table_lamp', 'on') }}
--secondary-text-color: gray;
}
{% else %}
ha-card {
{{ 'background: rgb(250, 225, 140);' if is_state('light.table_lamp', 'on') }}
{{ '--primary-text-color: black;' if is_state('light.table_lamp', 'on') }}
--secondary-text-color: gray;
}
{% endif %}
@rhysb Any chance of some help pls
I want to increase the Icons size and then move it to the left, but want border of the card to clip the icon if that makes sense
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dishwasher
secondary: >-
{{ states('sensor.dishwasher_plug_overall_kwh')}} kWh / ${{
(states('sensor.dishwasher_plug_overall_kwh') | float * 0.21) | round(2)
}}
icon: mdi:dishwasher
entity: sensor.dishwasher_plug_overall_kwh
tap_action:
action: more-info
layout: vertical
icon_color: blue
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.dishwasher_hourly_kwh
icon: mdi:meter-electric
icon_color: lime
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_daily_kwh
icon: mdi:meter-electric
icon_color: light-green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
i have had that error message for ages, couldnt find any solution