I do not recall this var - “–label-badge-green”.
(may be it was added for some domains? but sensors use “–label-badge-red”)
Use provided examples as was already suggested.
Imho any math in jinja must conform to a specified UoM.
So…. where would I learn about that.
I also tried a ‘simpler’ condition which would examine a sensor and NOT display the badge if the sensor = 0. The UoM is ‘packages’
- entity: sensor.mail_fedex_packages
name: FedEx Deliveries
style: |
:host {
{% if is_state('sensor.mail_fedex_packages') | int == 0 %}
display: none;
{% else %}
display: inline-block;
{% endif %}
}
BTW - The only examples I see are based in jinja
When I say “test w/o jinja” - I mean w/o using HA templating.
This is w/ templating:
style: |
:host {
{% if ... %}
some_property: some_value;
{% endif %}
}
and this is w/o:
style: |
:host {
some_property: some_value;
}
I advised to start testing w/o templates since this is simpler, a user may add less errors etc.
A small remark for your test: no need to do this, just leave it untouched:
{% else %}
display: inline-block;
This small demo may help you may be:
title: badges-test
path: badges-test
subview: true
badges:
- entity: sensor.processor_use
style: |
:host {
{% set RED = 255 * (states('input_number.test_level_1')|float / 100) %}
{% set GREEN = 255 * (states('input_number.test_level_2')|float / 100) %}
{% set BLUE = 255 * (states('input_number.test_level_3')|float / 100) %}
--label-badge-red: rgb({{RED}},{{GREEN}},{{BLUE}});
}
cards:
- type: entities
entities:
- entity: input_number.test_level_1
name: red
- entity: input_number.test_level_2
name: green
- entity: input_number.test_level_3
name: blue
code for input helpers:
input_number:
test_level_1: &ref_number_1_100
min: 0
max: 100
step: 1
mode: slider
test_level_2: *ref_number_1_100
test_level_3: *ref_number_1_100
1 Like
I am trying to make a dropdown to show additional info in a card. I fond this code from anther post, but can’t make it work to rotate the icon 180 degrees based on the status of the entity. Can someone provide me the correct code for inverting the icon.
type: custom:mushroom-template-card
entity: input_boolean.hvac_filter_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
.: |
ha-card {
border-width: 0px;
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: None !important;
}
I found the solution in this post so my new code is
type: custom:mushroom-template-card
entity: input_boolean.hvac_filter_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-state-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
ha-card {
border-width: 0px;
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: None !important;
}
1 Like
Some styles for “timeline” history-graph
On December 2022 default colors for icons & “timeline” graphs were changed.
Later users got a possibility to customize colors by defining theme variables (also, in a normal format, not like “234,23,45” which did not allow users to use colors like “green” & “rgb(2,34,45)”).
One of changes was related to using a transparent color for history-graph for “unavailable” values.
Earlier a transparent color was used for periods when an entity did not exist.
On a screenshot from 2022.7.4 the upper entity was not created yet before ~06:05:
And here is a similar picture from 2023.7 - the upper entity was just created, the 2nd entity is currently unavailable :
Can you see a difference between “not created” & “unavailable” here?
Created an issue on 13.12.22, but it appeared to be a waste of time since I failed to convince people in obvious (imho) things.
What I can do now is using a theme variable (let’s use “cyan” as intuitively “unavailble”):
my_super_theme:
history-unavailable-color: cyan
which gives us this 100% clear picture:
Here are ways to style graphs locally:
code
- type: history-graph
entities:
- binary_sensor.testing_availability
hours_to_show: 0.15
show_names: false
- type: history-graph
entities:
- binary_sensor.testing_availability
hours_to_show: 0.15
show_names: false
card_mod:
style: |
ha-card {
--history-unavailable-color: cyan;
}
BTW, I especially love this puzzle - what is this?
Correct answer - this is a DEFAULT graph for “unavailable” entity.
For “unknown”:
code
- type: history-graph
entities:
- sensor.web_scrape
hours_to_show: 1
show_names: false
- type: history-graph
entities:
- sensor.web_scrape
hours_to_show: 1
show_names: false
card_mod:
style: |
ha-card {
--history-unknown-color: pink;
}
4 Likes
Just found card-mod and love it but i’m struggling with 1 single thing, define multiple lines for badges.
I have 2 custom conditional badges that i would like to always be visible (if condition is matched) on a second line, is such possible with card mod?
Possible probably, try smth like this:
“css flex break line” - google it
1 Like
Hi, wondering if you’ve worked this one out, it’s a little annoying seeing the transition on my navigation bar each time a new views being loaded.
I’ve come up with an issue on one of my minimalistic area cards since updating card mod to a new version. Wondering if anyone can tell what I am doing wrong.
On my card I had a line of buttons and sensors which are set to show transparent red when active/on.
Under buttons and sensors below I have…
–ha-picture-icon-button-on-color: rgba(240, 0, 0, 0.6)!important;
This was working perfectly fine until a recent update. Now the active/on color is the default which is yellow.
type: custom:minimalistic-area-card
card_mod:
style: |
ha-card {
height: 100px!important;
}
.box .card-header {
padding: 5px 0px!important;
font-weight: bold;
font-size: 1.2em;
}
img {
filter: brightness(0.6)!important;
object-fit: !important;
}
.sensors {
--ha-picture-icon-button-on-color: rgba(240, 0, 0, 0.6)!important;
--ha-picture-icon-button-color: rgba(170, 170, 170, 0.7)!important;
--mdc-icon-size: 30px;
}
.buttons {
--ha-picture-icon-button-on-color: rgba(240, 0, 0, 0.6)!important;
--ha-picture-icon-button-color: rgba(170, 170, 170, 0.7)!important;
--mdc-icon-size: 25px;
position: absolute;
left: 5px;
bottom: -5px;
}
.box .sensors .state {
margin-left: -5px!important;
}
.box .buttons {
text-align: left!important;
}
found a fun fact today:
having had this template-entity-row for some time:
card_mod:
style:
div#wrapper: |
state-badge {
animation: {% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base = 'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: lightseagreen;
}
animates the icons when on:
since those are always a bit off-center, and also showing on my custom:button-cards, I had a bit of an exchange with RomRider today, who is heavily developing his custom card to be even more amazing than it already is) and we ended up adding:
@keyframes rotation {
0% {
transform: rotate(0deg);
--ha-icon-display: inline;
}
100% {
transform: rotate(360deg);
--ha-icon-display: inline;
}
which results in:
and is kind of cool, as it centers the icon much better, and, because of its size draws a bit more attention…
made me wonder if we couldn’t use that in static icons too:
card_mod:
style:
div#wrapper: |
state-badge {
--ha-icon-display: inline;
animation: {% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base = 'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
and the answer is yes…:
3 Likes
@Ildar_Gabdullin
How can the below be applied to the new version of the Horizon card?
Thanks
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
box-shadow: none;
}
Hi! I am very far from any PC now, will answer you here or in GitHub in a week!
I don’t want to be presumptuous…
Post your code for the entire card and maybe others will try to help (sooner/quicker?).
MrGrey.
otoh, why use that card in the first place, there seems to be no development at all(sorry), and the original card still works…
here’s the link to the identical question in the repo: Horizon-card customize with card-mod. · Issue #30 · rejuvenate/lovelace-horizon-card · GitHub
makes that easier to compare with some background.
@Mariusthvdb
Why do you say that there’s no development? I mentioned in my post that there’s a new version of the card. The author was working on it for the last few months. And now it supports card_mod and many other improvements.
Latest v1.0.0
I need to apologize
I have this card in my updating system, and it hasn’t alerted ever since the original repo creation …
Because of that I had gone back to the original card, and modded that to my needs, never looked back.
With you words of ‘new version’, without reading anything further, I erroneously supposed you meant the original card fork…
Again, My apologies for being too quick in response.
No need to apologize. The same thing happened to me. There was no update notification, and I accidentally bumped into it, although I was waiting for it for a long time, since in my particular dashboard it was the only card that wasn’t accepting CSS.
I had solved the problem with the non transparent background by using the custom:stack-in-card, but it is not stable, and some times it doesn’t render right.
nice view!
Ive just adapted that new card into my own config shown above., because really dislike the placement of those details attributes in the original. It renders it so out of context in HA imho.
Btw, since the core moon integration doesnt provide all of those moon details, I wonder where it gets its data, need to read up on that.
Personally I use a dedicated integration for Moon data:
# https://ipgeolocation.io/astronomy-api.html
rest:
- resource: https://api.ipgeolocation.io/astronomy
scan_interval: 1200
params:
apiKey: !secret ipgeolocation_api
city: your city
this is what I ended up doing for now (knowing the data now is calculated twice in my system for moon,which is not a good thing…)
btw if you need the most amazing site for all of these details to check: Sun & moon times today, Roosendaal, Provincie Noord-Brabant, Netherlands
it even holds these graphs
not sure if the horizon card can show that graph for moon?
@Ildar_Gabdullin Thanks for your great work. I have one more question. I like to combine two things: style: | and style:
If i use just one of this, its works. But not both together.
title: Garten
type: entities
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0,255,0,0.05);
}
style:
tabbed-card $:
.: |
mwc-tab {
right: -15px;
}
mwc-tab:
$: |
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
background: rgba(100,100,100,0.20) !important;
}
.mdc-tab--active {
background: rgba(0,255,0,0.05) !important;
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
entities:
- type: custom:tabbed-card
……