New badges and card-mod customisation

[Kwiatjk]

@Olivier1974

!important

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 %}
                    }

[Olivier1974 (Olivier Toussaint)]

It is only working in the full context. Is it in an entities card like mine?

[Kwiatjk]

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 %}
                    }

[Olivier1974 (Olivier Toussaint)]

@Kwiatjk

badges:

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”.

[lindsayward]

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.

[Mariusthvdb (Marius)]

It has been posted above too but check out

Card-mod - Super-charge your themes!

nice! does it also work when you card_mod an individual badge for icon color etc? Ive found the card_mod theme mods to be breaking when I do so. or vice versa of course Example, I have this in card_nod theme: card-mod-view-yaml: | hui-sections-view: $: hui-view-badges: $: hui-entity-badge: $: | ha-state-icon { --mdc-icon-size : 24px; } but need to repeat the icon size when I mod other s…

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

[Ildar_Gabdullin]

@lindsayward

Has HA or card_mod changed in the last few months to allow some kind of dynamic customisation of badges?

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)

[Olivier1974 (Olivier Toussaint)]

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

[Ildar_Gabdullin]

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;
      }

[Olivier1974 (Olivier Toussaint)]

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.

[Ildar_Gabdullin]

Hi Olivier! There are 2 methods as I described in card-mod thread:

1. With mod-card (arganto’s).
2. 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))

[Mariusthvdb (Marius)]

just so you can improve on that, by using

config.card.entity

in stead of repeating the config entity in that template.

[lindsayward]

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.

[andrewjswan]

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 %}
              }      

[Ildar_Gabdullin]

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.

[andrewjswan]

@Ildar_Gabdullin

The only way to replace a name - card-mod.

Bad, but at least this way… thanks.

[kineticscreen]

Looks like this update was rolled back.

Release Card-mod 3.4.4 · thomasloven/lovelace-card-mod

[Mariusthvdb (Marius)]

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…

[Ildar_Gabdullin]

Nice way of using new badges. Design appears to be useful for showing progress indicators.

[Mariusthvdb (Marius)]

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