Border in einer Picture Card entfernen

Dashboard/Cards/Frontend
1

Hallo,

wie bekomme ich die Umrandungen in dieser Picture Elements raus?

Screenshot 2024-09-11 153917

Hier der Code:

type: picture-elements
image: /local/muell/Back_trans.png
elements:
  - type: custom:button-card
    entity: sensor.mullabholung_text_morgen
    show_icon: false
    show_name: false
    show_state: true
    style:
      top: 10%
      left: 50%
      width: 100%
    styles:
      state:
        - font-size: 1vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
        - white-space: unset
        - text-overflow: unset
        - word-break: break-word
      card:
        - background: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.graue_tonne
    show_entity_picture: true
    entity_picture: /local/muell/schwarz.png
    show_state: false
    show_name: false
    aspect_ratio: 2/3
    size: 100%
    styles:
      card:
        - border: none
        - background: transparent
    state:
      - value: Morgen
        entity_picture: /local/muell/schwarz.png
        styles:
          entity_picture:
            - animation:
                - blink 1s linear infinite
    style:
      pointer-events: none
      left: 15%
      top: 45%
      width: 20%
  - type: custom:button-card
    entity: sensor.papier_tonne
    show_entity_picture: true
    entity_picture: /local/muell/blau.png
    show_state: false
    show_name: false
    aspect_ratio: 2/3
    size: 100%
    styles:
      card:
        - border: none
        - background: transparent
    state:
      - value: Morgen
        entity_picture: /local/muell/blau.png
        styles:
          entity_picture:
            - animation:
                - blink 1s linear infinite
    style:
      pointer-events: none
      left: 38%
      top: 45%
      width: 20%
  - type: custom:button-card
    entity: sensor.bio_tonne
    show_entity_picture: true
    entity_picture: /local/muell/braun.png
    show_state: false
    show_name: false
    aspect_ratio: 2/3
    size: 100%
    styles:
      card:
        - border: none
        - background: transparent
    state:
      - value: Morgen
        entity_picture: /local/muell/braun.png
        styles:
          entity_picture:
            - animation:
                - blink 1s linear infinite
    style:
      pointer-events: none
      left: 61%
      top: 45%
      width: 20%
  - type: custom:button-card
    entity: sensor.grune_tonne
    show_entity_picture: true
    entity_picture: /local/muell/gruen.png
    show_state: false
    show_name: false
    aspect_ratio: 2/3
    size: 100%
    styles:
      card:
        - border: none
        - background: transparent
    state:
      - value: Morgen
        entity_picture: /local/muell/gruen.png
        styles:
          entity_picture:
            - animation:
                - blink 1s linear infinite
    style:
      pointer-events: none
      left: 84%
      top: 45%
      width: 20%
  - type: custom:button-card
    entity: sensor.graue_tonne
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 15%
      width: 25%
    styles:
      name:
        - font-size: 0,9vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0,8vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.papier_tonne
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 38%
      width: 25%
    styles:
      name:
        - font-size: 0,9vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0,8vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.bio_tonne
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 61%
      width: 25%
    styles:
      name:
        - font-size: 0,9vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0,8vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.grune_tonne
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 84%
      width: 25%
    styles:
      name:
        - font-size: 0,9vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0,8vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
  - type: action-button
    action: input_button.press
    title: Abfrage
    data: {}
    target:
      entity_id: input_button.mullerinnerung_button
    style:
      left: 50%
      top: 75%
2

Moin,
Mir siehr das nach ein Schatten aus.
Füge unter styles: → card: bei den Buttoncard’s nochmal - box-shadow: none hinzu.

Edit:
bei den anderen karten solltest du es mit Card-mod weg bekommen.

            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }

(Einrückung wahrscheinlich nicht richtig für dich, hab es bei mir aus ein Dashboard raus kopiert.)

LG
Tobi

1 „Gefällt mir“
3

Danke Dir. Abend gerettet :smile: