New badges and card-mod customisation

lindsayward · August 26, 2024, 11:58am

It looks like this hasn’t been solved yet, but I’ll add my specific need here and see if there are any current workarounds or future updates that make this possible.
I want a person badge with a border colour that updates on presence.
With the old badge and card_mod, I had this working like:

  badges:
    - entity: person.lindsay
      card_mod:
        style: |
          :host {
            {% if is_state('person.lindsay','home') %} --label-badge-red: green;
            {% elif is_state('person.lindsay','not_home') %} --label-badge-red: grey;
            {% else %} --label-badge-red: purple;
            {% endif %}
          }

I have just tried the mushroom template badge as mentioned in post #3. I could set the colour of the icon using similar template code in the ‘color’ field…

color: |-
  {% if is_state('person.lindsay','home') %} green
  {% elif is_state('person.lindsay','not_home') %} grey
  {% else %} purple
  {% endif %}

But, this has no effect when I use an image, not an icon, and I want the image.

Is there a way to set a border with this and style it using a template?
Or, use the new badge like I used to

AdmiralStipe · August 26, 2024, 2:02pm

You may not be happy with my solution, but I solved the same problem with mushroom using image instead icon and different images saved in HA’s “www” folder (each image has different border color) like so:

{% if states('person.myprecious')=='home' %}
/local/bgreen.png
{% elif states('person.myprecious')=='not_home' %}
/local/bred.png
{% else %}
/local/byellow.png
{% endif %}

Example of bred.png

Mikkaat · August 26, 2024, 11:27pm

Thank you, this is what i was thinking as well… Just wanted to see if anyone out there had any other suggestions. I will prob implement this though

medicus07 · August 27, 2024, 8:37am

Hi Romain,

can you give me the full syntax for a badge configuration in yaml-mode, please?

My old ones are of this syntax:

      - entity: sensor.pool
        name: Pool
        display_type: complete
        state_content: state
        color: red
        icon: mdi:thermometer
        card_mod:
          style: |
            :host {
              --label-badge-red: orange;

I don´t know how to start under badges…

SCR-20240827-kell

medicus07 · August 28, 2024, 7:32am

I managed it myself…

views:
  - badges:
      - type: custom:mushroom-template-badge
        content: "{{ states('sensor.aussentemperatur_2') }} °C"
        label: Aussen
        color: |
          {% if states('sensor.aussentemperatur_2') | float >= 35 and states('sensor.aussentemperatur_2') | float < 45 %} darkred
          {% elif states('sensor.aussentemperatur_2') | float >= 30 and states('sensor.aussentemperatur_2') | float < 35 %} red
          {% elif states('sensor.aussentemperatur_2') | float >= 25 and states('sensor.aussentemperatur_2') | float < 30 %} orange
          {% elif states('sensor.aussentemperatur_2') | float >= 20 and states('sensor.aussentemperatur_2') | float < 25 %} yellow
          {% elif states('sensor.aussentemperatur_2') | float >= 10 and states('sensor.aussentemperatur_2') | float < 20 %} green
          {% elif states('sensor.aussentemperatur_2') | float >= 5 and states('sensor.aussentemperatur_2') | float < 10 %} grey
          {% elif states('sensor.aussentemperatur_2') | float >= 0 and states('sensor.aussentemperatur_2') | float < 5 %} cyan
          {% elif states('sensor.aussentemperatur_2') | float >= -5 and states('sensor.aussentemperatur_2') | float < 0 %} blue
          {% else %} purple
          {% endif %}
        icon: mdi:thermometer

DarkmanXV · August 29, 2024, 10:12am

I’m using iOS Themes what I need to do to make badges transparent as card below? Is it theme problem?

alexh3o · August 29, 2024, 7:46pm

Hi,
I struggled also and I set on using the mushroom template card with renders like this and can be used as badges

The code for one of them is as follows, it’s possible to change, with card_mod, background color, shape, lines palcement, etc…

type: custom:mushroom-template-card
primary: '{{states(entity)|round(1)}}°C'
secondary: Intérieur
icon: mdi:home
icon_color: cornflowerblue
fill_container: false
layout: vertical
multiline_secondary: false
entity: sensor.temperature_interieure
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      --icon-size: 36px !important;
      background: 
        {% if (states(config.entity) | int(-1000) == -1000 ) -%} var(--disabled-color)
        {% elif (states(config.entity) | float <= 8 ) -%} royalblue
        {%- elif (states(config.entity) | float <= 17 ) -%} lightskyblue
        {%- elif (states(config.entity) | float <= 18.5 ) -%} lightcyan
        {%- elif (states(config.entity) | float <= 26 ) -%} var(--success-color)
        {%- elif (states(config.entity) | float <= 28 ) -%} coral
        {% else %} red
        {% endif %};
      width: 5rem !important;
      height: 3rem !important;
      --title-padding: 0px !important;
      --chip-avatar-padding: 0px;
      --spacing: 0px;
      --card-primary-font-weight: 800;
      --card-primary-font-size: 1rem;
      --card-secondary-font-size: 0.9rem;
      --card-primary-line-height: 20px;
      --card-secondary-line-height: 20px;
    }

alexh3o · August 29, 2024, 7:50pm

With my post just before and mushroom-template-card you can make it transparent by setting the background color to rgba format, like rgba(1,1,1,0.2).
Maybe not the simplest solution though.

JuliaSoriaSmith · August 31, 2024, 4:57pm

Yes I am hoping for a theme variable as well, I am trying to get less rounded corners

Kwiatjk · September 5, 2024, 1:12pm

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 · September 5, 2024, 3:55pm

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

Kwiatjk · September 17, 2024, 8:59am

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 · September 20, 2024, 5:58pm

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 · December 21, 2024, 4:17am

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 · December 21, 2024, 9:05am

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

Ildar_Gabdullin · December 21, 2024, 9:44am

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 · December 21, 2024, 8:35pm

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 · December 21, 2024, 8:38pm

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 · December 21, 2024, 8:44pm

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 · December 21, 2024, 8:55pm

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))