Customize timer badge appearance in Picture elements

Hi,

I want to show a timer on my Dashboard. Using type: state-badge is the only code showing the actual remaining time. But now I have the classic Badge style optic. I only want to show the icon in black and the remaining time in black underneath. No additional name of the timer or any background color or border color.

I guess card-mod would do the job but I couldn’t get it to work the way I want it. I hope someone can help me.

Thanks.

              - type: state-badge
                entity: timer.wasche_2_stunden
                icon: mdi:washing-machine
                tap_action: none
                hold_action: none
                style:
                  top: 75%
                  left: 6%

IMAGE-1

Suggest to ask card-mod related questions in the main card-mod thread - instead of creating own threads.
Besides, here styles for badges which you may need: card-mod thread → 1st post → link at the bottom → picture-elements

Here is what I came up with

type: picture-elements
image: /local/your_image
elements:
  - type: icon
    icon: mdi:washing-machine
    style:
      top: 75%
      left: 16%
    card_mod:
      style: |
        :host {
          color: black;
          --mdc-icon-size: 30px;
        }
  - type: state-badge
    entity: timer.wasche_2_stunden
    style:
      top: 75%
      left: 16%
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge {
                  color: transparent !important;
                  } 
                .badge-container .label-badge .label span {
                  color: black !important;
                  background: none !important;
                  font-weight: 900;
                  font-size: 15px !important;
                 } 
                .badge-container .label-badge  {
                  background: none;
                  border: none;
                  width: 100px !important;
                  }
                .title {
                  display: none;
                 }

image

1 Like