just so you can improve on that, by using
config.card.entity
in stead of repeating the config entity in that template.
1 Like
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…
4 Likes
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
use pseudo element
type: entity
entity: input_number.percentage
show_name: true
show_state: true
show_icon: true
color: red
card_mod:
style:
ha-badge:
$: |
.badge {
position: relative;
display: inline-block;
border: none !important;
overflow: hidden;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
3 Likes
that’s real nice indeed!
thank you John.
there is a tiny sliver of the badges background still visible. I tried ti make it 3px, but then it just goed that 1 pixel more to the inside of the badge and the background remains visible.
other than that this seems a final solution
unless… we can control where the birder starts. somehow I believe my eye would want it to start in the middle left side, (9 o’clock…)
setting the background and adding a bit of box-shadow gives it a nice touch:
need t find the right A in the rgba though because the tile button background (which I am trying to imitate) is not like this:
- entity: sensor.epson_ink_level_black
color: black
card_mod:
style:
ha-badge:
$: |
.badge {
position: relative;
display: inline-block;
border: none !important;
overflow: hidden;
background: rgba(from var(--badge-color) r g b / 0.1) !important;
box-shadow: var(--box-shadow) !important;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
could also combine the 2 variants…
though the positioning of the uncentered icon now is painful…
- entity: sensor.epson_ink_level_black
color: black
card_mod: &border
style:
ha-badge:
$: |
.badge {
position: relative;
display: inline-block;
border: none !important;
overflow: hidden;
box-shadow: var(--box-shadow) !important;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
background-color: rgba(from var(--badge-color) r g b / 0.2);
# these next 3 elements need adjusting
border-radius: 24px;
width: 28px;
height: 28px;
}
or, coming to think of it, could try to get the progress border around that icon, instead of around the badge
options options
btw, I’ve adjusted the top .badge properties to only set the box-shadow, and added a quick border to that icon:
card_mod: &border
style:
ha-badge:
$: |
.badge {
box-shadow: var(--box-shadow) !important;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
.: |
ha-state-icon {
background-color: rgba(from var(--badge-color) r g b / 0.2);
border-radius: 24px;
border: 1px var(--badge-color) solid;
width: 28px !important;
height: 28px !important;
}
which makes quite nice for now (just notice the basket icon being too big for the area…)
.badge::before {
content: '';
position: absolute;
top: 0;
left: -1px;
right: -1px;
bottom: 0;
border: 3px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
Adjust the position a little outwards and the border a little larger. This way the background of the bottom layer will not be visible as much.
nice hack
just so I am 100% sure: we are Not really setting the border of the badge itself, but faking a border and not touching the actual border are we?
asking because if I take out the ‘mask’ I dont see that sliver anymore:
re-instate the mask:
hmm, maybe this already helped… seems ok now does it?
card_mod: &border
style:
ha-badge:
$: |
.badge {
box-shadow: var(--box-shadow) !important;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
.: |
ha-state-icon {
--mdc-icon-size: 18px !important;
background-color: rgba(from var(--badge-color) r g b / 0.2);
border-radius: 24px;
border: 2px rgba(from var(--badge-color) r g b / 0.8) solid;
/*width: 28px !important;
height: 28px !important;*/
}
btw, I set the --mdc-icon-size: 18px !important; (which is actually the core setting), because in my crd-mod themes I’ve set the badge icon generically to 24px… so I need to override it here again
Meaning, if you dont set it in card-mod theme, you can leave that line out here
For badge the icons are 18px, only there is size 36px for element height. And the 36px size is really small for higher resolution… You can play around with the dimensions of the full size badge, and adjust the padding for the ha-icon…
card_mod:
style:
ha-badge:
$: |
.badge {
position: relative;
border: none !important;
--ha-badge-size: 48px;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: -1px;
right: -1px;
bottom: 0;
border: 3px solid var(--badge-color);
border-radius: inherit;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
.: |
ha-state-icon {
background-color: rgba(from var(--badge-color) r g b / 0.2);
border: 1px var(--badge-color) solid;
border-radius: 50%;
padding: 4px;
--mdc-icon-size: 24px !important;
}
we use pseudo elements, which are placed in front of the content and the mask property, just hide partially that pseudo element…
the magic trio there, very nice, and yes, padding was something I had forgotten. much obliged!
for me the perfect setting now is
.: |
ha-state-icon {
background-color: rgba(from var(--badge-color) r g b / 0.2);
border: 2px rgba(from var(--badge-color) r g b / 0.8) solid;
border-radius: 50%;
padding: 3px;
--mdc-icon-size: 18px !important;
}
4px
3px
what a difference 1px padding can make out to be…
(do note the odd effect, the name if which I forgot, that makes the badge border rounding non parallel to the circular icon)
that is to say for now, before embarking on a new journey trying to set the progress bar to that icon border 
:
use the same method pseudo for ha-state-icon hehe 
believe the circular effect has to do with inner and outer border-radius.
found a quick Restricting A (pseudo) Element To Its Parent's Border-box | CSS-Tricks but not sure that’s it
this would be to the point CSS inner and outer border-radius
first effort:
ha-state-icon::before {
content: '';
position: absolute;
top: 6px;
right: 42px;
bottom: 6px;
left: 6px;
padding: 3px;
border: 2px solid var(--badge-color);
border-radius: 50%;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
progress, but really hap hazard manual tries. nothing calculated here, which I feel should be more reliable.Maybe we can use % values?
left: 8px;
no padding
the 72% is still non circular, but changing left to higher number wont help (on the contrary)
settling for
ha-state-icon::before {
content: '';
position: absolute;
top: 6px;
right: 43px;
bottom: 6px;
left: 7px;
border: 2px rgba(from var(--badge-color) r g b / 0.7) solid;
border-radius: 50%;
{% set perc = states(config.entity)|float(0) %}
mask: conic-gradient(rgba(0, 0, 0, 1) 0% {{perc}}%, rgba(0, 0, 0, 0) {{perc}}% 100%);
}
in the current badge size settings, seems to touch the sweetspot:
and border-radius: inherit; is even better, using 1 less hard-coded value
getting back to my earlier post with the colorized backgrounds, and playing with the rgb(from) a bit, makes this is still a very nice alternative:
card_mod: &background
style:
ha-badge:
$: |
.badge {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rgb = 'rgb(from var(--badge-color) r g b)' %}
{% set rgb6 = 'rgb(from var(--badge-color) r g b/ 0.6)' %}
{% set rgb2 = 'rgb(from var(--badge-color) r g b / 0.2)' %}
linear-gradient(to right, {{rgb6}} 0%, {{rgb6}} {{perc}}%,
{{rgb2}} {{perc}}%, {{rgb2}} 100%) !important;
box-shadow: var(--box-shadow) !important;
}
this informative site explains we can leave out the rgbA( from) and use the from construction in many other ways to. very nice to know
@Mariusthvdb @VietNgoc this is really cool guys. Thanks for this.
Is it possible to change the color with a percentage from 0-100%, so you could use this nicely for a battery indicator?
Check the link I posted, it explains how to use calc() on those rgb() values
Also, check the custom bar-card thread, where I posted my battery entities card
1 Like