Hallo erstmal und gleich eine Frage zur Farbgebung der Pop-Up Menüs

[Scheki]

Hallo, ich bin neu hier und auch noch nicht so lange mit Home Assistant vertraut. Seit Jahren nutze ich Homematic-IP, und nun ist mir die Interaktion mit anderen Systemen zu schwach geworden bzw. Homematic-IP hat viele Produkte nicht, die ich gerne nutzen würde und bei anderen Anbietern finde.

Nun zu meiner Frage: Ich nutze ein Wallpanel und habe dort u.a. den Zustand meines Nuki Ultra stehen. Wenn ich auf die Entitäten Badge des Nuki klicke, dann öffnet sich ein Pop-Up. Was mich total stört ist, dass in dem Pop-Up aus meinem Farbempfinden der Zustand "Aufgeschlossen" in rot und "" Abgeschlossen" in grün erscheint - ich würde das genau andersherum als logisch betrachten. Aber wie in aller Welt kann ich das ändern ? In der Entitäten Badge selbst kann ich die Farbe vergeben für die Badge, aber irgendwie nicht für das PopUp. Vielen Dank für die Infos vorab und bitte bedenkt, ich habe keine Ahnung von YAML Programmierung, also bitte für absolute Anfänger (mit aber hohem Maß an Interesse es zu verstehen) adressieren. Danke !!

 

[Nival]

Aber wie in aller Welt kann ich das ändern ?

Indem Du https://github.com/thomasloven/lovelace-card-mod verwendest und den entsprechenden CSS-Code herausfindest. Ein ähnliches Thema hatten wir hier: https://forum.heimnetz.de/threads/alarm-panel-status-von-und-nach-homematik.827/#post-44484 - bestenfalls genügt Dir das schon um den richtigen Code zu finden.

 

[RudiP]

"Aufgeschlossen" in rot und "" Abgeschlossen" in grün erscheint - ich würde das genau andersherum als logisch betrachten.

Echt ? Also ich finde das genau so logisch.
ROT die Tür ist offen, also Gefahr
GRÜN die Tür ist verschlossen, also alles Safe.

 

[Scheki]

Echt ? Also ich finde das genau so logisch.
ROT die Tür ist offen, also Gefahr
GRÜN die Tür ist verschlossen, also alles Safe.

Guter Punkt, das kam mir nicht in den Sinn, aber gerade deshalb wäre es aus meiner Sicht wünschenswert, wenn ich intuitiv mit den Farben umgehen könnte

 

[Scheki]

Ich habe jetzt das herausgefunden und in die configuration.yaml geschrieben, aber nix tut sich . Irgendeine Idee ??


# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
# themes: !include_dir_merge_named themes
# Example configuration.yaml entry
themes:
my_theme:
state-lock-lock.nuki_daheim-lock.lock-color: red
state-lock-lock.nuki_daheim-lock.open-color: green

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

 

[Nival]

Irgendeine Idee ??

Ja. card_mod - https://github.com/thomasloven/lovelace-card-mod - und nicht Theme

