I had the animation part the same way you wrote it. After saving it in HA and reopening the code it looked like what I postedā¦ So I assumed it wouldnāt make much of a difference except in readability.
I will correct it again!
Thank you so much for your help. That was the last part I still had to fix to make it look like I wanted it!! 
That concludes hours of work 
Thats a bit harder depending on your exact requirements and will never really be perfect as it wont survive a HA restart.
So it will restart at 0 when HA restarts no matter what.
But the best version i have found is this:
{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.bedroom_wardrobe_right_contact.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }}
Its the most flexible i have found because it counts days as well. Most code you find for this only counts hours and resets at 24 hours unfortunately. This works perfectly like youād expect
For some reason this card sometimes displays like this;
(which is good)
And sometimes like this:
(which is not good)
This last one throws errors in Chrome Developer Tools:
This the code of the card:
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: '{{states(''sensor.p1_meter_3c39e72cd756_active_power'')}} W'
secondary: Stroom
icon: mdi:power-plug
icon_color: green
entity: sensor.p1_meter_3c39e72cd756_active_power
- type: custom:mushroom-template-card
primary: '{{states(''sensor.gasverbruik_per_uur'')}} mĀ³'
secondary: Gas
icon: mdi:gas-burner
entity: sensor.gasverbruik_per_uur
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.p1_meter_3c39e72cd756_active_power
name: Temperature
color: var(--green-color)
- entity: sensor.gasverbruik_per_uur
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 12
points_per_hour: 6
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Any ideas? Thanks.
Edit #1: Saw a post in another topic:
Going to try that now.
please i dont not understand more, we have change but is not good working
card_mod:
style: |
ha-state-icon {
animation: spin 0.5s linear infinite reverse;' if states('sensor.hybride_pomp_power') | float > 24 }}
border-radius: 50%;
border: 8px dotted rgb(var(--rgb-red));
}
.shape {
border: 4px dashed rgb(var(--rgb-green));
{{ '--shape-animation: spin 2s linear infinite;' if states('sensor.hybride_pomp_power') | float > 24 }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
Is it possible to change the background color of a chip card depending on the state of a sensor? I know that the icon_color can be changed, but I need to change the background. Any help would be appreciated!
You will need to use card mod.
Look at my guide here
Look first at the section called extra card mod info and then templating inside of card mod.
Then look at any card styling section for any of the cards in the comments of the post 
This is a great resource. Didnāt know that yet! Many thanks for creating it. Now I know how it works!
Firstly look at your section here:
animation: spin 0.5s linear infinite reverse;' if states('sensor.all_standby_energy') | float > 7 }}
You dont have a ā in front of animation despite the fact that the animation section ends with one.
animation: spin 0.5s linear infinite reverse;'
You also have 2 close brackets without the open brackets first.
if states('sensor.hybride_pomp_power') | float > 7 }}
So the correct syntax if you are going to have your if statements this way is this:
{{'animation: spin 0.5s linear infinite reverse;' if states('sensor.all_standby_energy') | float > 7 }}
Now you also have an issue because you are referring to .shape without referencing the object that .shape comes from. This is a bit harder to explain but essentially you need to start at the root of an object and drill down to the element that you want to style.
So for .shape you would need to have this instead.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
The issue for you is then that now style: no longer has style: | which you are using for the ha-state-icon section.
So what you can do is this:
.: |
ha-state-icon {
Think of the .: | as resetting you back to style: |
So all in all it would look like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px dashed rgb(var(--rgb-green));
{{ '--shape-animation: spin 2s linear infinite;' if states('sensor.hybride_pomp_power') | float > 2 }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
.: |
ha-state-icon {
{{ 'animation: spin 0.5s linear infinite reverse;' if states('sensor.hybride_pomp_power') | float > 6 }}
border-radius: 50%;
border: 8px dotted rgb(var(--rgb-red));
}
But like i said in my last post. The reason you are having issues most of the time is because it looks like you arent noticing your if statements and then breaking them.
So i would write it like this. Just so it is easier to see what is going on.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px dashed rgb(var(--rgb-green));
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
{% if states('sensor.hybride_pomp_power') | float > 2 %}
--shape-animation: spin 2s linear infinite;
{% else %}
{% endif %}
}
.: |
ha-state-icon {
border-radius: 50%;
border: 8px dotted rgb(var(--rgb-red));
{% if states('sensor.hybride_pomp_power') | float > 6 %}
animation: spin 0.5s linear infinite reverse;
{% else %}
{% endif %}
}
These animations donāt seem to work anymore?
Try like this:
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
Im working on a draft updating all of these animations to the new format because we keep getting so many questions about itā¦
Please help me with light card
I need to apply --shape-color to background of etiire light card including light color update
how to do it with card-mod?
To color the entire background of the card the same color as the color of the light you can do this:
card_mod:
style: |
ha-card {
background: {{ '#%02x%02x%02x' % state_attr('light.lounge_lights','rgb_color')}};
}
it converts the rgb_color values that the state attribute gives into hex format.
Can also do it like this:
card_mod:
style: |
ha-card {
background: rgb({{ state_attr('light.lounge_lights','rgb_color')[0]}}, {{ state_attr('light.lounge_lights','rgb_color')[1]}}, {{ state_attr('light.lounge_lights','rgb_color')[2]}});
}
Takes each value seperately and adds it as an rgb value. Better like this because you could then use rgba to add an alpha channel like the shape color has like this:
card_mod:
style: |
ha-card {
background: rgba({{ state_attr('light.lounge_lights','rgb_color')[0]}}, {{ state_attr('light.lounge_lights','rgb_color')[1]}}, {{ state_attr('light.lounge_lights','rgb_color')[2]}}, 0.7);
}
EDIT: found an even better way of doing it using jinja join. You can convert the list that the rgb_color attribute gives to a string that rgba can use. You just then add your own alpha channel at the end. With the above method the benefit is you could influence each of the r g b colors seperatly by just doing * 0.5 for example to halve the amount of red in the color. Cant do this with the below.
card_mod:
style: |
ha-card {
background: rgba({{ state_attr('light.lounge_lights','rgb_color') | join(', ')}}, 0.8)
}
Great! Thanks, bro
I will try this
FYI posted an update with an even easier method
i may have missed this but with a template card, how do i make the icon show locked when door is locked and an unlocked icon when door is unlocked? ok figured it out, was the same as icon color fieldā¦ now doors are green with the locked icon when locked and red with the unlocked icon when unlocked.
{% if is_state('lock.front_door_lock', 'locked') %} mdi:lock{% else %} mdi:lock-open {% endif %}
Thanks again! Can I integrate it in theme to apply to all cards on dashboard ?
solution:
card-mod-card-yaml: |
.: |
ha-card {
background: rgba({{ state_attr('light.lounge_lights','rgb_color') | join(', ')}}, 0.2)
}
Hello everyone.
I am now building a new dashboard called Live Tiles. This time I am trying to avoid using āvertical-stack-in-cardā and āstack-in-cardā as much as I can because these 2 card slows down the page load. So far I have created a super fast dashboard with dynamic cards. But I couldāt decide which theme to use. So I decided to ask you folks.
So which one do you think should be the main look of the Dashboard ?
My room cards at the top of the page will also look like this.
I will post the codes and the guide on my github page as soon as complete the dashboard.
Hi,
Nice work! Dark blue theme is the best (imho)
happy sunday all together,
i am working on my dashboard, inspired by all the great looking oneās you have created
at the moment i am trying to find out, how i want to arrange things and try adapt examples i found in this thread
one problem i have at the moment, you can see in the picture. To see it better i changed the background to full red. what i want to achieve is to get rid of the gap between the two.
The code for is
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-template-card
primary: Colour Printer
entity: binary_sensor.sarahs_printer_online
secondary: '{{ ''Online'' if is_state(entity, ''on'') else ''Offline'' }}'
icon: >-
{{ 'mdi:printer' if is_state(entity, 'on') else 'mdi:printer-off'
}}
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
background: red;
border-radius: 0%;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.sarahs_printer_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else
'mdi:chevron-up' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
background: red;
border-radius: 0%;
align-items: flex-end;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.processor_temperature
content: '{{ states(entity) | round(1, ''floor'') }} Ā°C'
icon: mdi:thermometer
icon_color: |
{% if states('sensor.processor_temperature') | int > 80 %}
red
{% elif states('sensor.processor_temperature') | int > 70 %}
orange
{% elif states('sensor.processor_temperature') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
- type: template
entity: sensor.processor_use
content: '{{ states(entity) | round(1, ''floor'') }} %'
icon: mdi:cpu-64-bit
icon_color: |
{% if states('sensor.processor_use') | int > 80 %}
red
{% elif states('sensor.processor_use') | int > 70 %}
orange
{% elif states('sensor.processor_use') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
- type: template
entity: sensor.memory_use_percent
content: '{{ states(entity) | round(1, ''floor'') }} %'
icon: mdi:memory
icon_color: |
{% if states('sensor.memory_use_percent') | int > 80 %}
red
{% elif states('sensor.memory_use_percent') | int > 70 %}
orange
{% elif states('sensor.memory_use_percent') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
- type: template
entity: sensor.disk_use_percent_config
content: '{{ states(entity) | round(1, ''floor'') }} %'
icon: mdi:harddisk
icon_color: |
{% if states('sensor.disk_use_percent_config') | int > 80 %}
red
{% elif states('sensor.disk_use_percent_config') | int > 70 %}
orange
{% elif states('sensor.disk_use_percent_config') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
alignment: end
style: |
:host {
background: rgb(28,28,28);
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
- type: conditional
conditions:
- entity: input_boolean.sarahs_printer_dropdown
state: 'on'
card:
type: custom:mushroom-title-card
title: test
Thx for your help
I would just increase the width of your first template card instead.
- type: custom:mushroom-template-card
primary: Colour Printer
entity: binary_sensor.sarahs_printer_online
secondary: '{{ ''Online'' if is_state(entity, ''on'') else ''Offline'' }}'
icon: >-
{{ 'mdi:printer' if is_state(entity, 'on') else 'mdi:printer-off'
}}
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
background: red;
border-radius: 0%;
width: 102% !important;
--ha-card-box-shadow: 0px;
}
only increased the width by 2% so everything else should still be fine
