Mal wieder: Hintergrund von Karten ändern

Dashboard/Cards/Frontend
1

Hallo,
ich weiß, dass diese Frage schon mehrfach gestellt wurde und ich hoffe, dass ich alle wichtigen Posts zu diesem Thema kenne. Aber es funktioniert einfach nicht bei mir.
Ich möchte deutlich sehen, wenn irgendwo bei uns eine Tür/Garage usw. offen steht. daher möchte ich den Hintergrund von Karten einfärben, weil mir das Färben der Icons nicht sichtbar genug ist.
Ich habe button card installiert, will aber nicht für so eine Kleinigkeit jedesmal eine neue Karte konfigurieren. Das erscheint mir doch zu aufwändig.
Ebenso habe ich Card Mod installiert. Das funktioniert aber offenbar nicht, weil ich den gewünschten Effekt nicht sehe.
Wenn ich im YAML Editor folgendes eingebe:
card_mod:
style: |
ha-card {
background-color: red;
}

erscheint folgende Meldung:
"Visueller Editor wird nicht unterstützt

  • Der Schlüssel „card_mod“ wird vom visuellen Editor nicht erwartet oder nicht unterstützt.

Du kannst deine Konfiguration weiterhin in YAML bearbeiten."

Ich weiß, dass es nur eine Warnmeldung ist, aber es funktioniert auch nicht.
Ich habe es mit folgenden Karten probiert:
-Entity Karte
-mushroom entity Karte
-Kachel Karte

Ich habe neben “background-color” auch “color” oder nur “background” probiert. Nichts führt zum Erfolg.

Card Mod liegt bei mir in folgendem Verzeichnis:
/homeassistant/www/community/lovelace-card-mod/card-mod.js
Das habe ich auch in der configuration.yaml so angegeben:
extra_module_url:
/homeassistant/www/community/lovelace-card-mod/card-mod.js

Ich habe aber auch schon mit:
extra_module_url:
- /local/card-mod.js
oder /hacsfiles/lovelace-card-mod/card-mod.js . getestet.
Kein Erfolg.

Was muss man tun, wenn man den Hintergrund einer Karte ändern will?
Ist das bei Card Mod mit allen Karten möglich oder gibt es Einschränkungen?

Danke für euren Input.

Jürgen

2

Das ich “normal” und richtig so. Sobald Du den Code änderst, kann HA den nur über YAML verarbeiten.

Steht auch klar in der Meldung.

Schlecht ist, dass Du den Code nicht richtig in Deinen Post packst. Der muss da dazwischen:
2025-01-13 11-20-46

So wie er jetzt aussieht, ist die Formatierung falsch. Mag sein, dass Du es “live” richtig gemacht hast, sieht hier aber dann keiner.

card_mod:
  style: |
    ha-card {
    background: #7A0000;
    }

So funktioniert es bei mir…

5

Sorry, verstehe ich nicht. Ich dachte das sei YAML?

Wo muss ich das denn eingeben?

card_mod:
  style: |
    ha-card {
      background-color: red;
    }

So besser?

:crayon:by HarryP: Zusammenführung Mehrfachpost (bitte “bearbeiten” Funktion nutzen)

6

Jein, nur “background”. Du bist scheinbar an der richtigen Stelle, YAML-Code ist aber EXTREM zickig, wenn er nicht richtig formatiert wird.

7 
type: entity
entity: binary_sensor.garage_torkontakt
name: Garage
card_mod:
  style: |
    ha-card {
      background: red;
    }
    }

geht auch nicht

8

Ist schon mal eine Klammer zuviel, sonst müsste es tun.

Sieht es bei Dir auch so aus?

2025-01-13 11-26-33
2025-01-13 11-26-33806×364 28.7 KB

10

Habe ich gesehen. Die letzte Klammer ist aber im Editor nicht sichtbar. War vermutlich Kopierfehler.

type: entity
entity: binary_sensor.garage_torkontakt
name: Garage
card_mod:
  style: |
    ha-card {
      background: red;
    }

image
image821×230 7.55 KB

:crayon:by HarryP: Zusammenführung Mehrfachpost (bitte “bearbeiten” Funktion nutzen)

11

Dein Code funktioniert bei mir, halt mit einer anderen Entität, die ist aber Wurst!!!

2025-01-13 11-28-04
2025-01-13 11-28-041069×446 51.2 KB

Sieht aus, als wäre es richtig installiert. Hast Du HA neu gestartet nach der Installation?

12

Ja, schon mehrfach neu gestartet.

13

Uff. Browser Cache gelöscht und schon geht es. Boah ist das ein Mist.
Aber dein Hinweis, dass es bei dir geht, hat mich auf die Idee gebracht. Danke.

