Rahmen wird nicht angezeigt?

Konfig & Integration
1

Hallo, ich versuche krampfhaft einen Rahmen um meine Card anzeigen zu lassen. Jedoch wieder ohne Erfolg. Kann mir jemand auf die Sprünge helfen? Habe es nach mehreren Anleitungen versucht, aber irgendetwas mache ich wohl falsch!

image
image1000×987 44.5 KB

Mit diesen Zeilen habe ich es probiert:
card_mod:
style: |
ha-card {
border: 4px solid var(–primary-color);
color: var(–paper-item-icon-active-color);
}

2

Hi, das liegt an der horizontal-stack-card. Das ist die Standard-HA-Card, die kann so leider nicht gestylet werden, daher hattest du auch keinen Erfolg. Du musst die drei Gauge Cards z.B. in eine custom-layout-card oder custom:vertical-stack-in-card packen, dann klappt es auch mit dem Rahmen/Border.

3

Booohhhh…wenn man neu ist fällt einem alles ein wenig schwerer!
Ich bekomme es einfach nicht hin mit den Cards??? Liegt wohl daran, dass ich das ganze mit den Cards nicht verstanden habe obwohl ich wirklich eine menge Zeit mit lesen und Youtube schauen verbringe. Wäre schön wenn mir das einer einmal näher erklären könnte?

4

Kein Ding, wir helfen dir soweit wir können. :slight_smile:
Durch das Verschachteln bekommt man den Border letztlich hin. Ich habe den Code mal für dich angepasst. Ganz wichtig ist immer die Einrückung, eine weitere Unterteilung beginnt immer zwei Leerzeichen oder einen Tab nach der vorherigen. Dadurch ergibt sich die Verschachtelung.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: gauge
        entity: sensor.computerzimmer_schalter_shelly1_plug_temperature
        name: Temperatur
        min: 14
        max: 40
        needle: true
        segments:
          - from: 14
            color: skyblue
          - from: 18
            color: var(--success-color)
          - from: 26
            color: var(--warning-color)
          - from: 34
            color: var(--error-color)
      - type: gauge
        entity: sensor.shellyhtg3_84fce63a9d54_humidity
        name: Feuchtigkeit
        needle: true
        segments:
          - from: 0
            color: var(--warning-color)
          - from: 35
            color: var(--success-color)
          - from: 65
            color: var(--warning-color)
      - type: gauge
        entity: sensor.shellyhtg3_84fce63a9d54_battery
        min: 1
        max: 100
        needle: true
        name: Akku
        severity:
          green: 70
          yellow: 30
          red: 1
card_mod:
  style: |
    ha-card {
      padding: 0px;
      border: 10px solid red !important;   
    }

image
image1071×271 14.8 KB

Farbe und Stärke des Randes kannst du beliebig verändern (hier im Beispiel rot und 10px border).

5

Soooo…habe es einmal probiert.
vertical-stack-in-card habe ich installiert. Jedoch hat er es in folgendes Verzeichnis gelegt (/homeassistant/www/community/vertical-stack-in-card/vertical-stack-in-card.js) und laut Beschreibung muss es in den Ordner www abgelegt werden. Dadurch funktioniert es leider nicht! Muss ich es jetzt manuell in den www Ordner legen?
Danke :pray:

6

Das wurde schon korrekt installiert. Der Installationspfad ist für alle gleich. Alle custom Sachen aus HACS werden eigentlich im community-ordner unter www abgelegt. Das muss funktionieren. Neustart von HA nach der Installation durchgeführt? Wie sieht dein Code jetzt aus? Stimmt die Einrückung nach dem Kopieren?

7

Danke erst einmal für deine Hilfe. Habe es zwar noch nicht ganz hinbekommen, aber ich muss auch mal anderweitig weiter kommen. HA ist sooo umfangreich da kann man sich am Anfang nicht mit solchen Kleinigkeiten aufhalten. Ich werde mich aber demnächst noch einmal damit beschäftigen. Du hast mir auf jedn Fall schon einmal weiter geholfen…danke…danke!

1 „Gefällt mir“