sorry i forgot to attach it, i edited the post right away.
the examples below I didnāt exist I would have made it as I said simply with the āconditionā card, but since it doesnāt look very nice I havenāt changed this yet so
Does this work for you?
Code
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Bedroom
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.bedroom_temperature_humidity_temperature'].state}Ā°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.bedroom_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_lights
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
3 Likes
arrrgh i just came up with the solution by myself. sometimes it helps to ask for help. donāt know why i didnāt come up with the idea of using the grid card as a base before.
1 Like
Almost, I canĀ“t get the lights to toggle.
I tried tried to add tap_action without any luck, see below
Still I come to sensor history when I try to toggle the lights
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_ceiling
tap_action:
action: toggle
icon: hue:bulb-classic
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
}
Stupid meā¦ didnt even test that lol.
throw a z-index: 1; in there and it will work 
Code
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Bedroom
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.bedroom_temperature_humidity_temperature'].state}Ā°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.bedroom_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_lights
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
ive also edited my original response to include it
1 Like
Thanks again!
I got it working with that.
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px !important;
}
Like a Glove!
Thank you for your super support and quick responses.
1 Like
It is possible to put the text into the circle? Its a template card.
try like this:
2 Likes
thanks i did it!
1 Like
Simply amazing thank you!! This is a much better way and also thank you for the code. Itās given me lots of reference points that I did not know before.
@dimitri.landerloos now working!!! (animated gif)
8 Likes
Iām using this code for changing the icon colors on a light card
type: custom:mushroom-light-card
entity: light.office_ceiling_light
show_brightness_control: true
use_light_color: false
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
name: Ceiling Light
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px solid;
--icon-color: orange !important;
--icon-color-disabled: rgba(255,255,255) !important;
--shape-color-disabled: rgb(0,0,0) !important;
--shape-color: rgb(35,35,41) !important;
}
Is there a way that I can change the shape border to change color when the light is on/ off?
Thanks in advance
beacause if i use this code
type: custom:stack-in-card
mode: vertical
card_mod: null
style: |
ha-card {
width: 240px;
}
cards:
- type: custom:stack-in-card
card_mod: null
style: |
ha-card {
background: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statistiche frigorifero
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
secondary: Sensore
card_mod: null
style: |
ha-card {
padding-right: 40px;
}
- type: custom:mushroom-template-card
secondary: batteria
card_mod: null
style: |
ha-card {
background: none;
margin-top: -15px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
secondary: Allagamento cucina
- type: custom:mushroom-template-card
secondary: |
{{ states('sensor.sensore_antiallagamento_battery') | round(0) }}%
card_mod: null
style: |
ha-card {
padding-left: 60px !important;
}
card_mod: null
style: |
ha-card {
background: none;
margin-top: -25px;
}
The text āAllagamento cucinaā is not all visible?
Padding string is it wrong?
thank you
Sure. Just like this:
type: custom:mushroom-light-card
entity: light.office_ceiling_light
show_brightness_control: true
use_light_color: false
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
name: Ceiling Light
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states(config.entity) == 'on' %}
border: orange 2.5px solid;
{% else %}
border: white 2.5px solid;
{% endif %}
--icon-color: orange !important;
--icon-color-disabled: rgba(255,255,255) !important;
--shape-color-disabled: rgb(0,0,0) !important;
--shape-color: rgb(35,35,41) !important;
}
Btw in most instances i would actually recommend using outline: instead. As border: changes the size of the object based on the stroke of the border. Outline just draws an outline on the object without changing its size. Syntax is the same as border otherwise.
Doesnt make a big difference in your case, but here is an example to show the difference
Outline on top, border on bottom. Notice how with border the entire card is a tiny bit smaller
Here is the same effect with 25px stroke. Just to illustrate the difference better.
1 Like
Without trying to fix all of your other padding this is the easiest solution.
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
width: 240px;
}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statistiche frigorifero
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
secondary: Sensore
card_mod:
style: |
ha-card {
padding-right: 40px;
}
- type: custom:mushroom-template-card
secondary: batteria
card_mod:
style: |
ha-card {
background: none;
margin-top: -15px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
secondary: Allagamento cucina
card_mod:
style: |
ha-card {
width: 200px;
}
- type: custom:mushroom-template-card
secondary: |
{{ states('sensor.sensore_antiallagamento_battery') | round(0) }}%
card_mod:
style: |
ha-card {
padding-left: 60px !important;
}
card_mod:
style: |
ha-card {
background: none;
margin-top: -25px;
}
I would recommend that you follow how i have put the code in the future.
Your code will get very messy if you continue to do this:
card_mod: null
style: |
ha-card {
background: none;
}
Instead of this:
card_mod:
style: |
ha-card {
background: none;
}
1 Like
Looks very nice, post your finished code for people to use (steal) 
thanks @dimitri.landerloos ! I had spent several hours trying to get this working - and was clearly over thinking ! Thanks also for the tip on border vs. outline - makes sense and am implementing it!
thanks again!
1 Like
I hope someone can help me.
I nee the Code to get the washing-machine animate if the entity is on. I have tried a lot but everytime i failedā¦
type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.trockner_lauft
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
use_entity_picture: false
content_info: state
icon_color: primary
- type: entity
entity: input_boolean.waschmaschine_lauft
double_tap_action:
action: none
content_info: state
tap_action:
action: none
hold_action:
action: none
icon_color: primary
It should animate like the example:
type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: amber
primary: Washing Machine
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
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); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
Hi guys,
can someone help? I am trying to build something like the following: 
It is basically a template entity card in combination with chip cards. But how can I aline the cards for dryer, oven and dishwasher at the end. When I add them with a horizontal stack card they get seperated in equal columns. I have several of this cards and they get only shown if they are turned on. Otherwise they remain hidden. So it would be sufficent if they are all in one row alined at the end.
You are using the old versions of the animations. These dont work anymore. Use from the below instead.
Then in order to apply when an entity is on you can do this:
{% if states('input_boolean.yourentityid') == 'on' %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
{% else %}
{% endif %}
I notice you are also confusing animating the icon of a card vs a chip. These are actually done very differently.
With a card icon animation you can just do this:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
But with chips you have to drill further. From the main chip card add this:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.dimitri_landerloos
- type: entity
entity: person.dimitri_landerloos
card_mod:
style:
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
nth-child(2) just denotes the chip count that you want to apply the styling to. So the 2nd chip in this example.