New badges and card-mod customisation

AdmiralStipe · August 7, 2024, 11:58pm

I had customised old badges in terms of colours and fonts, which was based on certain conditions.
With new badges all of these customizations were lost, but I found a solution to continue using legacy badges by changing type. While I can see the old badges, customisation is still not working anymore. Two examples:

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

Font and colour remain always the same regardless of the state.

Can anyone give me some hints on what and especially how it has to be changed to make the customisation work again?
I tried searching CSS properties of badges with Inspector in browser, but I just don’t understand enough CSS to find the solution.

Alternatively, if someone can point me on how to use the state based color customisations on new badges, would also be great (whch property should be addressed instead of “:host” and “–label-badge-red”.

Thx in advance for any help.

FragMenthor · August 8, 2024, 1:50pm

Following!
I had very customized badges that are now gone, this changes should cover people using the old badges, not force a change like this with no option.
There are a lot of changes lately that I simply don’t understand, why are they doing this to long time users???

RomMuc · August 9, 2024, 8:26am

Good morning,

I spent 30 min on lovelace-mushroom/docs/badges/template.md at 6ba4887f4e2756222806aacc2e204451c57ab214 · piitaya/lovelace-mushroom · GitHub combined with Templating - Home Assistant and honestly, the result is pretty cool I could reuse almost all the content of the card-mod stuff I had (just a bit of text formatting and that was it):

So @AdmiralStipe :

install the Mushrooms from HACS
Add a badge in your dashboard using the Mushroom template
Copy the card-mod stuff you had in the corresponding fields

Well done for this evolution of HA

Romain.

AdmiralStipe · August 9, 2024, 1:04pm

Thx for the instructions, I tried it and it works just fine.
However, I prefer old style badges - they consume significantly less space (two rows instead of four with my 54 badges ) and also give better quick overview of the states (at least for my taste). so I will wait a bit for the possible solution of customising the old ones.
If it won’t be possible, I will recreate the 54 badges according to your proposal.
Thx again.

Ildar_Gabdullin · August 9, 2024, 1:32pm

A possible alternative way to resurrect old badges:

Move all your old badges to picture-elements.
Change a layout of a view to show this picture-elements on the top.

Rather cumbersome.
Also, there are some slight differences between a “badge on a view” & a “badge on PE card” (can be solved by card-mod).

jameswestcott · August 11, 2024, 3:08pm

Has anyone found a way to change the font size on these badges? Can’t get card-mod to work.

Olivier1974 · August 12, 2024, 9:17am

Hello there,

As much as I like the minimalist new badge style, I don’t like that I can’t customize them with card-mod as I used to.

So it is now 2 days that I’m recreating a kind of custom:badge-card using stack-in-card, entities and custom:hui-state-badge-element and a lot of card-mod instructions

type: custom:stack-in-card
mode: horizontal
keep:
  background: true
cards:
  - type: entities
    entities:
      - type: custom:hui-state-badge-element
        entity: sensor.uptime_television_human
        name: Télé
        tap_action:
          action: call-service
          confirmation:
            text: Voulez remettre le temps de télévision à zéro ?
          service: script.raz_de_television
        card_mod:
          style: |
            :host {
              --label-badge-red: {% if is_state('input_boolean.stop_tele', 'off') %} green {% else %} red {% endif %} !important;
              {% if is_state('input_boolean.stop_tele', 'off') %}
                --label-badge-background-color: rgba(0,255,0,0.1) !important;
              {% else %}
                --label-badge-background-color: rgba(255,0,0,0.1) !important;
              {% endif %}
            }
  - type: entities
    entities:
      - type: custom:hui-state-badge-element
        entity: sensor.uptime_ipad_human
        name: iPad
        display_type: complete
        tap_action:
          action: call-service
          confirmation:
            text: Voulez remettre le temps d'iPad à zéro ?
          service: script.raz_de_ipad
        card_mod:
          style: |
            :host {
              --label-badge-red: {% if is_state('input_boolean.stop_ipad', 'off') %} green {% else %} red {% endif %};
              {% if is_state('input_boolean.stop_ipad', 'off') %}
                --label-badge-background-color: rgba(0,255,0,0.1) !important;
              {% else %}
                --label-badge-background-color: rgba(255,0,0,0.1) !important;
              {% endif %}
            }
  - type: entities
    entities:
      - type: custom:hui-state-badge-element
        entity: sensor.uptime_laptop_human
        name: Ordi
        display_type: complete
        tap_action:
          action: call-service
          confirmation:
            text: Voulez remettre le temps d'ordinateur à zéro ?
          service: script.raz_de_laptop
        card_mod:
          style: |
            :host {
              --label-badge-red: {% if is_state('input_boolean.stop_ordi', 'off') %} green {% else %} red {% endif %};;
              {% if is_state('input_boolean.stop_ordi', 'off') %}
                --label-badge-background-color: rgba(0,255,0,0.1) !important;
              {% else %}
                --label-badge-background-color: rgba(255,0,0,0.1) !important;
              {% endif %}
            }
card_mod:
  style: |
    :host {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ha-card {
      border-style: none;
      background-color: none !important;
      --ha-card-background: none;
    }

Result:

I’m not posting that in the card-mod thread as it will be lost in all the replies.
Feel free to inspire yourself from this code, enhance it and do kind and positive comments on my starting code

Olivier1974 · August 12, 2024, 9:23am

I just did a post to “recreate” the custom:badge-card after 2024.8

vingerha · August 12, 2024, 10:19am

This is a next change affecting Thomas Lovens cards.
@thomasloven could you posisbly indicate your view in maintaining your cards with the existing and upcoming changes on the dash/frontend?

Olivier1974 · August 12, 2024, 10:24am

I’d like to emphasise that @thomasloven did such an amazing work with all the custom cards he provided to our community.

I can’t count the number of time that I’m using one of his right now: card-mod, slider-entity-row, fold-entity-row, layout-card, badge-card

jchh · August 12, 2024, 11:12am

same. Every one of my ‘main’ views uses custom:lovelace-layout-card and many of the rest make use of lovelace-auto-entities.

Frosty · August 12, 2024, 11:18am

I used mushroom template to get it the way I wanted.

AdmiralStipe · August 12, 2024, 11:45am

I was trying with mushroom also, but didn’t succeed with satisfactory result.
Are you willing to post some yaml of these badges, so I can try to recreate and style them a bit further?

AdmiralStipe · August 12, 2024, 11:54am

Great, but if i understand correctly (didn’t try it out yet), this is a custom card and therefore does not span over the whole width of the screen? Because what I want to achieve is, as it was with old badges - they are on the top of the screen on the whole width.
So my preferred solution would include something like

badges:
  - type: custom:hui-state-badge-element 
    entity: sensor.temperature_bedroom
    card_mod:
      style: |
         :host, .$, whatever....
         .label-badge {
           font;
                 }
         --label-badge-red:
         ....

I’m still struggling to find the correct DOM properties for the style, but no success yet.

Mariusthvdb · August 12, 2024, 12:32pm

please keep this thread on the hui-state-badge-element so we can focus.

they are nice!. please post in Mushroom styling thread? (not here as it will only confuse users looking to style the now legacy State badge). Ofc the link would be nice, so we can all followup .

Ill add this for now, as Ive tested the available theme variables and have these working:

# Legacy Badges loaded as custom
# https://github.com/home-assistant/frontend/blob/20408392d2c26b7320cee2e1b4ca3c8bd880b84e/src/panels/lovelace/badges/hui-state-label-badge.ts
# https://github.com/home-assistant/frontend/blob/20408392d2c26b7320cee2e1b4ca3c8bd880b84e/src/components/entity/ha-state-label-badge.ts
    label-badge-background-color: orange
    label-badge-text-color: ivory
    label-badge-red: var(--ha-color)
    ha-label-badge-font-size: 15px
    ha-label-badge-size: 30px
    ha-label-badge-border-radius: 0

#  X  ha-label-badge-color: yellow
#  X   ha-label-badge-label-text-transform: lowercase  #capitalize|none|uppercase|lowercase
    ha-label-badge-label-color: white
#  X   ha-label-badge-label-background-color: ivory

    ha-label-badge-title-font-size: 10px
    ha-label-badge-title-font-weight: 400
    ha-label-badge-title-width: 50px
#  X   ha-label-badge-title-color: white
# need .label-badge .label span for label background-color, color, border-radius

ofc those are generic, and not per badge.
the commented X dont work, even though they are used in the resource…

Olivier1974 · August 12, 2024, 12:43pm

Yes, it is to replace the (not yet updated) badge-card.

So, no, unless you do a “one card widht” page, like panel or lateral bar, it will not span, sorry.

I tried with your syntax since 2024.8.0b0 but gave up as nothing seemed to work to customize the custom:hui-state-badge-element inside the badge element even if it is working in another card like the entities one that I used in my post.

But I think it is much easier than to use a picture-element card

Brandon_Beierle · August 12, 2024, 6:23pm

I used the custom badge card with floorplan card in panel mode - this worked really well for letting me show badges while maximizing the size of the floorplan card.

There now seems to be no way to show badges in panel mode - has anyone found any workarounds for that? I tried layout card, and while it does allow me to maximize the floorplan card, the button to add badges disappears.

Thanks in advance!

Olivier1974 · August 12, 2024, 6:32pm

Ok, I’m asking for help already …

The custom:hui-state-badge-element seems too big compared to what is in my memory and the gap between each card of the stack is also too big.

If someone know how to apply a 80% factor on the badge (probably at the entities card level) and reduce the gap between the entities cards (probably at stack-in-card level)?

Please

Mariusthvdb · August 13, 2024, 6:33am

see 2 posts above, use ha-label-badge-size: 30px in your theme and it sets that to all badges

type: custom:mod-card
card_mod:
  style: |
    :host {
      --stack-card-gap: 0;
    }
card:
  type: horizontal-stack

(use grid-card-gap for a grid card)

type: custom:mod-card
card_mod:
  style: |
    :host {
      --grid-card-gap: 2px;
    }

card:
  type: grid

or, are you asking between the cards in the view itself ? that would probably an override in card-mod theming

Olivier1974 · August 13, 2024, 7:26am

I’m looking for that gap, the green part, but as I’m using transparent background, I can change my stack-in-card to an horizontal-stack and try your code