Hello, I am trying to see how I can scroll horizontally through weather forecast information.
I have a realtively standard card with which I can display (say) 25h of forecast. If I present this via panel it shows fine but I would like to have this as part of a regular dashboard (stack).
Is it possible to scroll horizontally through something like this?
Iāve used a mushroom title card as the expander title card, but the result is that the entire expander card defaults to white and colors canāt be modified with CSSā¦ at least in any way Iāve tried.
Can someone help me with this issue I am having with my badges on the frontend? I have water sensors and I want the badge icon to change red when active. It does change red on the active state. But when returning to normal state the icon color stays red unless I refresh the page or app. This happens in both Chrome and iOS. Iāve even tried clearing the caches in both with no success. The two codes tried so far are below. I even tried doing it by active theme as I first noticed the issue in Dark Mode.
- entity: >-
binary_sensor.crawl_space_dehumidifier_aqara_water_leak_sensor_water_leak
card_mod:
style: |
@media (prefers-color-scheme: dark) {
:host {
--card-mod-icon-color: {% if is_state('binary_sensor.crawl_space_dehumidifier_aqara_water_leak_sensor_water_leak', 'on') %} var(--state-icon-error-color) {% else %} var(--dark-primary-color: #0288d1) {% endif %};
}
}
@media (prefers-color-scheme: light) {
:host {
--card-mod-icon-color: {% if is_state('binary_sensor.crawl_space_dehumidifier_aqara_water_leak_sensor_water_leak', 'on') %} var(--state-icon-error-color) {% else %} var(--light-primary-color: #b3e5fC) {% endif %};
}
}
Or
- entity: >-
binary_sensor.crawl_space_dehumidifier_aqara_water_leak_sensor_water_leak
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('binary_sensor.crawl_space_dehumidifier_aqara_water_leak_sensor_water_leak', 'on') %} var(--state-icon-error-color) {% endif %};
}
sorry I missed this before.
what exactly is your card-mod yaml? I cant see it, or it must have been truncated?
if youāre after removing the main entity icon and reclaim itās space you should use a display: none on that element, otherwise you simply endup with an empty spot.
Unless I misunderstand your issue. please make it as short as possible, and not have us check the full card config (eg, those colors seem redundant now, but did make it more difficult to check and help you).
I did spot you dont use the card_mod: under the card, so begin from correcting that yaml there 
Hey, I am a total noob using card mod. Just one question. Maybe someone can help. How do I get access to the div of the container class here? Its the tile card with alarm features.
//EDIT: Ok, git it. That did the trick:
.features hui-alarm-modes-tile-feature $: |
.container {
}
After one last cut and paste attempt I got it working. Iāam sure itās not the most elegant solution, but it gives me control over space, content and format.
type: entities
entities:
- type: custom:multiple-entity-row
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info.pointer {
display: none;
}
.: >
hui-generic-entity-row .entities-row div.entity:nth-child(1)
div::after
{
color: var(--my-font50-color);
font-size: 1.0rem;
white-space: ;
}
hui-generic-entity-row .entities-row div.entity:nth-child(2)
div::after
{
color: var(--my-font50-color);
font-size: 1.0rem;
content: " {{ state_attr('sensor.average_temp', 'max_value') }} Ā°C";
white-space: ;
}
hui-generic-entity-row .entities-row div.entity:nth-child(3)
div::after
{
color: var(--my-font50-color);
font-size: 1.0rem;
content: " {{states['sensor.smszb_1_temperature'].state}} Ā°C";
white-space: ;
}
.entities-row div.entity:nth-child(1) span {
color: var(--my-font10-color);
font-size: 14px;
}
.entities-row div.entity:nth-child(2) span {
color: var(--my-font10-color);
font-size: 14px;
}
.entities-row div.entity:nth-child(3) span {
color: var(--my-font10-color);
font-size: 14px;
}
entity: sensor.xxx
entities:
- entity: sensor.yyy
name: false
unit: false
format: precision0
styles:
width: 0px
color: transparent
- entity: sensor.zzz
attribute: min_value
name: mn/mx
unit: Ā°C
format: precision01
styles:
width: 48px
padding-right: null
color: var(--my-font04-color)
font-size: 14px
style: |
ha-card {
--my-font01-color: red;
--my-font02-color: red;
--my-font03-color: red;
--my-font04-color: red;
--my-font05-color: red;
--my-font06-color: red;
}
In general, what is the consensus, in terms of system load, about templates. Is it better to use them on UI level, config-template-card/row, or on config.yaml level?
- type: custom:mod-card
style: |
:host {
position: sticky;
bottom: 12px;
}
hui-horizontal-stack-card$: |
root {
justify-content: center;
}
Why is this not working ?
I got my 2 buttons to the left 
as always: it depends
however, you can now āmeasureā the impact of templates (Jinja template that is) by means of the profiler integration.
service: profiler.dump_log_objects
data:
type: Template
as generic as can be:
jinja templates are evaluated in the backend, server side (so the machine your system runs on)
javascript templates are evaluated in the frontend, browser side (the machine you look at your HA instance)
depending on the powers of those machines, impact will vary.
Some not so very long time ago, backend machines were more powerful than the frontend, so advice was to cut down on the javascript. However, since these are way more powerful these days, I would think it safe to say that no longer is that important.
Especially since many people use a tiny RPI4 with only 4 meg of ram, it might even be better to cut down on Jinjaā¦
otoh, if you have a mini pc or better, it wont really matter a lot.
next to all of that, HA core code has been optimized enormously, and still is, by the hands of magician Bdraco. He never stops finding options to make HA smaller, faster, and more efficientā¦
So, pick your situation ā¦
my personal experience:
some custom cards are causing way more lag than others. Heavy impacters in my system are apexcharts-card and config-template-card.
especially when using those on views with a lot of history interaction. ( cards like history-graph and mini-graph-card)
you will notice when its happening, and ending with that, I believe that to be the final cause for action. If youāre not experiencing any lag or other interaction issues, youāre safe to go. If you do, check some of these aspects and act accordingly.
Nice. This passed me by!
Looking at the docs though, is the output only useful if you run Linux or are there tools for Windows users to see the output?
Hello! I have successfully used card_mod to sticky a horizontal-stack box full of mushroom cards to the top of my mobile screen.
However, when I scroll up I can see the cards behind the stickied header.
I used mod-card to allow the manipulation of the horizontal-stack box. I tried to change the background to all black which helped mask the background cards however that little strip at the top is driving me crazy. I am learning this on the fly so I am by no means a pro at this. Here is the code I used to get this far.
type: custom:mod-card
card_mod:
style: |
:host {
position: sticky !important;
top: 65px !important;
z-index: 3 !important;
}
ha-card {
background: rgba(0, 0, 0, 1.0);
background-size: 110%;
}
card:
type: horizontal-stack
card_mod:
style: |
ha-card {
background: rgba(0, 0, 0, 1.0);
}
Any help that you all can provide would be greatly appreciated. Hope this makes sense. Thanks!
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.