Yes I am hoping for a theme variable as well, I am trying to get less rounded corners
Dont working for me ;-(
- type: custom:hui-state-badge-element
entity: alarm_control_panel.mieszkanie
name: Alarm
display_type: complete
card_mod:
style: |
:host {
{% if is_state('alarm_control_panel.mieszkanie', 'disarmed') %}
--label-badge-background-color: rgba(0,255,0,0.1);
--label-badge-red: green
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
--label-badge-red: red
{% endif %}
}
It is only working in the full context. Is it in an entities card like mine?
Yes
views:
- theme: Backend-selected
title: Home
layout:
width: 540
max_cols: 2
min_hight: 1
badges:
- type: custom:hui-state-badge-element
entity: alarm_control_panel.mieszkanie
name: Alarm
display_type: complete
card_mod:
style: |
:host {
{% if is_state('alarm_control_panel.mieszkanie', 'disarmed') %}
--label-badge-background-color: rgba(0,255,0,0.1);
--label-badge-red: green
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
--label-badge-red: red
{% endif %}
}
This is the badge section of a view. It is not working there, it is only working in a card, the badge section is not (yet) ācard_modableā.
1 Like
Hi folks. Any update on this? Has HA or card_mod changed in the last few months to allow some kind of dynamic customisation of badges? Iām keen for person badges with colours based on zone location, like a green border when the person is home.
Thanks.
1 Like
It has been posted above too but check out
and this: š¹ Card-mod - Add css styles to any lovelace card - #7475 by Mariusthvdb
Border color, icon color, icon size, all can be modded to your liking
1 Like
Go to the main card-mod thread ā 1st post ā link at the bottom titled āfantasticā ā badges:
2 methods are available:
- with mod-card
- w/o mod-card but with a manual hack of card-mod.js required
(not to mention card-mod theme way)
This is what I came to that is pleasing me, feel free to inspire yourself:
type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: true
show_state: false
show_icon: true
entity: binary_sensor.zigbee_ping
name: Zigbee
icon: mdi:z-wave
card_mod:
style:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 1px solid {{'green' if is_state('binary_sensor.zigbee_ping', 'on') else 'red'}} !important;
}
.: |
ha-state-icon {
color: {{'var(--primary-text-color)'}};
}
.: |
hui-entity-badge {
--ha-card-background: {{'rgba(0,255,0,0.1)' if is_state('binary_sensor.zigbee_ping', 'on') else 'rgba(255,0,0,0.1)'}};
}
Giving something like
or
Yes, yes, inspire yourself )))
do not try
type: entity
show_name: true
show_state: true
show_icon: true
entity: zone.home
name: some very long long long name
card_mod:
style:
ha-badge $: |
span.label {
color: magenta;
font-size: 14px;
transform: translateY(50px);
line-height: 14px;
}
.badge {
background-color: lightblue !important;
width: 100px !important;
height: 100px !important;
flex-direction: column !important;
border-radius: 50% !important;
border: 2px solid red !important;
}
.info {
align-items: center !important;
}
.content {
transform: translateY(-40px) !important;
}
.: |
:host {
--primary-color: green;
}
ha-state-icon {
--mdc-icon-size: 36px;
margin-top: 24px;
}
state-display {
color: blue;
font-size: 18px;
}
Hello Ildar,
is it that one that require to change the javascript file or not? Iāve to admit that after reading a lot of pages of the card_mod thread I was more confused than ever before, I worked throughout the day between all your, Marius and Arganto posts, reading a lot of code.
I was pretty happy with what I did for myself. Might be that it would not suit everyoneās need for sure.
Hi Olivier! There are 2 methods as I described in card-mod thread:
- With mod-card (argantoās).
- W/o mod-card - but a hacked js is needed (open in editor & replace 1 word with another).
Both methods have pro & contra.
1 - no need to hack, just keep using an official plugin.
2 - you can use card-mod-badge-yaml in themes like before 2024.8, less migration steps from āold badgesā.
Do not recommend any particular method. Not using badges myself))
1 Like
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 the of curse 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.