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 
1 Like
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 %}
}
3 Likes
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…
3 Likes
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)
}
5 Likes
Great! Thanks, bro
I will try this
FYI posted an update with an even easier method 
2 Likes
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 ?
- Orange Theme
- Multi Color Theme
- Dark Blue Theme
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.
3 Likes
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
@dimitri.landerloos
i have an issue, after lights off the color background color don’t back to default. I tried
ha-card {
{% if states(config.entity, 'on') %}
background: rgba({{ state_attr(config.entity,'rgb_color') | join(', ')}}, 0.2)
{% else %}
background: var(--ha-card-background)
{% endif %}
}
But it doesn’t work, could you please advice some workaround ?
Seems to work fine for me with else just being blank?
card_mod:
style: |
ha-card {
{% if states(config.entity, 'on') %}
background: rgba({{ state_attr(config.entity,'rgb_color') | join(', ')}}, 0.2)
{% else %}
{% endif %}
}
EDIT. Nevermind realised what the issue was. You are using mixed syntax for states vs is_state.
is_state version:
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba({{ state_attr(config.entity,'rgb_color') | join(', ')}}, 0.2)
{% else %}
{% endif %}
}
states == version:
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'on' %}
background: rgba({{ state_attr(config.entity,'rgb_color') | join(', ')}}, 0.2)
{% else %}
{% endif %}
}
1 Like
It works, thanks again! I will learn syntax better
Also i have light entities without color attributes, and looks like these errors about this
I gues there is needs some check for exstig color attributes? If yes, what is the best way to do it?
Best place to check what your lights support is in the states under developer tools. Make sure the light is on when you check 
A light that is only dimmeable
A light that has color and color temp control
But you may have some funkier lights than me that have different support. So best to check them individually
1 Like
Thaks, ii mea how to do iit in code, and i have lights that i fact equals switch entity, e.q. light without any attribute.
i found iconstruction is defined, but how to check existing color attribute with this?
then i’m goiig to wrap main code with this check