Thank you for the information. Much appriciated.
I still could not find a solution for this on my own. Anyone able to solve this hard exercise? @Ildar_Gabdullin
Itās not about just applying the
style:
:host {
--paper-item-icon-color: red;
}
from š¹ Card-mod - Add css styles to any lovelace card - #1188 by Ildar_Gabdullin - itās about using it right in the complex setup I described at š¹ Card-mod - Add css styles to any lovelace card - #4124 by e-raser.
Iāam not sure if this is what you are looking for. But the code updates the templated style properties of an rotating icon(speed, directon, color) as an element on a picture-elements card, inside a custom:hui-element, inside the head of a custom:fold-entity-row on an entities card. In this case triggered by a tap-action of the sme icon.
type: entities
entities:
- type: custom:fold-entity-row
style:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
head:
entity: sensor.dummy_fold
name: Fan
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
padding: 15
open: false
entities:
- type: custom:hui-element
card_type: picture-elements
style: |
ha-card {
height: 53px !important;
}
image: /local/pix.gif
elements:
- type: state-icon
entity: switch.fan_L
icon: mdi:fan
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.fan_turn_test
style:
top: 5%
left: 5%
card_mod:
style:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
animation: {{ 'rotation 7.0s linear infinite' if is_state("switch.fan_L","on") else 'rotation 5.0s linear infinite' }};
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: {{ 'rotate(-360deg)' if is_state("switch.fan_L","on") else 'rotate(360deg)' }};
}
}
.: |
:host {
--paper-item-icon-color: {{ 'red' if is_state("switch.fan_L","on") else 'green' }};
}
show_state: false
- type: xxx.xxx
icon: mdi:xxx
Is it possible to āthickenā the badge border (the default badges on top of the views)? Iām using colors for some states, and it would be more visible if the border was a little thicker. Thanks in advance!
Nevermind, I found a way to suit my needs, in case someone needs this:
Example code for the Temperature:
- entity: sensor.openweathermap_temperature
name: Temperatura
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border: solid 3px;
color: orange;
background-color:
{%- from 'interpolate_rgb.jinja' import interpolate_rgb -%}
{%- set temp = states(config.entity) | float(0) -%}
{%- set temp_map = {
0: "3498db",
22: "70a03c",
26: "ff9800",
32: "e74c3c"
} -%}
{%- set keys = temp_map | sort -%}
{%- set index = keys | select("lt", temp) | list | length -%}
{%- if index == 0 -%}
#{{ temp_map[keys | first] }}
{%- elif index == keys | length -%}
#{{ temp_map[keys | last] }}
{%- else -%}
{%- set start = (keys[index - 1], temp_map[keys[index - 1]]) -%}
{%- set stop = (keys[index], temp_map[keys[index]]) -%}
{{ interpolate_rgb(temp, start, stop) }}
{%- endif -%};
}
.badge-container .label-badge .value {
color: white;
}
.badge-container .label-badge .label span {
background-color: orange;
}
.: |
:host {
--ha-label-badge-border-radius: 30%;
--ha-label-badge-size: 50px;
--ha-label-badge-title-width: 56px;
--ha-label-badge-font-size: 22px;
}
PS: Using macro interpolate_rgb() in a separate file, interpolate_rgb.jinja, inside custom-templates folder, with:
{%- macro interpolate_rgb(temp, start, stop) -%}
{%- set (start_temp, start_color) = start -%}
{%- set (stop_temp, stop_color) = stop -%}
{%- set (start_r, start_g, start_b) = (int(start_color[0:2], base=16), int(start_color[2:4], base=16), int(start_color[4:6], base=16)) -%}
{%- set (stop_r, stop_g, stop_b) = (int(stop_color[0:2], base=16), int(stop_color[2:4], base=16), int(stop_color[4:6], base=16)) -%}
{%- set s = ((temp - start_temp)/(stop_temp - start_temp)) -%}
{# some channels might be negative; most browsers are probably tolerant, but in case not #}
{%- set r = max(int(start_r + s*(stop_r - start_r)), 0) -%}
{%- set g = max(int(start_g + s*(stop_g - start_g)), 0) -%}
{%- set b = max(int(start_b + s*(stop_b - start_b)), 0) -%}
rgb({{ r }}, {{ g }}, {{ b }});
{%- endmacro -%}
(copied from onother post here: Dynamic badge label (text) colours by parautenbach. )
3 Likes
1 Like
Yeah, thanks for you post, thatās what Iām using! 
With the new general macro function available it makes everything shorter and more tidy, because I can make your function available everywhere.
Thanks again!
1 Like
Interesting, could you explain in 2 words what does interpolate_rgb do?
For that you can see the post by parautenbach refered above, thatās his work, and a pretty good one too.
Itās a linear interpolation in RGB space, so it takes a state (temperature at the time of writing) and a start and stop colour with corresponding states. Those are tuples that are unpacked. The three channels are then separated. A scalar (s) is then calculated do determine where the input state is in the given range of the start and stop states. This is then used to calculate a channel value for each channel, before recombining it into an RGB value.
2 Likes
Will take it for experimenting, very promising! Thanks a lot!
1 Like
How can I change the align-item option for the entity?
- type: entity-filter
entities:
- person.falco1717
state_filter:
- home
card:
type: glance
title: People at home
show_state: false
show_name: false
card_mod:
style:
$: |
.card-header {
font-size: 15px !important;
}
:host {
border-style: none !important;
}
Hi, can someone break this down for me. I see a lot of things after style, but I donāt know why it needs to be one or the other. Here are some:
-
hui-generic-entity-row $: |
-
.: |
-
ha-card {
-
:host {
I seem to always get it wrong. Please help me. Thanks
yeah its amazingly beautiful indeed
however, reading Pieterās explanation there, I fear it will be costly if applied widely? @parautenbach any numbers on that? can you see any increase in resource usage?
If I change my code to below the entity align correctly but then the .card-header font size no longer works.
- type: entity-filter
entities:
- person.falco1717
state_filter:
- home
- not_home
card:
type: glance
title: People at home
show_state: false
show_name: false
style: |
.entity {
align-items: baseline !important;
}
ha-card {
border: none;
}
.card-header {
font-size: 10px !important;
}
I was able to fix it with the below code
- type: entity-filter
entities:
- person.falco1717
state_filter:
- home
- not_home
card:
type: glance
title: People at home
show_state: false
show_name: false
card_mod:
style:
.: |
ha-card {
border: none;
}
.entity {
align-items: baseline !important;
}
$: |
.card-header {
font-size: 15px !important;
padding: 1px 16px 1px;
}
Thank you.
Youāre right, itās important to keep the processing overhead of complex templating code in mind.
In this case I havenāt seen a noticeable increase in server load. Itās remained on 0.05 on average (Unix load). Maybe it goes up to 0.1 for a moment, but itās hard to isolate something like this. I think I use this macro in about 10 places. Page loads feel pretty instant.
1 Like
was thinking whether this macro wouldnāt be a good example for the new custom_templates functionality? so we can call it form anywhere in the config, either back-or frontend
Indeed, Iāve moved that to my custom templates directory. I havenāt added it to HACS though, because I donāt want to enable experimental features (it kind of borks my system for some reason). Iāll do that once this becomes mainstream.