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.
Hi all,
Iâm trying to reduce the line height and icon width of an input_select entity.
I want to use the code I found in this post:
However, Iâm really new to css and canât get it to work. I have tried inspecting those fields, but Iâm still lost.
This is what I have right now:
- type: entities
entities:
- entity: input_select.test
card_mod:
style:
ha-paper-dropdown-menu:
$:
paper-input:
$:
paper-input-container: |
div.floated-label-placeholder {
line-height: 0px;
}
hui-entities-card$hui-input-select-entity-row$: |
state-badge {
width: 0px;
}
If anyone could help me out thatâd be great! Thank you!
That is not an error. Itâs just because the HA validator wasnât made to account for custom properties. You should be using card_mod 3.0 syntax, though.
Can you tell me more about how using this syntax?
Because when I try like this, it not working anymore
Like what?
You tell me to use this syntax, but when I read the documentation, is that I do.
Maybe I think itâs my Vs code who dont understand this.
The translator isnât working that well. Yes, it is VS Code that doesnât understand card-modâs syntax.