I dont think this is possible with card mod unfortunately. How the buttons are set up to show and hide are done in javascript. Your only option would probably be to make a fork of mushroom and edit that bit of the javascript directly.
Thx alot of your response. I will dig into that
Hi, how can I make my icon here āwhiteā, not or transparent is displayed
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
Hier der ganze Code
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: none !important;
box-shadow: none !important;
border: none !important;
}
The card mod line background-color: none !important; is making the icon transparent.
with the following code
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: #ffff66 !important;
box-shadow: none !important;
border: 2px solid red !important;
}
Hello.
First off i wanted to thank you for this amazing guide.
However i encountered a problem when trying to change the color of the slider of a mushroom-fan-card. Changing the icon colors works fine as expected but the slider doesnāt.
Does anybody have an idea why this doesnt work?
On the right hand side you can see that the style is not overwritten.
This is my yaml code:
- type: custom:mushroom-fan-card
entity: fan.wohnraumluftung
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style: |
mushroom-shape-icon{
--icon-color: rgb(var(--rgb-light-blue)) !important;
--shape-color: rgba(var(--rgb-light-blue), 0.2) !important;
}
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: rgb(var(--rgb-light-blue)) !important;
--bg-color: #d1eced !important;
}
Thank you. But the point is to make the ICON (here white) itself ātransparentā in the off state so that it is not visible. Here, for example, only the green icon should be visible.
Or perhaps there is another, more intelligent way of doing this?
take a look in the first post at the section called what the .: | and $ symbols do.
but essentially the issue is you have 2 | in a row. that is not allowed.
card_mod:
style: |
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: rgb(var(--rgb-light-blue)) !important;
--bg-color: #d1eced !important;
}
You see?
should be like this:
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: rgb(var(--rgb-light-blue)) !important;
--bg-color: #d1eced !important;
}
.: |
mushroom-shape-icon{
--icon-color: rgb(var(--rgb-light-blue)) !important;
--shape-color: rgba(var(--rgb-light-blue), 0.2) !important;
}
1 Like
use card mod to make the icon transparent when the condition is met. something like this:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: none !important;
box-shadow: none !important;
border: none !important;
}
card_mod:
style: |
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if states('cover.yourcover') == 'off' %}
color: transparent !important;
{% endif %}
}
Ah yes thank you for clarifying, it is working now.
Thank you so much!!!
sorry if this comes across as overaskingā¦
butā¦ in my effort to take out as many custom cards a possible, if not remotely possible to mimic them in core, would you happen to know the correct Dom path for animating the icon in the Tile card on a fanā¦
- type: tile
entity: fan.luchtreiniger_woonkamer
state_content:
- state
- percentage
- last-changed
features:
- type: fan-speed
card_mod:
style: |
ha-tile-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
or even .icon which does allow to colorize the icon are showing any animation.
I did set it to ha-card to see if the animation itself is working, and that was a bit too much haha.
hope you would be able to nudge me in the right direction
not a big ask, but technically out of scope. but i am working on a tile guide, so i have the answer immediately anyway 
type: tile
entity: fan.ensuite_relay_l1
state_content:
- state
- percentage
- last-changed
features:
- type: fan-speed
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
FYI, sometimes you will need just ha-icon sometimes ha-svg-icon think anywhere that the icon might change based on state you need ha-svg-icon whereas if its static you just need ha-icon.
oh and if you have manually assigned an icon in the card using the visual editor then it will also be ha-icon
2 Likes
nice Dimitri,
Ive used this now, and it works perfectly
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base =
'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.: |
.icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue;
{%- elif perc <= 33 %} lightskyblue;
{%- elif perc <= 67 %} dodgerblue;
{%- else %} darkblue;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %}
}
edit
added some corresponding blue colors.
too bad this doesnt also change the slider color. might need an extra yaml anchor on thoseā¦
2 Likes
dont have a fan with a speed control, but i think it might be this? havent gotten to fans yet
type: tile
entity: fan.downstairs_bathroom_relay_l1
features:
- type: fan-speed
card_mod:
style:
hui-tile-features$:
hui-fan-speed-tile-feature$:
ha-control-slider {
--control-slider-color: blue !important;
--control-slider-background: darkblue !important;
--control-slider-background-opacity: 1 !important;
}
right, Ive been playing with those, but the tile card is a horrible card to modā¦
one would wish for a single color element to suffice for the other elements to default along. But as far as I got now, we need to mod all independently.
let me have a go, and if you want it in a separate thread, Id be happy to post there, not polluting the Mushroom guideā¦
btw still fighting with my entity-pictures in the map card, which seems to be the most difficult card for styling its entities
its alright. you migth be able to use mostly these 2 for colors, but its a bit annoying yes.
card_mod:
style:
hui-card-features$:
hui-cover-position-card-feature$: |
.container {
--color: red !important;
}
.: |
ha-card {
--tile-color: red !important
}
Dom seems different and like this:
hui-card-features$:
hui-fan-speed-card-feature$: |
ha-control-slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue !important;
{%- elif perc <= 33 %} lightskyblue !important;
{%- elif perc <= 67 %} dodgerblue !important;
{%- else %} darkblue !important;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %};
--control-slider-background-opacity: 1 !important;
}
but as you can see we still need some auto adaptation for the background
that container --color does nothingā¦
suppose we need the same for the slider background what the icon background does on the colored icons.
I cant test with a fan sorry. but for the cover card the --color works as long as the path is the same taken.
but for the background you can just use this and not use the opacity at all. set it to the same color as the slider.
--control-slider-background: darkblue !important;
yes that works (might need to have another look at those colors)
style:
ha-tile-icon$: |
ha-svg-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base =
'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
hui-card-features$:
hui-fan-speed-card-feature$: |
ha-control-slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue !important;
{%- elif perc <= 33 %} lightskyblue !important;
{%- elif perc <= 67 %} dodgerblue !important;
{%- else %} darkblue !important;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %};
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue !important;
{%- elif perc <= 33 %} lightskyblue !important;
{%- elif perc <= 67 %} dodgerblue !important;
{%- else %} darkblue !important;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %};
}
.: |
.icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue;
{%- elif perc <= 33 %} lightskyblue;
{%- elif perc <= 67 %} dodgerblue;
{%- else %} darkblue;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %}
}
no more opacity.
will check if I can anchor those templatesā¦
2 Likes
Thanks for reply
is not transparent in off
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: none !important;
box-shadow: none !important;
border: none !important;
}
card_mod:
style: |
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if states('binary_sensor.fenster_wz') == 'off' %}
color: transparent !important;
{% endif %}
}
Oopps, i made a mistake. Remove the | after style: |
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if states('binary_sensor.fenster_wz') == 'off' %}
color: transparent !important;
{% endif %}
}