14

Hallo zusammen,

ich hätte da auch ein sehr ähnliches Thema.

Ich möchte in einer “Kachel-Karte” ein Hintergrundbild einblenden. jedoch scheitere ich einwenig.
Ein Bild unten drunter bekomme ich eigendlich hin jedoch hier nicht mehr da ich zuviel ausprobiert habe :slight_smile:

image
image273×321 11.3 KB

jedoch soll es ja nicht drunter sondern hinter allen schaltern sein.
Ich habe das über den grün markierten Schalter gemacht im Yaml.
Das ist mein Code:

 type: grid
cards:
  - type: heading
    heading_style: title
    heading: Clara
  - type: tile
    entity: device_tracker.handyclara
    features_position: bottom
    vertical: false
    grid_options:
      columns: 12
      rows: 1
  - features:
      - type: light-brightness
    type: tile
    entity: light.licht_clara
    features_position: inline
    vertical: false
    name: Licht
  - features:
      - type: toggle
    type: tile
    entity: switch.clara_steckdosen
    features_position: inline
    vertical: false
    name: Steckdosen
  - features:
      - type: cover-open-close
    type: tile
    entity: cover.clara_rollo_hof
    features_position: inline
    vertical: false
    name: Rollo Hof
  - features:
      - type: cover-open-close
    type: tile
    entity: cover.clara_rollo_strasse
    features_position: inline
    vertical: false
    name: Rollo Straße
  - features:
      - type: cover-open-close
    type: tile
    entity: cover.clara_rollo_park
    features_position: inline
    vertical: false
    name: Rollo
  - card_mod:
      style: |
        ha-card {
        image: /local/bilder/Clara_Zimmer.jpg;
        }
title: null

Kann mir jemand dabei helfen?
Danke

:crayon:by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)

15

Der Spiegelstrich muss weg.

16

Muss ich es dann auch nach vorne schieben oder den Rest raus rücken?

Nur weg mit dem „-„ reicht nicht.

17

Hast du es ausprobiert?

Die Card Mod-Deklaration gehört zum jeweiligen Karteninhalt:

  - features:
      - type: cover-open-close
    type: tile
    entity: cover.clara_rollo_park
    features_position: inline
    vertical: false
    name: Rollo
    card_mod:
      style: |
        ha-card {
          image: /local/bilder/Clara_Zimmer.jpg;
        }

Ob der Card Mod-Code an sich stimmt, hab ich nicht geprüft.

18

Ich würde das Bild gerne hinter alle Karten von diesem Stapel gleich zeitig legen.

So das der gestrichelte Rahmen wenn man auf den Bearbeitungsstift geht der Bilderrahmen ist.

Ich hoffe ich habe das richtig erklärt.

19

Das wird nur mit mod-card gehen.

Hier hatte ich ein Beispiel gepostet.

20

Hallo zusammen,

ich habe jetzt verschiedenes Probiert aber ich bin einfach nicht weitergekommen.

Ich möchte in einer Kachel ein Hintergrundbild einfügen, jedoch ohne Erfolg - ich habe zwar schon etwas Hilfe bekommen jedoch reicht das nicht.

type: entities
entities:
  - entity: cover.clara_rollo_hof
  - entity: switch.clara_steckdosen
  - entity: sensor.backup_letztes_erfolgreiches_automatisches_backup
card_mod:
  style: |
    ha-card {
    image: /local/bilder/Sina_Zimmer.jpg
    }

Wenn ich das image gegen background mit farbe tausche funktioniert es jedoch nicht bit dem Bild - was mache ich den Falsch?

21

Eine image Eigenschaft gibt es in CSS nicht…

Wenn das BIld auch wirklich da liegt, dann versuch mal

type: entities
entities:
  - entity: cover.clara_rollo_hof
  - entity: switch.clara_steckdosen
  - entity: sensor.backup_letztes_erfolgreiches_automatisches_backup
card_mod:
  style: |
    ha-card {
      background-image: url("/local/bilder/Sina_Zimmer.jpg");
    }
22

Danke, jetzt habe ich soviel probiert jedoch diese Kombi nicht.

Kannst du mir noch sagen wie ich das Bild Skaliere das es sich automatisch anpasst?

23

Mit background-size kannst die Größe des Bildes ändern.

Angabe erfolgt in Breite und Höhe (%, px, vw, oder vh)

Außerdem kannst du auch cover oder contain verwenden.

Wahrscheinlich wirst du dann auch background-repeat benötigen, damit nicht mehr gekachelt wird.

Warum probiert?

Für css gibts doch so viele Referenzen z.B.: