Recreate "custom:badge-card" after 2024.8 (re-created)

Share your Projects!
,
1

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, especially in badge-card that I’m using to put badges mainly at the bottom of my dashboards.

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:

image

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

P.S.: To moderation, please do not merge again with a post talking about mushroom or regular badges, this is about badge-card

3 Likes
2

Thank you for posting this! I have a question I hope you might be able to answer. The value of the “name” parameter for each of my badges is not being displayed. Instead it shows the name of the entity. For example, when I use “name: Front”, the text under the badge says “Front Door Lock” instead of “Front”.
badge_clip

Any suggestions? Here is my code:

      - type: custom:stack-in-card
        mode: horizontal
        keep:
          background: true
        cards:
          - type: entities
            entities:
              - type: custom:hui-state-badge-element
                entity: lock.front_door_lock
                name: Front
                card_mod:
                  style: |
                    :host {
                      --label-badge-red: {% if is_state('lock.front_door_lock', 'locked') %} 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: lock.back_door_lock
                name: Back
                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('lock.back_door_lock', 'locked') %} 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 %}
                    }
        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;
            }
3

Yes, I noticed, it is a side effect of the custom:
You can give a name to your entities in the UI

image

1 Like
4

This is just what I was looking for, thanks.

All my custom:badge-cards went haywire with the last update and I’ve been putting off sorting them since.