I sure is (though be careful).
would you know how to set the background of the badge?
we can set background on that state-display, but not yet found the correct element to colorize the badges background completely
on hui-entity-badge ha-badge .badge
as usual - 1st post → … → badges 2024.8
but it needs a “hack”
This is working on chrome, but not Firefox and Fully Kiosk Browser. Any idea how to achieve this into these two? At least in FKB, would be great.
aarghh, had hoped to be able to do with mod-card in Arganto style…
and the config.entity, do we have another variable here too (like the other day in the row entity)?
hui-generic-entity-row {
{% set alert = states(config.row.entity)|int(0) %}
--card-mod-icon:
mdi:{{'shield-check' if alert == 0 else 'alert'}};
--card-mod-icon-color:
var(--{{'ok' if alert == 0 else 'alert'}}-color);
}
looking for the badge entity…
e.g. (short way via variables)
type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sensor.processor_use_percent
color: amber
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 50px;
}
.: |
hui-entity-badge {
--ha-card-background: red;
}
Erm, what is a difference? Either use mod-card, or apply card-mod directly.
Also, with a hack you can use themes with “card-mod-badge”:
test_badge:
card-mod-theme: test_badge
card-mod-badge-yaml: |
ha-badge $: |
span.label {
color: magenta;
}
.badge {
background-color: lightblue !important;
border: 2px solid red !important;
}
.: |
:host {
--primary-color: green;
}
state-display {
color: blue;
}
Ofc:
type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: true
show_state: true
show_icon: true
entity: input_boolean.test_boolean
name: xxxx
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
{% if is_state(config.card.entity,'on') -%}
--mdc-icon-size: 28px;
{%- else -%}
--mdc-icon-size: 8px;
{%- endif %}
}
bingo! thx
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 28px;
color: {{'var(--success-color)' if states(config.card.entity)|int(0) < 24
else 'var(--error-color)'}};
}
is what I was after
getting better now…
only looking for the border element now
on that same .badge element
ehrm…
.: |
hui-entity-badge {
--ha-card-background: {{'var(--success-color)'
if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
border: 2px solid red;
}
how peculiar 
adding:
.: |
ha-card {
border: 2px solid red;
border-radius: 24px;
}
seems to work, but I had hoped to find the element so that I dont have to also set the border radius again
ha-card {
border: 2px solid purple;
border-radius: 24px;
--ha-card-background: green;
--primary-text-color: white;
--icon-primary-color: black;
}
all seem to work, and even --card-mod-icon-color: black; for that matter
a summary post, commented mods also work, but I’ve moved all except icon size to the generic ha-card, mainly because it is so much easier.
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.vandaag
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 28px;
/*color: {{'var(--warning-color)'
if is_state('binary_sensor.werkdag','on')}};*/
}
state-display {
font-size: 24px;
/*color: {{'var(--warning-color)' if is_state('binary_sensor.werkdag','on')}};*/
}
.: |
/*hui-entity-badge {
--ha-card-background: {{'var(--success-color)'
if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
}*/
ha-card {
border: 2px solid {{'var(--success-color)' if
is_state('binary_sensor.werkdag','off') else
'var(--error-color)'}};
border-radius: 24px;
--ha-card-background: gray;
--primary-text-color: white;
--card-mod-icon-color: {{'var(--success-color)' if
is_state('binary_sensor.werkdag','off') else
'var(--error-color)'}}; /*--icon-primary-color:*/
}
but the border isnt right yet. Note the difference here:
the orange is set on the ha-card with the above card-mod, and the red inner border is set in Inspector, on the .badge element.
that would be my preference, because right now the oranges makes the card size go out of sync with others, and also has a different box-shadow
separate post for this:
because of the card_mod (with mod-card, idk) there is an ugly effect on reload of the view.
in my main theme I have a ha-card-border-radius: 0.
recently ha-badge-border-radius was added to the styles of the badges, and that’s great, because we can set the radius in our themes now.
I have ha-badge-border-radius: 24px in my main theme.
any badge in the dashboard that has any mod-card/card-mod set (and even without any mod itself), shows the squared border-radius 0 for a moment, and then loads the actual styling.
left 2 badges have a mod, the most right badge has not…
btw, same happens with the new type: heading when card-mod is set:
Check the Host system info
From where is this? And do you see a difference to address from there and not - as “standard” - from card-mod-view-yaml?
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$:
.: |
ha-state-icon {
--mdc-icon-size : 24px;
}
ha-badge:
$: |
.content {
font-size: 14px !important;
}
This is a standard card-mod-themes thing.
Sorry, could you elaborate?
O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above.
Did you ever get a reply or solution for this?
Nope I just learnt to live with it.
I might log it officially on github.
ok so this might be a bit of a challenge, if at all possible
I like my card headers to show like
or
and with some conditional colors:
Ive configured a card_mod theme class with:
ha-card.class-header-margin .card-header {
background: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
I found my way to do this with apexcharts-card, using:
card_mod:
style: |
.wrapper div#header {
background: var(--background-color-off);
padding: 12px;
}
.wrapper div#header div#header__title {
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
}
a local mod in a card can be like
style:
$: |
.card-header {
background: var(--background-color-off);
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
.: |
.card-header ha-icon-button {
--card-mod-icon-color: var(--primary-color);
{{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
}
the apexchart mod works fine with a simple header without states:
however, when states are shown, like here:
my mod has this effect:
the issue is obvious: the states are in the header and are inside the margins/paddings…
would there be an obvious way to exclude those?
the only other way I could fix this would be to not show the header in the apex, and add it inside a stack/entities with a custom:button-card…
eg
type: custom:mod-card
card_mod: !include /config/dashboard/card_mods/stack_card_gap.yaml
card:
type: vertical-stack
cards:
- type: heading
card_mod:
class: class-section-heading
heading: Energie verbruik
heading_style: title
tap_action:
action: navigate
navigation_path: /ui-data/energie
- type: custom:apexcharts-card
Functional, though awfully convoluted as you can see, so, for this challenge, I’d like to try the mod on the apex charts-card itself, and keep the card config to just the apexcharts with a mod
please have a look?
expanding the card_mod options for the new badge:
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.meteoalarm_brabant_headline
visibility:
- condition: state
entity: binary_sensor.meteoalarm_brabant
state: 'on'
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
color: {{states('sensor.weer_alarm_kleur')}};
--card-mod-icon: {{states('sensor.meteoalarm_icon')}};
}
.: |
ha-card {
border: 2px solid {{states('sensor.weer_alarm_kleur')}};
border-radius: 24px;
}
--card-mod-icon also works on the ha-state-icon
alerting the meteoalarm color a bit more:
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
--card-mod-icon: {{states('sensor.meteoalarm_icon')}};
}
.: |
hui-entity-badge {
--ha-card-background: {{states('sensor.weer_alarm_kleur')}}
}
ha-card {
border: 2px solid var(--primary-color);
border-radius: 24px;
animation: blink 2s ease infinite;
}
@keyframes blink {
50% {opacity: 0.2;}
}
Well, I am not using apexcharts.
Give me a SHORT example of this card to play with.
haha, yes, well, that is the thing, no such thing as a short apexcharts card…
the show_states: true option. makes the states show in the header. maybe cut a few of them would make it shorter
type: custom:apexcharts-card
header:
title: Apexcharts
show: true
show_states: true
series:
- entity: sensor.luchtvochtigheid_woonkamer
- entity: sensor.temperatuur_woonkamer
suppose this could work for testing purposes
I checked this.
The “states” thing is a part of a “header”.
Do not see obvious simple ways to colorize a “header” except “states”.
Ofc there are ways like “do not style the header, style the title” - but this needs playing with many properties → not worth it.
Suggest to use a separate header card…