mm ok thank you again @LiQuid_cOOled 
it is a bit of a hack… but i will try thanks 
Not sure there is another way…
Thanks a lot, It looks really simple 
The color-Change Idid I in the style of card_mod that was my mistake.
I try to intigrate the following line in an other code, with same function, but the icon is online stable.
transform-origin: 50% 110%
I cant figure out who the syntax of CSS is. Had anybody a good tutorial or something?
I really want to do it by myself, instead of asking everything. Its nice that some helps when it is difficult, but this is more simple I think
An other question is: Can i use card_mod with any cards?
custom:button-card or something?
hey. anyone know how to change slider background in mushroom light card?
Please give me selector and rest of it?
trying with that but it doesnt work
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
mushroom-light-color-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, red 0%, orange 10%, yellow 20%, lightgreen 30%, green 40%, lightblue 50%, blue 60%, purple 70%, fuchsia 80%, red 100%) !important;
}
mushroom-light-color-temp-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, teal 0%, white 100%) !important;
}
there’s a guide by dimitri.landerloos here includes almost everything
Card Mod works in most instances, but requires understanding accessing the shadow-root of an object. Card Mod does works with Custom Button Cards, but the code will be different than Mushroom cards.
This is a good guide to start with both custom and standard HA cards…
This is a good starting point for understanding CSS commands.
2 Likes
As an addition: in many cases card-mod may be not needed for custom:button-card since it has its own “style” feature; but smth may be done by card-mod only…
1 Like
Hello. I am struggling to find an example on a conditional chip card.
I want to show a chip card when there is movement detected, but when there is no movement detected the chip card should not appear on the dashboard.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: >-
{{ states('sensor.senzor_living_roomerature_lumi_158d00044ab88b') |
round(1) }} °C | {{ states('sensor.humidity_lumi_158d00044ab88b') |
round(1) }} %
icon: mdi:sofa
entity: light.candelabru_living
icon_color: |-
{% if is_state('light.candelabru_living', 'on') %}
orange
{% elif is_state('light.instalatie_wifi', 'on') %}
orange
{% elif is_state('light.veioza', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /mushroom-one/living
hold_action:
action: none
multiline_secondary: false
layout: horizontal
fill_container: false
double_tap_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
:host {
--mush-icon-size: 60px;
height: 60px;
margin-left: -19px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.senzor_miscare_living_occupancy
double_tap_action:
action: none
icon_color: red
tap_action:
action: more-info
hold_action:
action: none
content_info: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: light
entity: light.instalatie_wifi
double_tap_action:
action: none
content_info: none
icon: mdi:string-lights
tap_action:
action: more-info
hold_action:
action: none
use_light_color: true
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: switch.plug_lumi_158d0001716f86_ch0_lumi_158d0001716f86
double_tap_action:
action: none
icon: mdi:television-classic
icon_color: primary
use_entity_picture: false
tap_action:
action: more-info
hold_action:
action: none
content_info: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: light
entity: light.veioza
double_tap_action:
action: none
icon: mdi:floor-lamp
use_light_color: true
content_info: none
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: climate.aer_conditionat
double_tap_action:
action: none
icon: mdi:air-conditioner
icon_color: primary
content_info: none
use_entity_picture: false
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-spacing: -7px;
}
Hello darko 1515
Example code:
- type: conditional
conditions:
- entity: binary_sensor.YOU_MOTION_SENSOR
state: 'on'
chip:
type: entity
entity: binary_sensor.YOU_MOTION_SENSOR
icon_color: red
content_info: none
1 Like
Is it possible to make a fire color in the fireplace animation be RED and fireplace itself TEAL
type: custom:mushroom-template-card
primary: Fireplace
icon: mdi:fireplace
icon_color: red
card_mod:
style: |
ha-state-icon {
animation: fire 800ms infinite;
transform-origin: 50% 85%;
}
@keyframes fire {
0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
}
@dimitri.landerloos I got this from your tutorial in Part 1 and would like to tweak a little bit, but don’t know how. You did that with Washer machine and it’s work great. Thank you
1 Like
Hello,
It needs updating because a lot has already changed under HA, Style etc… Card mod etc… but it works, you can check it from here.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
primary: 'Christmas Tree #2'
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
I am looking for a UTILITY ROOM Icon and don’t see any which I like. For now, I use a boiler (mdi: water-boiler) but want something more specific. Also want to animated this icon like I am doing now with the others. Any idea , what should I use? Thank you
Maybe: mdi:campfire
for Utility room 
This is what I have now:
I have an Electrical panel, water heater, furnace etc. in this room
Thank you very much, i could swear i tried this but don’t know for sure. Where can i found the updated codes?
What do you want to tweak in the fireplace animation?
Fireplace color TEAL( for example) and fire itself RED
@Zenia I think WebPower was trying to say to you that you can put an icon over an icon to create the fireplace look you are wanting to tweak. He gave the Christmas tree example code and that is why he suggested campfire icon. It wasn’t for your utility room.
Clip-path hides a portion of the background to create the animation. What you are trying to accomplish is possible, but will take multiple steps.
I can take a stab at it, if you’d like.
Oh, Sorry. I thought he was replying to my other post about Utility room icon
@WebPower sorry if I said something wrong
@LiQuid_cOOled , yes, please
TY
Something like this?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:fireplace
icon_color: teal
primary: Fireplace
card_mod:
style: |
ha-card{
border: none;
- type: custom:mushroom-template-card
icon: mdi:fire
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 12px;
background: none !important;
}
.shape:before {
content: "";
height: 4px;
width: 5px;
border-width: 0;
position: absolute;
background: yellow;
top:20px;
left:18px;
border-radius: 50%;
}
.: |
ha-card {
width: 66px;
left: 0px;
margin-top: -69px !important;
---icon-size: 90px;
border: none;
}
ha-state-icon {
animation: fire 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes fire {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
}
5 Likes