If itās jinja, then it does use the backend. Otherwise, I donāt think so.
So I do use some jinja2 templates with markdown-card (which also have card-mod stylings), but not more than before. I do have a lot of template sensors and binary sensors created (through configuration.yaml) which all are jinja2 if Iām correct. That has increased a little over the last 2 months, but by much. However, my CPU usage is very low if I look at the system (RPI4, 4GB) and temp hovers around 45-48 C.
Just very strange how this happened after using cards like auto-entities, decluttering-card and updates to browser_mod and card-mod. Seeing a video of my dashboard of 2 months ago, looks like night and day (old version was faster by a lot). Perhaps decluttering-card uses jinja internally for rendering the cards or something?
So I suppose no one using card-mod has issues then? Then I can move on from and investigate further.
Thanks for the response, I appreciate it and sorry for going so off-topic.
In my experience, installing a lot of custom cards can make the frontend slow down, and same goes with integrations and the backend.
tbh, using a lot of frontend JS doesnt hurt very much. Its where the Jinja comes in. Before Lovelace it was easy, Jinja was backend server side, and custom-ui JS was frontend browser side. While the latter kept growing stronger and stronger, that is not much of a problem these days. An iPhone might be stronger than a Rpi.
When the 2 get mixed, Jinja in Frontend, eg by template-entity-row, or thelovelace-card-templater, maybe even browser-mod, things start to weigh in. Jinja in front-end logic needs top be taken care of. Reason enough for me to try to keep the customizations in Custom-ui JS, and keep them as much as possible out of Jinja Card-mod. Of course Markdown card, which was the first jinja template card in Lovelace. But we cant live without that, and it wont hurt if you use only a few of those I suppose.
Fwiw, I noticed really and lag on using card-templates, which was odd, since it uses JSā¦
My suggestion would be to see if Jinja templates are happening a lot in your config, and if commenting them out would help.
1 Like
I am using lots of markdown cards for testing purpose as ālabelsā for each test case like this:
Could it be a problem?
HA is installed on RPi 3 / Libreelec (which is basically used for Kodi!!!), and the system sometimes is very slowā¦
Sorry for off-topic.
Not related to markdown butā¦ 12 mini-graph cards on one page can almost kill iPhone application (on iPhone X). It sometimes happens that the app is reloading again and again while scrolling page down to show next graphsā¦ I donāt know the framework behind but it really sucks. Cannot imagine such page is so heavyā¦
I was referring to Markdown using jinja templates in the content, (or in the card-mod style of course)
And yes, the mini-graph is a hog too in my experience, which probably has to do with the fact it has te read the history of the server (in my case a RPi) donāt think it has to do with the hand held though.
Again, try minimize backend issues as much as possible.
I have some entities card at the bottom of my wall mount got clipped. Is there a way using this card-mod to reduce the height of the card?
Thanks
I use this kind of markdown templates for instance, with card-mod:
## <ha-icon icon="mdi:lightbulb"></ha-icon> {% if is_state('sensor.woning_lampen_aan', '0')%} Alle lampen
staan uit. {% elif is_state('sensor.woning_lampen_aan', '1')%} Er
staat 1 lamp aan. {% else %} Er staan
{{states('sensor.woning_lampen_aan')}} lampen aan. {% endif%}
Which include template sensors, which I believe also use the jinja template engine right? But those use the backend if I understand correctly (the sensors themselves). Seeing as my CPU temp and load are very low all the time, I donāt think itās a RPI4 bottleneck right?
Also I use a lot of RomRiderās button-cards, which all have label_templates, like this:
label: |
[[[
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0');
]]]
Each button-card is rendered througha decluttering-card, which allows me to envoke browser-mod popups. And all this is inside an auto-entities card with the include filters. This allows me to automatically populate my UI with button-cards, which also auto-generate popup cards for the specific device. Adding a new light for instance to HA, automatically creates the light button-card, correct brightness label and popup slider with brightness, without doing anything.
Is decluttering-card heavy if itās loaded with many ālayersā like mine? I also use a dashboard without auto-entities, but still use a lot of decluttering-cards. That dashboard even struggles a lot of the time on my desktop (which is powerfull enough). Also my media_player cards are created using decluttering-cards.
Might try a new dashboard where I revert and manually write each button and use global popups (which I used before, but got tired of creating a new popup everytime a light changed). Instead of using decluttering-card and load it with different layers.
Tbh, I couldnāt say. Besides the pop-ups your config is nothing special 
Youāre the only one who is able to try and see. Disable the pop-ups and see if things get better. If not, try something else.
Also, processor % usage per se doesnāt mean a lot. I mean, what is low, or high? Mine is on 17 % often and has 7% as minimum while others see 2%.
Thatās 83 percent unused and thatās on a pi4 with 3126 entities and all customized.
Again, you never know till you find out 
1 Like
Trying to learn how to change an iconās color for buttons in a cardās footer (or header).
Here is an easy way:
type: entities
title: '--paper-item-icon-color -> .header-footer.footer'
style: |
.header-footer.footer {
--paper-item-icon-color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sensor.cleargrass_1_co2
- entity: sun.sun
Note that the color is changed only for the 1st entity, for the "sun.sun" we are supposed to change āactiveā color:
type: entities
title: '--paper-item-icon-XXX-color -> .header-footer.footer'
style: |
.header-footer.footer {
--paper-item-icon-active-color: red;
--paper-item-icon-color: cyan;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sensor.cleargrass_1_co2
- entity: sun.sun
That was a changing color by using variables.
And when I try to change a color directly for "ha-svg-icon" I am getting a wrong placement:
type: entities
title: color -> ha-svg-icon
style:
.header-footer.footer:
hui-buttons-header-footer:
$:
hui-buttons-base:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sun.sun
- entity: sun.sun
The same result I get when changing the "--paper-item-icon-color" variable for some particular item:
type: entities
title: '--paper-item-icon-color -> div'
card_mod:
style:
.header-footer.footer hui-buttons-header-footer$hui-buttons-base$: |
div:nth-child(1) {
--paper-item-icon-color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_1_co2
OK, this is NOT critical - but I wonder why this misplacement happens after applying a style.
HI Ildar,
since youāre in the mood: would you know of a way to set a background to a horizontal stack? Add background image to horizontal stack?
I think Ive explored every possible option, and even fellows here believe it impossible, but hey, youāre the magician Maybe Card-mod can be the rescue after allā¦
Hi there !
Iām looking for make rotate my entites cardās icon when itās on.
For now I just changed colors when itās on but I want a rotation too
type: entities
entities:
- entity: switch.vocolinc_vp5_1096ca_humidifier
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('switch.vocolinc_vp5_1096ca_humidifier', 'on') %}
green
{% elif is_state('switch.vocolinc_vp5_1096ca_humidifier', 'off') %}
orange
{% endif %}
}
I want use something like
-icon:
- animation:
- rotating 2s linear infinite
but nothings happen 
I personally like to help users who have knowledge of CSS already. Anyway, first you need to declare a keyframe with transform. Then you can shadow-root as needed and apply that.
I have tested this :
type: entities
entities:
- entity: switch.vocolinc_vp5_1096ca_humidifier
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('switch.vocolinc_vp5_1096ca_humidifier', 'on') %}
green
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
{% elif is_state('switch.vocolinc_vp5_1096ca_humidifier', 'off') %}
orange
{% endif %}
}
I have some skills in CSS but Iām lost with css selector here
Try using this:
type: entities
entities:
- entity: sensor.cleargrass_1_co2
icon: 'mdi:fan'
name: Xiaomi breather CO2
style:
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
animation: rotation 0.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
The result similar to this:
If you will not achieve what you want - let me know.
Hi Marius, I have seen your post and even tried to find a way.
So far with no success((.
I will keep looking.
Hi,
could someone please help me.
Iām trying to reduce the padding on the h1.card-header for the below but I donāt understand why itās not working
here is the style code Iām using which Iāve used on other cards
style: |
h1.card-header {
padding-top: 2px;
padding-right: 16px;
padding-bottom: 1px;
padding-left: 16px;
}
where do i place it on the above lovelace card as I canāt seem to figure it out
type: horizontal-stack
title: Phair-Sever
cards:
- type: 'custom:mini-graph-card'
hours_to_show: 12
points_per_hour: 2
animate: true
hour24: true
height: 150
entities:
- sensor.phair_server_cpu_usage
state_adaptive_color: true
show_state: true
name: CPU
line_color: '#00ff26'
line_width: 7
color_thresholds:
- value: 20
color: '#00ff26'
- value: 50
color: '#ddff00'
- value: 60
color: '#ff8c00'
- value: 80
color: '#ff5900'
- value: 90
color: '#ff0000'
show:
extrema: true
name_adaptive_color: true
icon_adaptive_color: true
- type: 'custom:mini-graph-card'
hours_to_show: 12
points_per_hour: 2
animate: true
hour24: true
height: 150
entities:
- sensor.phair_server_system_temperature
state_adaptive_color: true
show_state: true
name: TEMP
line_color: '#00ff26'
line_width: 7
color_thresholds:
- value: 20
color: '#00ff26'
- value: 50
color: '#ddff00'
- value: 60
color: '#ff8c00'
- value: 80
color: '#ff5900'
- value: 90
color: '#ff0000'
show:
extrema: true
name_adaptive_color: true
icon_adaptive_color: true
- type: 'custom:mini-graph-card'
hours_to_show: 12
points_per_hour: 2
animate: true
hour24: true
height: 150
entities:
- sensor.phair_server_memory_usage
state_adaptive_color: true
show_state: true
name: RAM
line_color: '#00ff26'
line_width: 7
color_thresholds:
- value: 20
color: '#00ff26'
- value: 50
color: '#ddff00'
- value: 60
color: '#ff8c00'
- value: 80
color: '#ff5900'
- value: 90
color: '#ff0000'
show:
extrema: true
name_adaptive_color: true
icon_adaptive_color: true
Why is it in a stack-in card? Anyway, add it to the mini-graph-cards.