How to customize the badges at the top of the page?

Configuration Frontend
6

Try looking into card-mod 🔹 Card-mod - Add css styles to any lovelace card. This is what I use for css customizing in Lovelace.

7

I will. But it is not a badge at the side of an entity, inside a card but the one on top of a page. I’ll have a look to see what is possible with Card-mod.

8

Then I assume you are using the auto Lovelace ui and not yaml mode. In that case you might look at the hacs themes. There is some amount of customization of the badge colors in them. Perhaps you can determine more of the badge color labels and change it that way. There’s discussions in the card-mod thread about how to find specific color labels that will help.

9

Long story short, I was using the yaml before lovelace became the default interface but changed to the auto one since.
Changing the theme is something I can do, for sure, but:

  1. It breaks the automatic update if any
  2. It is time consuming and I wanted a quick win solution.

Thank you for the help you provided. I keep the card-mod idea in mind and will use it later for sure.

10

as far as I remember it has a section about working with badges so it is possible.
can’t say anything about themes as don’t use them.

11

You, yes you that came here looking for the answer, here it is :slight_smile:

  1. Install the card-mod extension (via HACS is the easiest)
  2. Activate card-mod in your lovelace config
  3. Use the following configuration (in yaml) for your badge:
  - badges:
      - entity: binary_sensor.bbox_ping
        icon: 'mdi:router-wireless'
        name: BBox
        card_mod:
          style: |
            :host {
              --label-badge-blue: {% if is_state('binary_sensor.bbox_ping', 'on') %} green {% else %} red {% endif %};
            }

Why --label-badge-blue? Because my badge was originally blue. Not too hard huh?!

Pay attention to indentation.
Here you are, you’re welcome.

Bye bye.

3 Likes
12

Thank you everyone:

  • @micque to lead me to card-mod
  • @AhmadK to confirm that badges was a viable option.

Btw, I’ve change the title as it was more a custo issue, not a yaml/tag one.

2 Likes
14

I know this is late, but can someone point out which actual file I paste this code to?

15

When you edit your dashboard, edit the badge section and complete the existing code with what I’ve marked as the solution.

16

let me try that, I assume you mean from the GUI itself?

17

I don’t see a place in the GUI and when I tried to put it into the page in CLI/VSCode it gives errors.

18 
{
	"title": "Monitoring",
	"path": "monitoring",
	"badges": [
		{
			"entity": "binary_sensor.ha"
		}
	],
	"cards": [
		{
			"type": "history-graph",
			"entities": [
				{
					"entity": "sensor.ping_ha_vm",
					"name": "HA VM"
				}
			],
			"hours_to_show": 24,
			"refresh_interval": 0,
			"title": "Ping Averages"
		}
	]
}

This is what my lovelace page looks like from VSCode and I am trying to add icon to the binary_sensor.ha badge
19

I see a badges section. It is there.

20 
- badges:
      - entity: binary_sensor.bbox_ping
        icon: 'mdi:router-wireless'
        name: BBox
        style: |
          :host {
            --label-badge-blue: {% if is_state('binary_sensor.bbox_ping', 'on') %} green {% else %} red {% endif %};
          }    
Your code shows different and when I try to paste that into that lovelace file I get different errors.
21

Indeed, your code is different, don’t know why.

Mine looks like this for my particular lovelace page:

views:
  - badges:
      - entity: binary_sensor.bbox3_ping
        icon: 'mdi:router-wireless'
        name: BBox
        style: |
          :host {
            --label-badge-blue: {% if is_state('binary_sensor.bbox3_ping', 'on') %} green {% else %} red {% endif %};
          }     
      - entity: binary_sensor.synology_ping
        icon: 'mdi:nas'
        name: Synology
        style: |
          :host {
            --label-badge-blue: {% if is_state('binary_sensor.synology_ping', 'on') %} green {% else %} red {% endif %};
          }     
      - entity: binary_sensor.tradfri_ping
        icon: 'mdi:dots-vertical-circle-outline'
        name: Trådfri
        style: |
          :host {
            --label-badge-blue: {% if is_state('binary_sensor.tradfri_ping', 'on') %} green {% else %} red {% endif %};
          }     
    cards:
      - cards:
          - cards:
              - entities:
... to continue ...

I’m editing by clicking on the top right button “vertical 3 dots”, then the gear and then again the “3 dots” and "{} Edit "

22

I have card-mod installed, I do see it in HACS the only part of the configuration that is not working is the style section.

23

Are you editing like me?
I’m not editing the files in the .homeassistant/.storage
But if you do, here is how it looks like in mine:

                    "badges": [
                        {
                            "entity": "binary_sensor.bbox3_ping",
                            "icon": "mdi:router-wireless",
                            "name": "BBox",
                            "style": ":host {\n  --label-badge-blue: {% if is_state('binary_sensor.bbox3_ping', 'on') %} green {% else %} red {% endif %};\n}     \n"
                        },
24

How are you editing your files? I go to the HA directory with VSCode and open them from there.

25

So just as an FYI I do have the colors changing now since your last post so it definitely has something to do with formatting.

26

I’m editing from the UI, as mentioned in post 19. Never from the HA directory.

1 Like