2024.8 style badge styling doesn't work

[mikosoft83]

My Home Assistant version: 2024.8

My lovelace configuration method (GUI or yaml): GUI

What I am doing: using card mod in theme to style badges

What I expected to happen: style badges :D

What happened instead: nothing

Minimal steps to reproduce: try anything in card-mod-badge-yaml:

  card-mod-badge-yaml: |
    .badge {
        padding: 2px 8px !important;
        border-radius: 0px !important;
    }

Doesn't get attached to badge shadow root at all

Error messages from the browser console:

VM13847:1  Uncaught (in promise) SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at s.<anonymous> (card-mod.js:1:48199)
    at d (card-mod.js:1:2813)
    at Generator.<anonymous> (card-mod.js:1:4159)
    at Generator.next (card-mod.js:1:3242)
    at y (card-mod.js:1:8728)
    at a (card-mod.js:1:8931)
    at card-mod.js:1:8990
    at new Promise (<anonymous>)
    at s.<anonymous> (card-mod.js:1:8871)

Not sure if the error is relevant but I included it anyways.

---

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[khaisilk1910]

same issue

[Herbs851]

@mikosoft83 Maybe try something inspired by

  card-mod-view-yaml: |
    hui-masonry-view $:
      hui-view-badges $:
        ha-sortable:
          hui-badge:nth-child(n):
            hui-entity-badge $: |
              .badge {
                background-color: rgb(255,0,0) !important;
              }

[mikosoft83]

@mikosoft83 Maybe try something inspired by

  card-mod-view-yaml: |
    hui-masonry-view $:
      hui-view-badges $:
        ha-sortable:
          hui-badge:nth-child(n):
            hui-entity-badge $: |
              .badge {
                background-color: rgb(255,0,0) !important;
              }

Yes, I do somthing similar but I still reported this since the badge itself is exposed to card-mod theming.

[AdmiralStipe]

Inline styling of old-style badges ( I can't get used to new ones because of all customization and space consumation) is also broken. Two examples from lovelace, that stopped working with introduction of new badges (I changed the type to old fashioned badges) - the colours and font sizes don't apply anymore:

type: custom:hui-state-badge-element
entity: sensor.temperatura_rokova
card_mod:
  style: |
    :host {
      --label-badge-red:
        {% if as_timestamp(now()) - as_timestamp(strptime(states('sensor.datum_rokova'), "%d.%m.%Y",default='01.01.2000').strftime("%Y-%m-%d ") + states('sensor.cas_rokova')) | float(default=0) > 240 %}
        purple
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 17.99 and states('sensor.temperatura_rokova') | float(default=0) < 28 %}
        #80C884
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 27.99 and states('sensor.temperatura_rokova') | float(default=0) < 30 %}
        orange
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 15.99 and states('sensor.temperatura_rokova') | float(default=0) < 18 %}
        orange              
        {% else %}
        red
        {% endif %}
       ;
     }
hold_action:
  action: call-service
  service: script.refresh_esp3

type: custom:hui-state-badge-element
entity: switch.robas1_local
card_mod:
  style:
    ha-state-label-badge:
      $:
        ha-label-badge:
          $: |
            .label-badge .value {
            {% if is_state((config.entity), 'off') %}
            font-size: 100% !important;
            {% else %}
            font-size: 70% !important;
            {% endif %} 
            }
      .: |
        :host {
          --label-badge-red:
           {% if is_state((config.entity), 'off') %}
            #80C884
            {% else %}
            red
            {% endif %}       
           ;
          }
tap_action:
  action: toggle
hold_action:
  action: more-info

[ildar170975]

@AdmiralStipe

1. All these questions should be asked in Community. They are not bugs.
2. This particular issue - about "card-mod-badge-yaml cannot be used to style a badge". An obvious result of changing a standard badge element.

[AdmiralStipe]

1. All these questions should be asked in Community. They are not bugs.

How can you tell it's not a bug? The code does not work anymore, I posted the question in the community, but didn't receive any useful reply in terms of adapting the code, so I assumed it must be a bug, which can be solved by changing plugin.

If you are sure it's not a bug and can be solved by altering the code, please, explain me, what and how do I have to change
the YAML code, so it will work again.

[ildar170975]

If you are sure it's not a bug and can be solved by altering the code, please, explain me, what and how do I have to change
the YAML code, so it will work again.

STANDARD WAY - use Code Inspector and find out what DOM path & which CSS properties/variables must be used to achieve the result. Very same way which was used to prepare this list of mods.

[AdmiralStipe]

STANDARD WAY - use Code Inspector and find out what DOM path & which CSS properties/variables must be used to achieve the result. Very same way which was used to prepare this list of mods.

I tried that already, but it seems, that I'm not smart enough to find out, what DOM path & which CSS properties have to be used for my case (old styled badges in version 2024.8). That's why I asked for help with posting my code for testing and when I didn't get any useful answer, I tried reporting the bug (I assumed, iif noone knows how to solve it, it must be a general bug then).

[ildar170975]

@AdmiralStipe
It is NORMAL to be inexperienced in smth.
Suggest you to do 2 things:
-- wait - may be someone in Community will post smth useful
-- learn - on simple examples, check the link I provided (man, I never ever ever dealt with CSS, learned from zero - and issued tutorials, one by one - learned again - improved tutorials - and so on)

As for "nobody solved yet" - possible reasons are:
-- badges are not commonly used
-- people are consumers, not creators

[lindsaymarkward]

I'm following this, and post here the link to my question in the thread referenced earlier in this issue.

[aman-sandhu]

@AdmiralStipe did you find out anything. I am in the same boat. I have tried for hours and hours but I just cannot learn this DOM path thing. I have used the card mod selector tool but dont know how to apply it in card mod. Please let me know if you come across anything helpful.

[AdmiralStipe]

No, after a while i eventually gave up and switched to new badges with mushroom.
https://community.home-assistant.io/t/new-badges-and-card-mod-customisation/757488/35?u=admiralstipe