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

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

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.

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

1 Like

THANK YOU SO MUCH, YOU HAVE BEEN VERY HELPFUL. Never edited that way before but it is so much clearer now. Missed it in post 19. THANKS AGAIN

1 Like

I can get the name of badge to change but what about font_size och font color?
I have tried but can’t figure it out.

Follow the link provided by @Troon and here are some link to understand CSS

CSS font-size property (
CSS color property (

i got the following:

  - type: state-badge
    entity: switch.sonoff_10015c8b2f
      top: 3%
      left: 25%
      :host {
        --label-badge-blue: {% if is_state('switch.sonoff_10015c8b2f', 'on') %} green {% else %} red {% endif %};

but it wont work…
whats wrong?

mod is installed

Wrong syntax.
You mixed together card-mod & a “style” option of picture-elements card.
Go to card-mod thread → 1st post → link at the bottom.

1 Like

What are you trying to customize?
Because badges at the top are in the - badges: section.

The one you are trying to customize is a state-badge in a picture-elements card, isn’t it?
The solution here is not relevant for that.

Have a look, as @Ildar_Gabdullin said, to the link

i would like to have the floorplan of my apartment.
and then i would like to have added all my window sensors and maybe the lights.

then i would like that my window sensors are red when open and green when closed.

they are “switches” from sonoff (wifi door sensors) and it would also be cool not to have ON and OFF written on them. OPEN and CLOSE would be cool.

for that i got under dashboard a picture-elements card.
and there is my local image of the floorplan.

i dont know if that is the right way.
and it would be cool if viewed on other devices, the sensors are on the right position and not overly big.

is that possible?

EDIT: - found the way to display the icons

  - type: image
    entity: switch.sonoff_10015c8b2f
      'on': /local/windowopen.png
      'off': /local/windowclosed.png
      top: 5%
      left: 25.25%

now i just need to find out because of the scaling.

EDIT2: scaling seems to work for my example.

Ok, you found yourself your solution :slight_smile:
Not related to the solution but I’m giving you an extra “tip” for picture-elements card, try this

  - entity: sensor.xiaomi_temperature
      color: transparent
      font-size: 8px
      left: 64%
      top: 11.5%
      '--label-badge-background-color': white
      '--label-badge-text-color': black

This will hide the ugly text and change the text/color of the badge. Could be usefull for what you’re doing (or not)

the solution i posted is not what i used in the end.

here is my actual code:

  - type: state-icon
    entity: switch.sonoff_10015c8b2f
    icon: mdi:window-closed-variant
      top: 4%
      left: 19.8%
      '--paper-item-icon-color': gray
      '--paper-item-icon-active-color': red

But with this its not possible to change the icon depending on the state…

  - entity: light.kidsroom
      action: more-info
    image: /local/ceiling-light-on.png
      'off': /local/ceiling-light-off.png
      'on': /local/ceiling-light-on.png
      unavailable: /local/ceiling-light-grey.png

yes with images it works, with mdi icons not…

Solution was already provided.

1 Like

the solution for changing the mdi icons?
i didnt see it, and i tried to implement, when someone said i mixed up things.

but i never saw a solution for a state-label changing mdi icons that worked

You should open your own topic.
This one is about the customization of the badges at the top of a view.
You’ll get more help, especially with self explaining title like “How to change mdi icons based on status in picture-elements”
As this one is closed with a solution, nobody is coming to read and answer your questions

Ah ok, no problem. I just wanted to avoid opening too many topics.

My answer was about customizing badges.
It is same for badges for picture-elements & “top of the page” - card-mod (link was provided). (actually, only a possibility to specify a “name” is the only difference between them)
In some limited scope customizing badges in picture-elements is possible w/o card-mod - by using only stock “styles” option.

1 Like