Rahmen um "horizontal-card"?

[SvenA]

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:

 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

[r4id]

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

Bsp.

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

​

[SvenA]

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

[Tom Bombadil]

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

[SvenA]

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....

[r4id]

type: vertical-stack
cards:
  - type: heading
    icon: mdi:thermometer
    heading_style: title
    heading: Lokale Temperaturen

  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          border: 1px solid red;
          border-radius: 10px;
          padding: 10px;
        }
    card:
      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

​

[SvenA]

Interessant.
Ich hatte es mit einem Code so ähnlich wie diesem versucht:

 type: vertical-stack
  cards:
    - type: heading
      icon: mdi:thermometer
      heading_style: title
      heading: Lokale Temperaturen
    - type: horizontal-stack
      card_mod:
      style: |
        :host {     # hier auch "ha-card" versucht...
        border: 1px solid red;
        border-radius: 10px;
        padding: 10px;
      }
  cards:
   ....

Aber da ist in der Anzeige nur Müll rausgekommen.

Du scheinst hier den "horizontal-stack" vorher noch in eine "custom:mod-card" einzubetten und dann geht es wohl.
Danke dafür!

Ist dies immer der bevorzugte Weg hierfür?

Gruß
Sven

[r4id]

Ja, da du dem horizontal-stack nicht direkt styles zuweisen kannst, musst du diesen noch in einen container einbetten.

Vielleicht noch ein Hinweis. Gerade bei so kleinen und einfachen Dingen kann dir die KI auch den Code liefern 😉.