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
Thank you so so much.
How to extend the dropdown to have the full width?
Tried to find a tip to my question in this very long thread. Maybe solution would be very easy.
I show different numbers without units in mushroom template and entity cards. But for all numbers trailing zeros are cut off. 5.00 will be shown as 5.
The only way I found is to add a char (e.g. a dot) after number.
Code snippet:
{{ '%.2f' | format(states('sensor.ebusd_cop_current') | float) }}
This will cut off any trailing zeros.
Seems mushroom card do same magic on numbers and removes trailing zeros when no other text follows.
type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.geyser
icon: mdi:water-boiler
layout: vertical
icon_color: "{{ 'green' if is_state(entity, 'on') else 'pink' }}"
primary_info: none
secondary_info: none
tap_action:
action: toggle
Hello Guys,
How do I remove the spaces between each mushroom-template-card?
Kindly guide
Why are you using a core horizontal-stack card within a custom stack-in-card in horizontal mode? It’s completely redundant.
See if removing it helps. If not, you might have to set the gap variable through card-mod.
1 Like
Thank you so much… fixed…
1 Like
@Vandana Change options according to personal needs.
type: custom:stack-in-card
cards:
- type: custom:mushroom-select-card
entity: input_select.chon_loa
fill_container: false
name: Select Playlist
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: [entity_id]
icon_color: green
icon: mdi:repeat-variant
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: [entity_id]
icon_color: orange
icon: mdi:repeat-variant
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: [entity_id]
icon_color: purple
icon: mdi:repeat-variant
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: [entity_id]
icon_color: red
icon: mdi:repeat-variant
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: rgba(28,28,28,0.6)
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90% 10%
cards:
- type: custom:mushroom-select-card
entity: input_select.chon_loa
fill_container: false
name: Select Playlist
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 154
target:
entity_id: [light_id]
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: amber
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 267
target:
entity_id: [light_id]
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-amber), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: orange
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 500
target:
entity_id: [light_id]
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-orange), 0.2);
}
1 Like
Exactly what i was looking for…
Thank you so so so so much…
1 Like
Is it possible to change the secondary info to the fan card to show High, Medium, Low, or Off instead of the percentage?
I’ve used this on other cards.
[[[
if (entity.attributes.percentage == 100) return "High";
if (entity.attributes.percentage == 74) return "Medium";
if (entity.attributes.percentage == 25) return "Low";
if (entity.attributes.percentage == 0) return "Off";
return "Unknown";
]]]
is it possible to template “primary” ?
Like this ?
cards:
- type: custom:mushroom-template-card
{% if state_attr('media_player.wachtzaal', 'source') == 'Spotify Connect' %}
primary: Spotify-Lijst ({{ state_attr("media_player.wachtzaal", 'media_artist') }} - {{ state_attr("media_player.wachtzaal", 'media_title') }})
{% else %}
primary: Muziek
{% endif %}