I am looking for the same!
Just an animated icon with a candle, would be awesome.
Hope someone is able to help you (and me 
)
Start by changing
to this
card_mod:
style: |
ha-card {
--icon-size: 55px;
top: -20px ;
}
Hi im trying to make a new dashboard using mushrooms cards, but when i use this code
card_mod:
style: |
ha-card {
background: none;
border: 2px outset #cc8418;
}
the text gets invisible when i cast it to my google home nest, is there a way to change the text color so i can see the text ?
i have tryed with this code
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
but i cant use these two codes together or im doing something wrong.
I have a silly issue. I’m using Ecobee thermostats, all of which have the ability to turn on just the fan on our HVAC units. The default Lovelace Climate card also allows this functionality. The Mushroom card, unfortunately, does not.
I think this is because our HVAC integration doesn’t have a ‘fan_only’ option under ‘hvac_modes’. Rather, it only has a separate ‘fan_modes’ entity that can be either ‘auto’ or ‘on’. Does anyone know if there is a way to make that work with the Mushroom climate card so that we can toggle the fans on and off separately when we want to circulate the air?
Is it possible use mushroom chip card what displays only entity value without icon. I can remove icon but this gray area remains where icon was.
How to integrate this into yaml THEME in order to be applied to each card. This is from the guide in the first post Mushroom Cards Card Mod Styling/Config Guide - #10 by dimitri.landerloos
mushroom-shape-icon$: |
.shape {
background-color: transparent !important;
}
?
This construction:
ha-card.type-custom-mushroom-light-card
{
mushroom-shape-icon$: |
.shape {
background-color: transparent !important;
}
}
doesn’t work
I modified some code earlier in the thread to add a 4th badge (bottom left) but I can’t seem to make that badge opaque. Can someone help me out?
type: custom:mushroom-template-card
primary: Test Icon
icon: mdi:dots-grid
icon_color: red
badge_icon: mdi:bug
badge_color: green
card_mod:
style: |
{% if is_state('light.test_light', 'on') %}
mushroom-badge-icon:after {
content: "humidity_indoor";
font-size: 0.9em;
font-family: 'Material Symbols Outlined';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 26px;
color: var(--icon-color);
background: var(--main-color);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-badge-icon:before {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 26px;
color: var(--icon-color);
background: var(--main-color);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-shape-icon:before {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: -3px;
left: -3px;
color: white;
background-color: green !important;
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
{% endif %}
My climate control cannot use the action turn on and turn off. I there a possibilty to use template for the tab action in the climate mushroom card?
cards:
- type: custom:mushroom-climate-card
entity: climate.room_climate_xxx
show_temperature_control: true
hvac_modes:
- "off"
- "heat"
tap_action:
action: climate.set_hvac_mode
target:
entity_id:
- climate.room_climate_xxx
data:
hvac_mode: |-
{% if states('climate.room_climate_xxx') == "off" %}
heat
{% else %}
off
{% endif %}
but did not work to toogle hvac
hey, is there a way to use custom:mushroom-template-badge in auto-entities?
Maybe someone has an example for me?
Can anyone give me an example of the mushroom fan card that changes the color of the icon and the color of the slider when the fan changes from off to on or even when it changes % or setting.
Im quite new to templating and dont quite get how I need to set this up, help much appreciated 
I want to create a plant status card with the mushroom template and change the icon color, depending on the moisture percentage of the sensor.
The value is stated in a attribute of the plant entity, which seems to kind of be my issue.
I currently started with this, taken from another card that successfully changes color depending on the value of the corresponding entity.
type: custom:mushroom-template-card
primary: Monsterra
secondary: "{{state_attr('plant.monsterra', 'moisture')}}%"
icon: mdi:flower
icon_color: |-
{% set moisture="{{state_attr('plant.monsterra', 'moisture')}}%"
{% if moisture|int()<= 20 %}
red
{% elif moisture|int()>20 and moisture|int() <=65 %}
green
{% elif moisture|int()>65 and moisture|int() <=999 %}
blue
{% else %}
red
{%endif %}
entity: plant.monsterra
the value is displayed as secondary information, but I dont get the icon color to work. I guess the syntax there is not correct for defining the moisture variable?
{% set moisture="{{state_attr('plant.monsterra', 'moisture')}}%"
At a glance, you’re quotes seem wrong. Have you tested/tried this in Developer Tools → Templates?
MrGrey.
Should be:
{% set moisture = state_attr('plant.monsterra', 'moisture') %}
You don’t need the curly bracket pairs inside the set variable expression.
And as you have set plant.monsterra as the entity for the card, you can replace all references to it with entity:
{% set moisture = state_attr(entity, 'moisture') %}
1 Like
I cant get it working. I want to show another Icon if the state is 50% and an other text.
type: custom:mushroom-cover-card
entity: cover.rollladen_office
name: Rolladen
show_position_control: true
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-state-icon {
--card-mod-icon: >
{% if state_attr(entity, "current_position") == 50 %}
mdi:weather-sunny-alert
{% else %}
{% endif %}
}
I can change the icon, but i am not able to change only in this specific position.
Anyone a simple hint what is wrong?
Thanks alot!
Hello guys,
Plz help me out here.
How to add buttons at circled area?
type: custom:mushroom-select-card
entity: input_select.playlists
fill_container: false
name: Select Playlist
Thank you so much, that works perfectly. The ammount of brackets also really set me off a bit, but I didnt get the hang of it last night.
Your reference for the entity attribute also solved a second question I was asking myself, thanks a lot for that
1 Like
I have in cover card edit each button
for example
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--card-mod-icon: mdi:arrow-up-bold;
}
.button {
border: 0.1px outset gray !important;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66);
}
how can I add to this button for example
ha-card:active {
transform: scale(0.875);
transition: 0s;
}
Guys plz help
Hi. I changed the custom component from vertical-stack-in-card to stack-in-card and it displays correctly. Try it
Hi @Vandana That’s all I can do
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
cards:
- type: custom:mushroom-select-card
entity: input_select.media_player
fill_container: false
name: Select speaker
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-entity-card
entity: [entity_XXX]
primary_info: none
secondary_info: none
layout: horizontal
icon: mdi:repeat-variant
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: [entity_XXX]
primary_info: none
secondary_info: none
layout: horizontal
icon: mdi:music-note-off
icon_color: red
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: [entity_XXX]
primary_info: none
secondary_info: none
layout: horizontal
icon: mdi:play-pause
icon_color: green
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
}
1 Like