2024.8 style badge styling doesn't work

mikosoft83 commented 1 month ago

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:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] 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 commented 1 month ago

same issue

Herbs851 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

@AdmiralStipe

All these questions should be asked in Community. They are not bugs.
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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 2 weeks ago

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

aman-sandhu commented 1 week ago

@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 commented 1 week ago

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

thomasloven / lovelace-card-mod

2024.8 style badge styling doesn't work #391