Ankündigung

Einklappen
Keine Ankündigung bisher.

Rahmen um "horizontal-card"?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Rahmen um "horizontal-card"?

    Hallo!

    Ich komme an einem Punkt nicht weiter.
    Ich habe eine "vertical-card" mit mehreren Cards und in dem Bereich "Lokale Temperaturen" habe ich eine "horizontal-card".

    Bildschirmfoto vom 2025-11-28 22-44-33.png


    Nun hätte ich gerne um die beiden Werte in der "horizonal-card" auch einen Rahmen wie bei den anderen.

    Ich habe schon einiges ausprobiert (auch mit card_mod), aber bisher noch keinen Erfolg.

    Habt Ihr eine Idee wie man dies möglichst einfach bzw. elegant hinbekommt?

    Gruß
    Sven

    Dies ist der Code:
    Code:
     type: vertical-stack
      cards:
        - type: heading
          icon: mdi:thermometer
          heading_style: title
          heading: Lokale Temperaturen
        - type: horizontal-stack
          cards:
            - type: heading
              icon: mdi:home-thermometer
              heading: vorne
              heading_style: title
              badges:
                - type: entity
                  show_state: true
                  show_icon: false
                  entity: sensor.front_outdoortemp
            - type: heading
              icon: mdi:home-thermometer-outline
              heading: hinten
              heading_style: title
              badges:
                - type: entity
                  show_state: true
                  show_icon: false
                  entity: sensor.back_outdoortemp
    Zuletzt geändert von SvenA; 29.11.2025, 13:00.

    #2
    Dein Link funktioniert nicht.
    Eigentlich sollte das mit custom:mod-card funktionieren.
    Wie sah dein Code aus?

    Bsp.
    HTML-Code:
    type: vertical-stack
    cards:
      - type: heading
        icon: mdi:thermometer
        heading_style: title
        heading: Lokale Temperaturen
    
      - type: horizontal-stack
        cards:
          - type: custom:mod-card
            card_mod:
              style: |
                ha-card {
                  border: 1px solid red;
                  border-radius: 10px;
                  padding: 10px;
                }
            card:
              type: heading
              icon: mdi:home-thermometer
              heading: vorne
              heading_style: title
              badges:
                - type: entity
                  show_state: true
                  show_icon: false
                  entity: sensor.front_outdoortemp
    
          - type: custom:mod-card
            card_mod:
              style: |
                ha-card {
                  border: 1px solid red;
                  border-radius: 10px;
                  padding: 10px;
                }
            card:
              type: heading
              icon: mdi:home-thermometer-outline
              heading: hinten
              heading_style: title
              badges:
                - type: entity
                  show_state: true
                  show_icon: false
                  entity: sensor.back_outdoortemp
    
    ​

    Kommentar


      #3
      Hallo r4id,

      danke für die Antwort. Das mit dem Bild habe ich mal korrigiert.
      So wie Du das machst funktioniert das halb. Dann hat jeder der "heading"s einen Rahmen.
      Ich hätte nur gerne einen Rahmen um beide, also den "horizontal-stack", damit das durchgehend aussieht, so wie die Karte darunter, wo jetzt "keine Warnungen" drinsteht. Und das bekomme ich leider nicht hin.

      Gruß
      Sven

      Kommentar


        #4
        Zitat von SvenA Beitrag anzeigen
        Ich hätte nur gerne einen Rahmen um beide, also den "horizontal-stack", damit das durchgehend aussieht,
        Dann musst Du card_mod: auch auf der Ebene des horizontal-stack's verwenden, in den die beiden Karten eingebettet sind (also eine Ebene höher bzw. weiter links).

        /tom

        Kommentar


          #5
          Zitat von Tom Bombadil Beitrag anzeigen
          Dann musst Du card_mod: auch auf der Ebene des horizontal-stack's verwenden, in den die beiden Karten eingebettet sind (also eine Ebene höher bzw. weiter links).
          /tom
          Habe ich ja probiert, aber das funktioniert halt nicht - daher frage ich ja hier nach....

          Kommentar

          Lädt...
          X