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

Olivier1974 · April 1, 2020, 10:10pm

Hello all,

As everyone does, I’ve put this in my configuration.yaml file:

themes: !include_dir_merge_named themes/

And it works perfectly.
My new wish is to create some additional info there like:

  on:
    primary-text-color: '#00cc00'
    label-badge-red: '#00cc00'
  off:
    primary-text-color: '#cc0000'
    label-badge-red: '#cc0000'

So I can use them to customize my badges. But how? If I put this under the !include_dir_merge_named, it fails with:

Apr 01 23:57:18 ERROR (SyncWorker_0) [homeassistant.util.yaml.loader] while scanning a simple key
Apr 01 23:57:18 ERROR (MainThread) [homeassistant.bootstrap] Failed to parse configuration.yaml: while scanning a simple key

Is there a way to complete/enhance this themes section in a way?

Thank you,

Olivier

micque · April 2, 2020, 4:17am

I’m not sure what your trying to do. Themes typically allow you to set the colors for the entire UI. Examples can be found in themes category in the Hacs add-on. But there are no ‘on:’/‘off:’ keys in those files. Perhaps you are trying to add styling as per the card-mod plug-in? In that case mods are added to the lovelace yaml files. Card-mod is also available through the Hacs add-on.

Olivier1974 · April 2, 2020, 7:44am

My initial wish is to colorize my badges (at the top of the pages), like I’ve put some binary sensors (ping) and want them red or green depending on the binary_sensor state.
For that, I’m using something found in this thread Custom UI - icon color change

In customize.yaml:

binary_sensor.router_ping:
  templates:
    theme: >
      if (state = on) {
        return 'on';
      } else {
        return 'off';
      }

Then in the themes section of frontend, in configuration.yaml:

frontend:
  themes:
    on:
      primary-text-color: '#00cc00'
      label-badge-red: '#00cc00'
    off:
      primary-text-color: '#cc0000'
      label-badge-red: '#cc0000'

My understanding is that it will create 2 themes (called ‘on’ and ‘off’) that I will re-use in the customize.yaml to define the theme of my badges.

But my themes tag already contains:

themes: !include_dir_merge_named themes/

So I’m wondering how to add thoses ‘on’ and ‘off’ lines in the themes section of the configuration.yaml file.

micque · April 2, 2020, 1:58pm

Looked into the reference documentation you sited. Most references are pretty old and the last update to the andrey-git seems to be about a year old. What version of ha are you using? Are you using Lovelace for your ui? Are you using the andrey-git Custom UI code? None of what you’re proposing to do will work without it as far as I can see.

Olivier1974 · April 2, 2020, 2:01pm

Oops ok
I’m using lovelace of course.
And my HA is the latest, always. So 107.7 at the time of writing.

So, I’m back at step 0, how will I colorize my badges

micque · April 2, 2020, 2:43pm

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

Olivier1974 · April 3, 2020, 10:08am

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.

micque · April 3, 2020, 2:41pm

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.

Olivier1974 · April 3, 2020, 3:32pm

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:

It breaks the automatic update if any
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.

AhmadK · April 3, 2020, 9:46pm

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.

Olivier1974 · April 9, 2020, 4:35pm

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

Install the card-mod extension (via HACS is the easiest)
Activate card-mod in your lovelace config
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.

Olivier1974 · April 9, 2020, 4:47pm

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.

wfsteadman · February 6, 2021, 5:31pm

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

Olivier1974 · February 6, 2021, 6:11pm

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

wfsteadman · February 6, 2021, 6:17pm

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

wfsteadman · February 6, 2021, 6:19pm

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.

wfsteadman · February 6, 2021, 6:22pm

{
	"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

Olivier1974 · February 6, 2021, 6:56pm

I see a badges section. It is there.

wfsteadman · February 6, 2021, 7:04pm

- 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.

Olivier1974 · February 6, 2021, 7:38pm

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 "