I’m trying to change the icon color (not the circle around it) to a permanent color in the theme. I can change it by adding:
mushroom-shape-icon$: |
ha-icon {
--icon-color: white!important;
}
on the card itself, but how can I add it with card-mod into the theme as a default?
`
EDIT:
card-mod-card: |
mushroom-shape-icon {
--icon-color: white!important;
}
Vacuum part 
Home Assistant air conditioner button
type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_yatak_odasi'') }} °C'
primary: Midea
entity: input_boolean.notify_home3
icon: mdi:weather-partly-cloud
fill_container: false
multiline_secondary: false
tap_action:
action: navigate
navigation_path: klima
layout: vertical
picture: |
{% if is_state('climate.146235046506144_climate', 'off') %}
/local/icons/klima.png
{% elif is_state('climate.146235046506144_climate', 'cool') %}
/local/png/klimablue.PNG
{% elif is_state('climate.146235046506144_climate', 'heat') %}
/local/png/klimared.PNG
{% else %}
/local/icons/klima.png
{% endif %}
style: |
mushroom-card {
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: #1a1a2a;, 1.25);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
card_mode:
style: |
:host {
background: rgba(var(--rgb-primary-background-color), 0.5);
border-radius: 50px;!important
}
line_width: 8
line_color: '#FF6384'
icon pictures :
klima :
klima red:
klima blue :
Current beahviour of the button navigates to air conditoner page but you can change it with editing tap_action part. For example this code directly turns on and off the airconditioner instead of navigating to the page.
type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_yatak_odasi'') }} °C'
primary: Midea
icon: mdi:weather-partly-cloud
fill_container: false
multiline_secondary: false
tap_action:
action: toggle
entity: climate.146235046506144_climate
layout: vertical
picture: |
{% if is_state('climate.146235046506144_climate', 'off') %}
/local/icons/klima.png
{% elif is_state('climate.146235046506144_climate', 'cool') %}
/local/png/klimablue.PNG
{% elif is_state('climate.146235046506144_climate', 'heat') %}
/local/png/klimared.PNG
{% else %}
/local/icons/klima.png
{% endif %}
style: |
mushroom-card {
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: #1a1a2a;, 1.25);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
card_mode:
style: |
:host {
background: rgba(var(--rgb-primary-background-color), 0.5);
border-radius: 50px;!important
}
line_width: 8
line_color: '#FF6384'
Hi Rhys, is it possible to change the font-size of the target temperature? I’ve been trying with no success (in #container .span ) :
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .span {
font-size: 40px;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
.: |
host {
--mush-icon-size: 40px;
--mush-card-primary-font-size: 28px;
--mush-card-secondary-font-size: 22px;
}
Thank you!
Working on my dashboard and I can’t seem to get the person card to show a mdi:car when the status is state is set to driving (or Driving). It shows the Home badge when the state is set to driving. all other badges seem to reference zones that I have configured in home assistant. Any way to get the badge to show a car when the person is driving?
- type: custom:mushroom-person-card
entity: person.ally
use_entity_picture: true
layout: vertical
hide_name: true
hide_state: false
badge_icon: |-
{% if is_state('person.ally', 'Driving') %}
mdi:car
{% endif %}
card_mod:
style: |
ha-card {
--badge-icon-size: 1.0em;
}
:host {
--mush-icon-size: 84px;
--mush-badge-size: 33px;
height: 110px;
margin-left: -18px !important;
}
Thanks, been having a play with this today and it seems to work but only if I hold the button… if I just click it the animation stops playing as soon as the mouse button is released.
Is there any way to force it to finish up the animation ?
Here is what I have so far;
- type: custom:mushroom-template-card
primary: ''
secondary: Leave
icon: mdi:hand-wave-outline
layout: vertical
icon_color: green
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.leave
card_mod:
style: |
ha-card:active mushroom-shape-icon {
display: flex;
animation: wave 2.5s;
}
@keyframes wave {
0% { transform: rotate( 0.0deg); }
10% { transform: rotate(14.0deg); } /* The following five values can be played with to make the waving more or less extreme */
20% { transform: rotate(-8.0deg); }
30% { transform: rotate(14.0deg); }
40% { transform: rotate(-4.0deg); }
50% { transform: rotate(10.0deg); }
60% { transform: rotate( 0.0deg); } /* Reset for the last half to pause */
100% { transform: rotate( 0.0deg); }
}
ha-card {
background: var(--card-background-color);
box-shadow: 0 0 4px 0px lightgrey !important;
width: auto;
border-radius: 10px;
margin-bottom: 2px;
}
Also, I seem to be having issues with some animations since the above applies it to the entire shape not just the icon… so when I try to do clipping I get white blank parts… can’t for the life of me figure out the right syntax though that will still allow me to use ha-card:active and the normal ha-card styling, along with selecting the ha-icon too.
I had a similar problem when I was setting up my person cards, although I used the template card. The issue I had was that I couldn’t compare some attributes from Life360 tracking. They just simply wouldn’t work. Even though in your example, you clearly have “Driving” shown, I couldn’t compare that against any state_attr’s.
I resolved the issue by setting up template senors and comparing those, that then worked ie:
- platform: template
sensors:
my_mobile_charging:
friendly_name: "My Mobile Charging State"
value_template: "{{ state_attr('device_tracker.me', 'battery_charging') }}"
The using that template sensor in the card
icon: |-
{% if states('sensor.my_mobile_charging') == "True" %}
mdi:power-plug
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: >-
{% if states('sensor.my_mobile_charging') == "True" %}
green
{% else %}
grey
{% endif %}
Mush and UI gurus,
I am a bit puzzled by the alignment of Mushroom Light Cards, as they do not align as I expected.
In below screenshot you see 2 horizontal stacks:
What I want is to achieve is
Is this possible ?
Is it possible for the primary text of a card to be 2 lines?
I’m trying to make “Downstairs Bathroom” display as:
Downstairs
Bathroom
It’s too long on a single line and ends up overlapping with my chip cards. I don’t want to put Bathroom as secondary because I’m displaying other information as secondary.
EDIT: Found it
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
Absolutely amazing, this has got to be your best media player card yet!! Four questions:
The only downside is that, when the media player is turned off, it is a giant empty card. You could resize it to normal when the state is off (like the Apple TV in screenshot) but then the layout could shift too much on a tablet layout. Maybe the best is to not show the card at all in that case? Any ideas?
For some reason the blurred background goes beyond the rounded corners of the card? It’s almost not noticeable though. See screenshot from iPad.
Left/right margins seem to be unequal? Possibly because my whole vertical stack has a smaller width?
On my Android phone, the album art does not show and the whole ha-card:before part collapses to a few pixels height 
The album art does show correctly in your other media player cards.
Hey @ArenaCloser ,
You could put it in a conditional so that it doesn’t show when off. A better solution might be to have a generic image when the player is off. If you find any suitable ones let me know and I can add it.
Yes, I have seen that, but @theandouz was not seeing the same behaviour on his. It may depend on your version of Safari or iOS. Perhaps others could comment and we can see if there is a pattern.
Does it correct if you widen the column? The aspect-ratio should adjust correctly, perhaps another iOS quirk. You could try playing with margin: 4px 4px 16px; to see if you can correct.
Perhaps your browser does not support aspect-ratio. Make sure you are on the latest Chrome and WebView. CSS property: aspect-ratio | Can I use... Support tables for HTML5, CSS3, etc
Perhaps this will work better for you.
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Bathroom Robin
subtitle: >-
{{ states('sensor.bathroom_sensor_temperature') | round(1) }}°C / {{
states('sensor.bathroom_sensor_humidity') | round(1) }}%
card_mod:
style:
mushroom-title-card$: |
.subtitle {
position: absolute;
right: 10px;
top: 16px;
border: solid rgba(var(--rgb-disabled), 0.3);
border-radius: 12px;
padding: 12px;
}
Does anyone know if I can change to disable the opacity on the shape-icon theme wide?
The card we were testing included the transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); applied to the ha-card as well and that seems to fix the border issue.
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.currently_playing', 'idle') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(300%);
background-size: cover;
background-position: center;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
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?
