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

Configuration Frontend
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
27

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
28

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.

29
30

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

CSS font-size property (w3schools.com)
CSS color property (w3schools.com)

31

i got the following:

  - type: state-badge
    entity: switch.sonoff_10015c8b2f
    style:
      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

32

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
33

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 https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1396

34

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

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

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

EDIT2: scaling seems to work for my example.

35

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
    style:
      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)

36

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
    style:
      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…

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

yes with images it works, with mdi icons not…

39

Solution was already provided.

1 Like
40

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

41

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