Mushroom cards are individual cards you place in your dashboard. You can mix and match to your hearts content.
Hello together,
I’m checking currently if I switch to Home Assistant. There are a few points where I’m struggeling and hope somebody can help me. Many thanks in advance!
I come accross the mushroom cards and they look good but when I have the standard cards together with mushroom cards it is not nice that behind the icon of the mushroom cards is some background. How can I get rid of it?
Additional: I have in the meantime my own theme in place and I would prefer to simply configure it there. I checked also a few of piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 
(github.com) but was not lucky to find the needed one.
@RkcCorian If you have card_mod installed, its a pretty easy fix. Add the following code to the bottom of the mushroom card. If you have any issues, post your card code and we can help you troubleshoot a lot quicker.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
Additionally if you are not using a Mushroom theme you’ll need to provide a little more information about the theme you are using to understand if the change you want can occure at the Themes level.
1 Like
I am a beginner in Home Assistant.Why is card_mod not taking effect? I noticed that the CSS injected using ha-card in card_mod does not work.
type: custom:mushroom-climate-card
entity: sensor.kong_diao_kai_qi_zhi_shu
hvac_modes:
- dry
- auto
show_temperature_control: true
fill_container: false
collapsible_controls: false
name: climate
card_mod:
style: |
ha-card {
background: url('/local/images/icons/touxiang1.jpeg');
background-repeat: no-repeat;
background-size: 110%;
}
Yes i see nothing. Do you actually have card mod installed from HACS? And if you did, did you clear the browser cache fully after install?
Just an FYI, might want to use
background: none !important; instead.
--shape-color: none !important; is only applied when an entity is ON. So when OFF the
--shape-color: none !important; wont work. There will still be a background (the --rgb-disabled, color).
So like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
It is something i still need to update in my guide as well…
2 Likes
Great point! I have my disabled background color adjusted in the theme yaml and didn’t think of that. Only my icon colors relay the state and thats not the norm.
I have tried everything, but using ha-card still doesn’t work. However, the following code is effective.
type: custom:mushroom-person-card
entity: person.qsq
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: orange !important;
}
So have you tried your initial code with a !important at the end like this:
card_mod:
style: |
ha-card {
background: url('/local/images/icons/touxiang1.jpeg') !important;
background-repeat: no-repeat;
background-size: 110%;
}
Any suggestions on how to troubleshoot this example?
Updated the area but the card just says “lights”, so it doesn’t find anything to target i assume.
@Iowone673 Many thanks! This is working but would be very bad in maintenance. So if you can share also a theme based solution this would be really nice, esp. before I would create the target dashboard.
One example about what I’m speaking about: I have to add your mentioned code the number of times that I have e.g. a blind…
type: vertical-stack
title: Rollläden
cards:
- type: custom:mushroom-cover-card
entity: cover.hausrollladen
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
fill_container: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
- type: custom:mushroom-cover-card
entity: cover.schlafzimmerrollladen
show_position_control: true
show_buttons_control: true
show_tilt_position_control: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
- type: custom:mushroom-cover-card
entity: cover.balkonrollladen_links
show_position_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
I started to create my own theme and therefore I do not have much yet, but can share here anyhow…
my_theme:
# Dashboard Background
background-image: center / cover no-repeat fixed url(/local/pictures/moon_in_space_4k.jpg)
lovelace-background: var(--background-image)
# Cards
ha-card-background: "rgba(0, 0, 0, 0.5)"
ha-card-border-radius: "10px"
ha-card-border-width: "0px"
ha-card-box-shadow: none
Many thanks!! I was already on the way to mentioned that the initial solution works only for one state, but with your it is working in any state 
I have a problem reading the sensor update time. It shows me a reading every few hours and the actual reading occurs on average every few minutes.
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.temperature_16
tap_action:
action: more-info
hold_action:
action: more-info
show_icon: false
secondary_info: last-changed
name: Salon
styles:
card:
- border-style: solid 2px
- border: 1px solid green
- border-radius: 1px
- box-shadow: 0px 0px 10px -9px green
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 26px
- padding-bottom: 10%
- font-size: 65%
- font-color: green
bat:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
- font-color: green
info:
- filter: opacity(80%)
- justify-self: start
- margin-left: 10px
- margin-top: 18px
- padding-bottom: 10%
- font-size: 65%
- font-color: green
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 15px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 0px
- margin-left: 12px
- opacity: 2.65
type: custom:layout-card
layout_type: grid
grid:
- grid-template-areas: |
"n n"
"temp temp"
"bat bat"
"graph graph" "info info"
- grid-template-columns: 0fr 1fr 1fr 1fr 1fr min-content
- grid-template-rows: auto
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:125%; font-weight: 450;">
${states['sensor.temperature_16'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:125%; font-weight: 450; text-align: center;">
${states['sensor.humidity_17'].state}%</span>`
]]]
bat: |
[[[
return `<ha-icon
icon="mdi:gauge"
style="width:18px; height: 18px; color:green;">
</ha-icon><span style="font-size:120%; font-weight: 500;">
${states['sensor.pressure_20'].state} hPa </span>`
]]]
info: |
[[[
return `<ha-icon
icon="mdi:timelapse"
style="width:18px; height: 18px; color:purple;">
</ha-icon><span style="font-size:120%; font-weight: 400;">
${states['sensor.temperature_16'].last_changed}</span>`
]]]
view_layout:
grid-area: bat
card_mod:
style: |
ha-card {
z-index: 1;
height: 132px !important;
}
primary_info: more-info
secondary_info: more-info
tap_action:
action: more-info
- type: custom:mini-graph-card
entities:
- entity: sensor.temperature_16
name: Temperature
color: '#ff8c00'
- entity: sensor.humidity_17
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: sensor.salon_rower_battery
hold_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
view_layout:
column: 3
hi, this dropdown looks super sick. do you mind sharing how you do this? i really would love to do the same thing!
thanks
I updated card_mod , and it seems to be working now.
1 Like
which bit do you actually have a problem with. only 1 bit of this is mushroom related which is your 1 chip that for some reason is a light chip, but is using a sensor entity?
if its not related to that chip i would take this to the correct topic. Button card or Mini Graph card.
1 Like
how you make this dashboard can you share this pleas ?
Thanks @dimitri.landerloos,
Eventually I went with this as I already had a template (helper) in place:
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
span:after {
content: '{{ states('sensor.lights_on') }} aan';
display: flex;
padding-top: 0.3em;
color:var(--secondary-text-color);
}
Looks pretty nice now:
2 Likes
Unfortunately, without rewriting the Mushroom JavaScript you won’t be able to remove the background color while keeping the icon color. The code is written in a way that uses a derivative of the icon color for the background color. As far as I know, adding card_mod to each card/entity is currently the simplest solution.
I am a huge fan of Mushroom with Card_Mod because the combo allows so much custimization. I am going to tackle a small personalized js rewrite, because like you I do not prefer the shape background to have color. If/when i’m done, I will reach out.
One of my cards…
2 Likes