card-mod 3.5.0 release notes say:
- Improve styling of new ha-card and ha-badge elements
- This means stack cards can now be styled, and cards in Sections dashboards should work better
- There is now no reason whatsoever to use mod-card
I’m expecting this means we don’t need to use mod-card to work with the new badges. Looking forward to some examples here of simpler code, like for person badges with different colours based on zone… thanks.
Hi!
custom:hui-state-badge-element can’t override title/name for elements?
I set my own name, but it still displays the entity name.
badges:
- type: custom:hui-state-badge-element
entity: binary_sensor.bedroom_status
name: Спальня
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
{% if is_state(config.entity, 'on') %}
.badge-container .label-badge
{
border-radius: 20% !important;
}
{% endif %}
.: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: rgb(var(--rgb-custom-active-color));
--card-mod-icon: mdi:chip;
{% else %}
--label-badge-text-color: var(--paper-item-icon-inactive-color);
--label-badge-blue: var(--label-badge-red);
{% endif %}
}
Name cannot be overridden.
Consider it as same state-badge from picture-elements which lacks this possibility.
The only way to replace a name - card-mod.
Go to main card-mod thread - 1st post - link at the bottom - picture-elements.
Bad, but at least this way… thanks.
Looks like this update was rolled back.
new challenge:
wanted to add a border following the percentage level of an entity:
badges:
- entity: sensor.epson_ink_level_black
color: black
card_mod:
style:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
}
# card_mod:
# style: |
# .icon-container {
# border-radius: 24px;
# background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
# conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
# var(--card-background-color) 0% 100%);
# }
in comments the technique used for the tile card with this effect:
which I would hope to translate to badges for these:
can set the border with the mod above resulting in 100% borders:
but how cool would it be to set that border only for the relative %…
seems also related to this Fun with custom:button-card - #1175 by VietNgoc, though that of course is for a custom field, and not a badge either.
we can do stuff like:
card_mod:
style:
ha-badge:
$: |
.badge {
background:
{% set perc = states(config.entity)|float(0) %}
{% set bar = '0,0,0' %}
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%,
rgba({{bar}},0.6) {{perc}}%, rgba({{bar}},0.2) 100%) !important;
}
and have the background fill to the amount of %, but it requires yet another setting for the icon to stand out…
So I’d prefer to make the border modification…
Nice way of using new badges. Design appears to be useful for showing progress indicators.
should have mentioned I am running card_mod 3.5.0, so dont need the mod-card.
Everyone should still be using 3.4.4 now, and require the mod-card to modify badges.
the modification itself should be valid for 3.4.4 too…
also, I did quickly try to get the rgb() colors from the badge color (and prevent the hard-coded rgb there) using the relative value syntax rgb(from var(--badge-color) r g b / 1) function. (see CSS rgb() function)
I didnt manage to find the 100% correct syntax for that though. Which is too bad, as it would allow me to generalize the modification into a yaml anchor or include 
fwiw, I did try this,
style:
ha-badge:
$: |
.badge {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rgb = 'rgb(from var(--badge-color) r g b)' %}
{% set rgb6 = 'rgba(from var(--badge-color) r g b/ 0.6)' %}
{% set rgb2 = 'rgba(from var(--badge-color) r g b / 0.2)' %}
linear-gradient(to right, {{rgb}} 0%, {{rgb}} {{perc}}%,
{{rgb6}} {{perc}}%, {{rgb2}} 100%) !important;
}
replacing the opacity in the function directly
but that isnt the same thing, check the pairs of badges (with the first badge for each cartridge using the automated template, and the second badge using the hardcoded color)
Ive also tried to use the @ Sir_Goodenough template but it doesnt accept theme variables, so asked for that Feature here [FR] Use theme variable names in the name2rgb function · Issue #6 · SirGoodenough/Color-Multi-Tool · GitHub
