You can set height and width of the card
type: custom:mushroom-fan-card
entity: fan.bedroom_fan
card_mod:
style: |
ha-card{
width: 150% !important;
height: 300px !important;
}
Possibly. Haven’t seen any other issues with that card at all using templates, so why I posted here.
In searching this thread I wasn’t able to find anyone trying to use a template in a tap_action.
It’s an interesting concept, I’ll do some testing. I do believe the call service with a script is probably easier.
1 Like
I would like to change the color of the icon at the change of state, I use 4 states, but I don’t know how to compose the command. 3 I would like 4 of states, not only 2 but also with two nothing.
type: custom:mushroom-select-card
entity: input_select.modalita_posizione
icon_color: '{% if is_state(entity, ''Assente'') %} grey {%else %} blue {% endif %}'
fill_container: true
try this:
card_mod:
style: |
ha-state-icon {
{% if is_state(entity, ''Assente'') %} yellow {%else %} blue {% endif %}'
}
I try but not work. The icon are Blu (the standard color). I try whitout card mode and the icon is only white. I’m not sure if is possible with this card 
Sorry, try this:
type: custom:mushroom-select-card
entity: input_select.selettore_irrigazione
fill_container: true
card_mod:
style: |
ha-state-icon {
color: {{ 'var(--red)' if is_state('input_select.selettore_irrigazione', 'Giardino') else 'var(--contrast2)' }};
}
Sorry, I wrote wrong entities, I wrote the correct code below but it doesn’t work.
I would like 4 different colors for 4 modes:
Red Absent
Green House
Purple Nanna children
Night blue
type: custom:mushroom-select-card
entity: input_select.modalita_posizione
fill_container: true
card_mod:
style: |
ha-state-icon {
color: {{ 'var(--red)' if is_state('input_select.modalita_posizione', 'Casa') else 'var(--contrast2)' }};
}
I really don’t know how to do it, I’ve done other similar things but without card mode, directly in the icon color settings for example like this:
icon: >-
{% set humid = states(entity) | float%} {% if humid < 40 %}
mdi:water-percent-alert {% elif humid > 60 %} mdi:water-percent-alert
{%else %} mdi:water-percent {% endif %}
icon_color: >-
{% set humid = states(entity) | float%} {% if humid < 40 %} blue {% elif
humid > 60 %} red {% else %} green {% endif %}
This only works in the template card, template chip, and the title card.
if you need to use templates - i suggest you use the template card or chip. if you cant for whatever reason use that, then you do need to use card mod. for example this:
type: custom:mushroom-select-card
entity: input_select.speaker_group_dropdown
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('input_select.speaker_group_dropdown', 'Upstairs Speakers') %}
--shape-color: rgba(var(--rgb-red),0.2) !important;
{% else %}
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
{% endif %}
}
.: |
ha-state-icon {
{% if is_state('input_select.speaker_group_dropdown', 'Upstairs Speakers') %}
color: rgba(var(--rgb-red), 1) !important;
{% else %}
color: rgba(var(--rgb-blue), 1) !important;
{% endif %}
}
1 Like
Thank you very much, at least I understood why it didn’t work. Now I’ll have to understand how to use this, I’m trying, but I’m missing some notions, I haven’t understood how to decide 4 different colors for 4 different states of the entity. The example only has 2 that reason, “if so” do this, “otherwise” do that. At least I think that’s how I understood it.
Could you give me an example?
I’ve gotten this far, then I’ll also have to understand how to define the colors, but I think that will be a minor problem, I should find some information online
type: custom:mushroom-select-card
entity: input_select.modalita_posizione
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('input_select.modalita_posizione', 'Casa') %}
--shape-color: rgba(var(--rgb-red),0.0) !important;
{% else %}
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
{% endif %}
}
.: |
ha-state-icon {
{% if is_state('input_select.modalita_posizione', 'Assente') %}
color: rgba(var(--rgb-red), 1) !important;
{% else %}
color: rgba(var(--rgb-blue), 1) !important;
{% endif %}
}
Sure. just use elseif like this:
{% if is_state('input_select.modalita_posizione', 'Casa') %}
--shape-color: rgba(var(--rgb-red),0.0) !important;
{% elif is_state('input_select.modalita_posizione', 'Assente') %}
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
{% else %}
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% endif %}
and keep going with more elif if you need 
1 Like
many thanks!
so in your example there are not 2 different possibilities indicated but two things to change, the shape and the color? correct?
Sorry for the many stupid questions, I’m trying to learn slowly
So 2 things are being changed seperately (because we have to) the icon background. and the icon itself.
icon background is the .shape {, and the ha-state-icon {, is the icon being changed.
each has 2 seperate colors being controlled by each of their if statements.
1 Like
Thanks thanks thank!
Solved
- type: custom:mushroom-select-card
entity: input_select.modalita_posizione
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('input_select.modalita_posizione', 'Casa') %}
--shape-color: rgba(var(--rgb-red),0.0) !important;
{% elif is_state('input_select.modalita_posizione', 'Assente') %}
--shape-color: rgba(var(--rgb-blue), 0.0) !important;
{% elif is_state('input_select.modalita_posizione', 'Linda Dorme') %}
--shape-color: rgba(var(--rgb-blue), 0.0) !important;
{% elif is_state('input_select.modalita_posizione', 'Notte') %}
--shape-color: rgba(var(--rgb-blue), 0.0) !important;
{% else %}
--shape-color: rgba(var(--rgb-green), 0.0) !important;
{% endif %}
.: |
ha-state-icon {
{% if is_state('input_select.modalita_posizione', 'Casa') %}
color: rgba(var(--rgb-green), 1) !important;
{% elif is_state('input_select.modalita_posizione', 'Assente') %}
color: rgba(var(--rgb-red), 1) !important;
{% elif is_state('input_select.modalita_posizione', 'Linda Dorme') %}
color: rgba(255, 0, 255, 1) !important;
{% elif is_state('input_select.modalita_posizione', 'Notte') %}
color: rgba(var(--rgb-blue), 1) !important;
{% else %}
color: rgba(var(--rgb-red), 1) !important;
{% endif %}
}
Right, I get that HA has its limitations - similar to how you can’t use a template for the icon_color in a glance card - but using a mushroom-template-card you are able to do just this.
It’s why I was asking here, in mushroom thread, if anyone knows if mushroom could handle a template in the tap_action (or hold_action for that matter) section.
Appears it’s not able to from what I’m seen to date, so, at least for me,
+1 for this request: Add ability to use a template in tap_action section
I am struggling to get the alarm card configured to match my other mushroom cards while still using the default Alarmo state icons, which provide more information at a glance. What I want is for the alarm card to look like the two cards on the left but with the Alarmo state icon (currently shown in the bottom right):
Here’s my code:
type: custom:button-card
entity: alarm_control_panel.alarmo
name: Security
styles:
card:
- padding-top: 0
grid:
- grid-template-areas: '"button1" "n" "s"'
- grid-template-rows: min-content min-content
- grid-template-columns: 1fr 1fr
name:
- font-size: 14px
- font-weight: bold
- color: '#e1e1e1'
- margin-top: 4px
- margin-bottom: 0px
state:
- font-size: 12px
- font-weight: bolder
- color: '#9b9b9b'
- margin-top: 2px
- margin-bottom: 8px
button1:
- padding: 0
custom_fields:
button1:
card:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
layout: vertical
primary_info: none
secondary_info: none
icon: mdi:security
card_mod:
style: |
ha-card {
border: none;
background: none;
}
I apologize if this was addressed in thread, I did search for an answer and tried a few things, but have so far not had success. I had color changes coded for the icons in the Chips card, but at some point in the past month the the icon color stopped updating from the theme value. Is my issue using the icon_color variable?
This is the YAML that I am using
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.hvac_toggle
state: 'on'
card:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: switch.the_fire
icon: mdi:fire
icon_color: |-
{% set _state=states('switch.the_fire') %}
{% if _state=="on" %}
{{'#f92aad'}}
{% elif _state=="off" %}
{{'#475c31'}}
{% else %}
red
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
- type: template
entity: switch.living_room_fan
icon: mdi:fan
content: ''
icon_color: |-
{% set _state=states('switch.living_room_fan') %}
{% if _state=="on" %}
{{'#f92aad'}}
{% elif _state=="off" %}
{{'#475c31'}}
{% else %}
red
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.the_ice
icon: mdi:air-conditioner
icon_color: |
{% set _state=states('switch.the_ice') %}
{% if _state=="on" %}
{{'#f92aad'}}
{% elif _state=="off" %}
{{'#475c31'}}
{% else %}
red
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.bedroom_fan
icon: mdi:fan
content: ''
icon_color: |-
{% set _state=states('switch.bedroom_fan') %}
{% if _state=="on" %}
{{'#f92aad'}}
{% elif _state=="off" %}
{{'#475c31'}}
{% else %}
red
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.bed_ice
icon: mdi:snowflake-check
icon_color: |
{% set _state=states('switch.bed_ice') %}
{% if _state=="on" %}
{{'#f92aad'}}
{% elif _state=="off" %}
{{'#475c31'}}
{% else %}
red
{% endif %}
tap_action:
action: toggle
card_mod:
style:
div:
mushroom-template-chip:nth-child(2):
$:
mushroom-chip: |
ha-state-icon {
{% set _state = states('switch.living_room_fan') %}
{% if _state == "on" %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
mushroom-template-chip:nth-child(4):
$:
mushroom-chip: |
ha-state-icon {
{% set _state = states('switch.bedroom_fan') %}
{% if _state == "on" %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Good morning, sorry, I’m asking here because many of you have helped me and I hope you will continue to do so I have my card for electrical sockets which is almost perfect for my needs, I would like to add two different actions for the tap_action and hold_action with two different antity:
I would like tap_action: more-info (sensor.presa_multimediale_cucina_power
and hol_action: toogle (switch.presa_multimediale_cucina)
But I can’t figure out how to do it, this is my code:
- type: custom:mushroom-template-card
primary: Presa Multimediale Cucina
secondary: |
{{states('sensor.presa_multimediale_cucina_power') }} W
icon: >
{% if is_state('switch.presa_multimediale_cucina', "off") %}
mdi:power-plug-off-outline {% else %} mdi:power-plug-outline {% endif
%}
icon_color: >
{% set k = states('sensor.presa_multimediale_cucina_power')| int (0)
%} {% set d = states ('switch.presa_multimediale_cucina') %} {% if (k
>= 20 and d == 'on') %} green {% elif (d == 'off') %} red {% else
%} grey {% endif %}
fill_container: true
layout: vertical
tap_action:
action: more-info
entity: switch.presa_multimediale_cucina
multiline_secondary: true
card_mod:
style: |
ha-card {
{% set e = states('sensor.presa_multimediale_cucina_power') | int(0) %}
{% if (e | int(0) <= 0 ) %} --card-primary-color:grey;--card-secondary-color:grey
{% elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
{% elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
{% elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) <= 800 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
{% else %}
--card-primary-color:grey;--card-secondary-color:grey
{% endif %}
You need to add an entity to get the tap action and hold action an entity to control.
type: custom:mushroom-template-card
primary: Presa Multimediale Cucina
entity: switch.kitchen_lights
secondary: |
{{states('sensor.presa_multimediale_cucina_power') }} W
icon: >
{% if is_state('switch.presa_multimediale_cucina', "off") %}
mdi:power-plug-off-outline {% else %} mdi:power-plug-outline {% endif
%}
icon_color: |
{% set k = states('sensor.basement_sensor')| int (0) %}
{% set d = states ('switch.presa_multimediale_cucina') %}
{% if (k >= 20 and d == 'on') %} green
{% elif (d == 'off') %}
red
{% else %}
grey
{% endif %}
fill_container: true
layout: vertical
tap_action:
action: toggle
hold_action::
action: more-info
multiline_secondary: true
card_mod:
style: |
ha-card {
{% set e = states('sensor.presa_multimediale_cucina_power') | int(0) %}
{% if (e | int(0) <= 0 ) %} --card-primary-color:grey;--card-secondary-color:grey
{% elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
{% elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
{% elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) <= 800 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
{% else %}
--card-primary-color:grey;--card-secondary-color:grey
{% endif %}
}
The entity will need switched to whatever you are trying to control.