Rahmen (border) in Karte entfernen

Linos · 21. Dezember 2023 um 12:25

Hi Leute,

ich habe hier eine so gewachsene Karte von type: entities und benötige Hilfe um den border im Bereich der Temperatur/Luftfeuchtigkeit zu entfernen.

Ich habe bereits per google versucht ein „border: none“ einzusetzen aber das funktioniert nur mit dem Rahmen von der gesamten Karte.
Hat jemand eine Idee, ich bin mit meinen bescheidenen Lovelace-Künsten am Ende


type: entities
entities:
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        card_mod:
          style: |
            ha-card {
              border: none;
              }
        cards:
          - type: custom:button-card
            color_type: blank-card
          - type: custom:button-card
            entity: sensor.klima_garage_temperatur
            show_name: false
            show_state: true
            show_icon: false
            styles:
              card:
                - border: none
              state:
                - height: 13px
                - font-size: 14px
                - color: '#70889e'
          - type: custom:button-card
            entity: sensor.klima_garage_luftfeuchtigkeit
            show_name: false
            show_state: true
            show_icon: false
            styles:
              card:
                - border: none
              state:
                - height: 13px
                - font-size: 14px
                - color: '#70889e'
          - type: custom:button-card
            color_type: blank-card
  - entity: switch.kuhlschrank_garage
    type: custom:multiple-entity-row
    toggle: true
    state_color: true
  - entity: switch.steckdose_einfahrt
  - entity: sensor.torantrieb_garage_turzustand
    type: custom:multiple-entity-row
    show_state: false
    state_color: true
    entities:
      - entity: sensor.torantrieb_garage_turzustand
        name: false
        styles:
          color: '#70889e'
      - entity: input_select.garage_torantrieb_set
        name: false
        icon: mdi:format-list-bulleted
title: Garage
show_header_toggle: false
state_color: true

Alex · 21. Dezember 2023 um 13:29

Geht nur mit GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card, oder mit einem Theme, welches die Ränder allgemein auf 0 Pixel setzt.

Linos · 21. Dezember 2023 um 14:40

Das habe ich bereits versucht innerhalb von dem horizontal-stack. Via Theme hätte ich es gerne vermeiden wollen

Alex · 21. Dezember 2023 um 14:49

card_mod:
  style: |
    ha-card {
      --ha-card-border-radius: 0px;
  }

Hier findest du ganz viele Beispiele:

Linos · 21. Dezember 2023 um 16:38

Danke dir für deine Unterstützung.
Einen Teilerfolg konnte ich mit folgenden erreichen (mit 0px).
Leider verändert das auch den äußeren Rahmen von der Karte mit.
Gibt es sowas wie “–ha-IN-card-border-width: 5px”

    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 5px;
          }

sirector · 21. Dezember 2023 um 16:41

Kannst du das mal so testen?

card_mod:
      style: |
        ha-card ha-card {
          --ha-card-border-width: 5px;
          }

Linos · 21. Dezember 2023 um 17:01

Danke für deine Idee, leider hebelt es dann die Funktion komplett aus mit „ha-card ha-card {“.

Also --ha-card-border-width: XXpx hat dann keinen Einfluss mehr

Jonas.DER · 21. Dezember 2023 um 21:26

ich hatte das gleiche Problem und habe es einfach mit

--ha-card-border-color: white;

gelöst

Linos · 22. Dezember 2023 um 08:14

Hallo und willkommen im Forum. Ich danke dir für deinen Tipp, doch leider setzte ich dadurch auch den äußeren Rahmen der Karte auf die jeweilige Farbe

Alex · 22. Dezember 2023 um 08:59

Versuch es mal so:
Ich denke, das Problem ist, dass in der obersten entities Karte nur Entitäten erlaubt sind und keine Stapel.

type: custom:vertical-stack-in-card
title: Test
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:button-card
        color_type: blank-card
      - type: custom:button-card
        entity: sensor.temp1
        show_name: false
        show_state: true
        show_icon: false
        styles:
          state:
            - height: 13px
            - font-size: 14px
            - color: '#70889e'
      - type: custom:button-card
        entity: sensor.humid1
        show_name: false
        show_state: true
        show_icon: false
        styles:
          state:
            - height: 13px
            - font-size: 14px
            - color: '#70889e'
      - type: custom:button-card
        color_type: blank-card
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px;
        }
  - type: entities
    entities:
      - entity: switch.test1
        name: Switch1
      - entity: switch.test2
        name: Switch1
card_mod:
  style: |
    ha-card {
      --ha-card-border-width: 2px;
      --ha-card-border-color: black;
    }

Linos · 22. Dezember 2023 um 18:50

Wow, super Vielen Dank für deine Bemühung, so klappt es mit dem entfernen von dem inneren Rahmen

So verwirft es allerdings den type: custom:multiple-entity-row in der letzen Zeile. Liegt das an dem type: custom:vertical-stack-in-card?

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:button-card
        color_type: blank-card
      - type: custom:button-card
        entity: sensor.klima_garage_temperatur
        show_name: false
        show_state: true
        show_icon: false
        styles:
          state:
            - height: 13px
            - font-size: 14px
            - color: '#70889e'
      - type: custom:button-card
        entity: sensor.klima_garage_luftfeuchtigkeit
        show_name: false
        show_state: true
        show_icon: false
        styles:
          state:
            - height: 13px
            - font-size: 14px
            - color: '#70889e'
      - type: custom:button-card
        color_type: blank-card
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px;
        }
  - type: entities
    entities:
      - entity: switch.kuhlschrank_garage
      - entity: switch.steckdose_einfahrt
  - type: custom:multiple-entity-row
    entity: sensor.torantrieb_garage_turzustand
    show_state: false
    state_color: true
    entities:
      - entity: sensor.torantrieb_garage_turzustand
        name: false
        styles:
          color: '#70889e'
      - entity: input_select.garage_torantrieb_set
        name: false
        icon: mdi:format-list-bulleted
title: Garage
show_header_toggle: false
state_color: true

Alex · 24. Dezember 2023 um 08:42

Schieb die custom:multiple-entity-row mal in die entities-Karte rein, dann sollte es korrekt angezeigt werden.

  - type: entities
    entities:
      - entity: switch.kuhlschrank_garage
      - entity: switch.steckdose_einfahrt
      - type: custom:multiple-entity-row
        ...

Linos · 25. Dezember 2023 um 18:51

Super geil , vielen Dank für deine Unterstützung und die Zeit die du dir genommen hast. Wieder etwas neues dazu gelernt, dass mit den “Ebenen” innerhalb eines “-type:” war mir auch noch nicht so ganz klar