Picture Element - State Badge Label removal

Configuration Frontend
1

Any way I can remove the label from underneath a State Badge in a Picture Element card?

I have a floor plan as the picture and I want to show the temperature in each room and the State Badge does it nicely, but I know it’s eg the Lounge Temperature so want to remove the label from under the badge.

  - type: picture-elements
    image: /local/FloorPlanGround.jpg
    elements:
      - type: state-badge
        entity: sensor.indoor_temperature_lounge
        style:
          top: 50%
          left: 80%
          font-size: 10px
2

Could you use state-label instead ?

3

Thanks. Just tried it. I’m new to this part of HA.

I quite liked the format of the badge itself but the state-label will work if I fiddle with the format.

4

Goto card-mod thread → 1st post → link at the bottom → styles for picture elements
image

5

got here for the same thing and instead of the overhelming card-mod (at least for me) I went with the state-label instead

type: picture-elements
elements:
  - type: state-label
    entity: sensor.sonoff_snzb_02d_temperature
    style:
      top: 56%
      left: 76%
      font-size: 12px
      color: black
      font-weight: bold
      background-color: white
      border: red 2px solid
      border-radius: 5px

and I’m showing my picture-elements as

msedge_1WH2XCC8Im

1 Like
6

I would set here smth like “rgba(255,255,255,0.2)”, i.e. semi transparent.

7

That’s a great idea, but I have labels on my map and would make hard to read the temperatures

8

Hi @Ildar_Gabdullin, could you point me exactly to the piece of code to achieve that?

I’ve tried a lot, I’ve asked to ChatGPT, but nothing works, I cannot set the display to none for .title element …

9

Please do not, use brains. One person recently almost killed himself due to following AI advices from google (“what could be a replacement for a salt”).

Sorry, far away from a PC, cannot give a code. Please check examples given in the provided link.

10

What link are you talking about? Can’t find any link in your posts.

11

The post which you answered contains a path to a post.

12

image
image674×334 17.8 KB

I’m sorry this post doesn’t contain a link. “card-mod thread” is not a link, and there are a lot of card-mod threads when I search, sorry if I cannot find info.

I thought people were nice to help, and use this famous feature called a “hyperlink”, which is what made Internet so famous back in times, instead of just leaving people struggle with imprecise instructions.

Thanks a lot for this valuable help, I’ll remember.

13

Keep remembering, or try to find what is “main card-mod thread”. Better to ask this than writing a long essay.
Please someone who is sitting on a sofa post a link for this person.

14
1 Like