Card mod scheint nicht zu funktionieren

[Barry Ricoh]

Eine weitere Frage zu meinem neuen Dashbord Projekt.

Für den Code eines Dashboards welchen ich aus dem Internet geladen habe benötige ich wohl das HACS Plugin "card mod"
Das habe ich auch installiert, aber irgendwie scheint das nicht zu fuktionieren.

Als Beispiel hier soll der Text als Überschrift in der Mitte einer Karte fett gedruckt ausgegeben werden:

cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: Volvo XC40
        style: |
          h1.title {
          display: flex;
          align-items: center;
          text-align: center;
          font-size: 2.8vh;
          }
          h1.title::before,
          h1.title::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #fff;
          }
          h1.title:not(:empty)::before {
            margin-right: 1em;
          }
          h1.title:not(:empty)::after {
            margin-left: 1em;
          }
          ha-card {
            background: none!important;
            border:none
            }

Das passiert aber nicht, der bleibt einfach am linken Rand.
Der Code wurde 1.1 kopiert(mit Ausnahme des Textes hinter "title :"
Irgendjemand eine Idee was ich falsch mache?

Link zum original code : https://itheo.tech/integrating-your-volvo-v60-into-your-smart-home

 

[Nival]

Du hast garnicht angegeben, dass es card_mod ist - aber mit flex muss man für "zentriert, fett" ohnehin nicht anfangen, das hier genügt:

type: custom:mushroom-title-card
title: Volvo XC40
card_mod:
  style: |
    h1.title {
     text-align: center;
     font-size: 2.8vh;
     }

- wenn Du die Karte direkt bearbeitest und dann dort in den YAML-Modus gehst sollten auch die Einrückungen stimmen.

Solltest Du aus irgendwelchen Gründen doch mit flex arbeiten wollen, dann wäre nicht align-items, sondern justify-content dafür zuständig, den Inhalt horizontal zu zentrieren. Das align-items zentriert vertikal.

 

[Barry Ricoh]

Wie gesagt, der Code ist ja komplett kopiert, und im Original steht ja auch Nix von card_mod etc.

Kann dann sein das der Typ was anderes nutzt zur Individualisierung?

Also ich weiß das du nicht hellsehen kannst, ich meine halt rein vom anschauen des Codes

 

[RudiP]

Oder kann es sein, das der Artikel schon uralt ist und es damals halt
Cards:
hieß und heute halt
card_mod
? Nur mal so als Gedanke.

 

[Barry Ricoh]

Der Artikel ist aus dem DEZ 23 also nicht so sehr alt.
Und cards: ist ja eher für die Angabe welche Karte genommen werden soll

 

[HA-DAU]

Das Teil, Code hat er scheinbar am Dec 17, 2023 erstellt.
Also noch nicht so lange her....
Sieht aber schon irgendwie Geil aus der Aufbau.
Außer Du schreibst den Typ mal an, wie er das gemacht hat und er teilt Dir den neuen Code mit.

 

[Nival]

Nachdem ich mir den Code auch mal komplett reinkopiert habe - doch, der funktioniert in der Tat auch ohne card_mod dadrüber. Wundert mich etwas, ist aber so, und der Quellcode sagt, card_mod greift.

Das cards ist allerdings direkt von HA, und sofern Du all das was Du oben gepostet hast in eine Karte kopiert hast dürfte das für Verwirrung gesorgt haben. So funktioniert es:

type: custom:mushroom-title-card
title: Volvo XC40
style: |
  h1.title {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 2.8vh;
  }
  h1.title::before,
  h1.title::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #fff;
  }
  h1.title:not(:empty)::before {
    margin-right: 1em;
  }
  h1.title:not(:empty)::after {
    margin-left: 1em;
  }
  ha-card {
    background: none!important;
    border:none
    }

Nur, wie gesagt, für einfaches zentrieren und fett schreiben braucht es flex garnicht.

 

[Barry Ricoh]

Also der Teil in meinem Post ist nur ein Ausschnitt.
Ich habe den kompletten Quellcode aus dem Link genommen und dann in ein neues Dashboard kopiert.
Ich kann bei dir tatsächlich keinen Unterschied erkennen.