Mit Themes, also dem was Du in die configuration.yaml geschrieben hast (bei Code bitte das nächste Mal https://forum.heimnetz.de/threads/hinweis-zum-thema-einfuegen-von-yaml-code-in-beitraegen.1019/ beachten) kannst Du nur von HA vergebene Variablen überschreiben, das macht man beispielsweise um systemweit die Schrift größer zu stellen. Falls Dich das Thema interessiert, das hatten wir hier schon: https://forum.heimnetz.de/threads/d...se-generell-aendern-moeglich.4758/#post-48201

Was Du möchtest ist aber wesentlich spezifischer, dafür gibt es keine Variablen, da müssen wir pures CSS verwenden, und das kann man mit card_mod machen, damit wird eigenes CSS eingefügt. Ich denke aber auch nicht, dass Du schon das richtige herausgefunden hast, denn state-lock-lock.nuki_daheim-lock.lock-color würde das hier bedeuten:

Also ein Element state-lock-lock mit den Klassen nuki und daheim-lock und lock-color. Das wird es so nicht geben, und die Anweisung : red wäre so ohnehin ungültig.

Also was Du auf jeden Fall tun musst wäre erstmal card_mod installieren gemäß der Anleitung bei github. Um dann CSS-Code einzufügen bearbeitet man eine Karte in der Übersicht, klickt unten links in der Karte auf "Code-Editor anzeigen" und kann dort dann entsprechendes einfügen, das hier ist beispielsweise der aktualisierte Code aus dem verlinkten Thread:

card_mod:
  style:
    hui-card-features $ hui-card-feature $ hui-alarm-modes-card-feature $ ha-control-select $: |
      #option-disarmed {--control-select-color: green;}
      #option-armed_away {--control-select-color: red;}

Du musst dabei penibel auf Einrückungen (bezüglich YAML) und Leerzeichen generell (bezüglich CSS) achten, die ersten beide Zeilen mit card_mod: und style: müssen genau so geschrieben werden und dann um zwei Leerzeichen weiter eingerückt erstmal die Navigation zu dem fraglichen Element. Das Thema shadow-root das mittels Dollarzeichen dargestellt wird hatte ich ja in dem Thread schon erklärt. Die Grundlagen stehen bei github, den genauen Pfad müssen wir bei Dir rausfinden, das kann ich mangels Nuki leider nicht übernehmen.

Am besten tastet man sich da immer weiter vor, z.B. mit einer einfachen Angabe wie * {color: red;} unter die grobe Navigation, also hier in Zeile 4, das färbt dann die Schriftfarbe von allem rot was betroffen ist, und dann sucht man sich durch Elemente und shadow-root bis zum gewünschten Ziel und da kann man dann schauen, welche Klassen und IDs verwendet werden.

Wenn ich Dir damit schon zu viel um die Ohren gehauen hab, frag ruhig nach!

 

[Scheki]

Hallo Nival,

W-O-W !!!!

Was soll ich sagen, vielen herzlichen Dank für die wirklich umfangreichen Infos und Tips, werde mich am WE mal dran setzen und mich damit beschäftigen, so wie ich das verstehe, ist es trotz Deiner Erklärung ggf auch noch ein wenig try and error. Aber nochmals, vielen Dank für die Mühe, die Du Dir gemacht hast.

 

[Nival]

ein wenig try and error

Ja, auf jeden Fall - grade wenn man damit keine Erfahrung hat.

...und dann stellte sich heraus, card_mod kann auf die Art garkeine Popups stylen, da diese ausserhalb von Lovelace liegen

Ein paar Stunden später: card-mod-theme dürfte hier der richtige Weg sein, vorausgesetzt, Dein Popup ist ebenfalls ein ha-more-info-dialog, wovon ich einfach mal ausgehe. https://github.com/thomasloven/lovelace-card-mod/blob/master/README-themes.md kann man entnehmen, dass card-mod-more-info als Variable existiert.

Also, zuerst wie geplant card_mod installieren. Dann kommentierst Du # themes: !include_dir_merge_named themes in Deiner configuration.yaml ein - also entfernst die führende Raute samt Leerzeichen - und speicherst das. Dann, wenn Du Dich in dem Ordner befindest in der die configuration.yaml liegt, legst Du einen Ordner namens themes an. In diesen Ordner wechselst Du, darin legst Du eine Datei namens styles.yaml an, in diese schreibst Du folgenden Code:

styles:
  card-mod-theme: styles
  card-mod-more-info: |
    * {color:red;}

Datei speichern, dann HA neu starten - komplett neu starten, nicht nur neu laden.

Danach gehst Du in der Sidebar auf Deinen Benutzer und scrollst bis zu den Browsereinstellungen, dort sollte jetzt das Theme "styles" zur Verfügung stehen:


Das auswählen, auf das Dashboard wechseln und das Popup öffnen. Leuchtend rote Schrift, zumindest in der Titelleiste? Dann kann es ab der Stelle daran gehen die richtigen Anweisungen rauszufinden. Wenn Du in der styles.yaml etwas änderst musst Du nicht jedes Mal neustarten, da genügt der Weg über Entwicklerwerkzeuge => Aktionen => "Home Assistant Frontend: Themes neu laden" und "Aktion ausführen", kannst Du einmal testen indem Du z.B. von red auf green wechselst.

https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes könnte dabei noch hilfreich sein.