Thanks for the clarification, I’ll edit the post 
Sure no problem and thank you in advance!
Hello, can you please help me?
I would like my fan to spin when they are on.
I’m not doing well at all.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style: |
ha-icon {
animation: spin 1s linear infinite;
}
ha-icon[icon-animation='none'] {
animation: none;
}
This should work for you. There may be an easier way, but this is what I use.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
2 Likes
@LiQuid_cOOled Thank you very much. It works perfectly. Can I ask how to set the fan to not spin if the entity is off?
This should do it
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
1 Like
How can I replace an icon with a local image?
Can you share the code you are working with?
@LiQuid_cOOled Thank you very much for your help. Everything works great. I wish you a wonderful Christmas.
1 Like
You can make these changes via customize.yaml
Example:
1 Like
Hello,
I have changed the size of the buttons, in cover card, i saw your tutorial 
, but the problem is the slider i can’t change the size…I already tried slider-track-background but doesn’t work.
Do you known how to do it?
mushroom-button:nth-child(1):
$: |
ha-icon {
--card-mod-icon-color: #6A6A6A;
}
.button {
background: #E2E2E2!important;
width: 70px!important;
}
Take a look at this section in the guide 
Clearly i need to change wording slightly as i am saying it doesnt apply when making buttons smaller, but i mean it doesnt apply when making the slider smaller.
Didn’t work
mushroom-cover-position-control$: |
mushroom-slider {
{% if states ('cover.shellyswitch25_68c63af92f48') == 'open'%}
--slider-bg-color: #89DF83!important;
{% else %}
--slider-bg-color: #FF483F!important;
{% endif %}
{% if states ('cover.shellyswitch25_68c63af92f48') == 'opening'%}
--slider-bg-color: #89DF83!important;
{% endif %}
{% if state_attr ('cover.shellyswitch25_68c63af92f48', 'current_position') == 100 %}
--slider-color: #89DF83!important;
{% else %}
--slider-color: #B9B7B7!important;
{% endif %}
mushroom-slider$: |
.slider {
width: 120px!important;
}is it possible to make a mushroom select card change its icon and color with each state?
for example:
if my ‘home_status = home’
icon: mdi:home account
icon_color: green
and if ‘home_status = away’
icon: mdi:home-export-outline
icon_color: red
Post your full card mod section. But the indentation is clearly wrong. You have 2 | in a row. 1 for mushroom-cover-position-control$: | and then 1 for mushroom-slider$: |
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider$: |
.slider {
width: 120px;
}
Not allowed. 2 | in a row.
card_mod:
style:
mushroom-cover-position-control$:
mushroom-slider$: |
.slider {
width: 120px;
}
Allowed.
This will probably also do it on its own:
card_mod:
style:
mushroom-cover-position-control$:
mushroom-slider$: |
.slider {
width: 120px !important;
{% if states (config.entity) == 'open'%}
--bg-color: #89DF83 !important;
{% else %}
--bg-color: #FF483F !important;
{% endif %}
{% if states (config.entity) == 'opening'%}
--bg-color: #89DF83 !important;
{% endif %}
{% if state_attr (config.entity, 'current_position') == 100 %}
--main-color: #89DF83 !important;
{% else %}
--main-color: #B9B7B7 !important;
{% endif %}
}
Yes with card mod. Just an example so replace with your entity and your entity states.
type: custom:mushroom-select-card
entity: input_select.speaker_group_dropdown
card_mod:
style: |
mushroom-shape-icon {
{% if states(config.entity) == 'Upstairs Speakers' %}
--card-mod-icon: mdi:home-account;
--icon-color: rgb(var(--rgb-red)) !important;
--shape-color: rgba(var(--rgb-red), 0.2) !important;
{% elif states(config.entity) == 'Downstairs Speakers' %}
--card-mod-icon: mdi:home-export-outline;
--icon-color: rgb(var(--rgb-green)) !important;
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:bug;
--icon-color: rgb(var(--rgb-blue)) !important;
--shape-color: rgba(var(--rgb-blue), 0.2);
{% endif %}
}
1 Like
Thanks Dimitri… its worked
How we know to use this configurations?
Sorry dont understand your question?
How you know do you have put muhsroom-sliders$: ?
After you have put --bg-color: and main-color:
How i can know that? Developer Tools?
Thanks
Thanks, this works.