Brauche Hilfe beim Layouten und bei Farben

Dashboard/Cards/Frontend
1

Mein neues Dashboard soll diesmal etwas anders aussehen, als ich es bislang gewohnt bin und deswegen bastle ich derzeit etwas rum:

grafik
grafik1445×869 44 KB

Es werden 2-3 Abschnitte und man wird zu den Räumen immer nur das sehen, was aktuell auch wirklich aktiv oder informartiv ist. Also z.B., wenn der Trocker nicht läuft, dann wird diese Karte auch nicht zu sehen sein. Ist alles aber noch im “Werden”.

Ich schaffe es jedoch nicht, die einzelnen Räume von einander abzugrenzen. Entweder würde ich gerne die Headline-Karte, also z.B. in der “Wohnzimmer” steht, farblich zu hinterlegen oder/und dem kompletten Abschnitt eine leicht transparente Hintergrundfarbe zu geben. Weiß hier jemand Rat?

Vielen Dank!

2

Das kann man mit Card Mod machen.
Beispielcode:

card_mod:
  style: |
    ha-card {
      background-color: rgba(0, 0, 0, 0.5);
    }
3

Vielen Dank für deine Antwort!

Ich habe schon x verschiedene Wege versucht, aber mir fehlt irgendwie das Verständnis dafür und auch wenn ich deine Zeilen nehme, komme ich nicht dahin. Was mache ich falsch?

type: heading
heading: Wohnzimmer
heading_style: title
icon: mdi:sofa
layout_options:
  grid_columns: full
  grid_rows: 1
card_mod:
  style: |
    ha-card {
      background-color: rgba(5, 4, 200, 0.5);
      --primary-text-color: #4c4c4c;
      --secondary-text-color: #00c4c;
      --shape-color: #555555    
      
    }

Egal, was ich ausprobiere, der Hintergrund ändert sich nicht. :frowning:

4

Kann dir nicht direkt helfen, aber ich habe bei vergleichbaren Herausforderungen oft die Lösung mit Hilfe der Developer - Ansicht des Browsers gefunden:

element.style {
    background-color: orangered;
}

ändert die Hintergrundfarbe einer Überschrift.

Es könnte also sein, dass

card_mod:
  style: |
    element {
      background-color: orangered;
    }

funktioniert ?

5

Danke auch dir!
Aber wenn ich das Bisherige wie folgt ersetze, tut sich leider auch nichts:

type: heading
heading: Wohnzimmer
heading_style: title
icon: mdi:sofa
layout_options:
  grid_columns: full
  grid_rows: 1
card_mod:
  style: |
    element {
      background-color: orangered;
    }
6

Versuch es so

    card_mod:
      style:
        .: |
          .title {
7

Verstehe ich nicht nicht.

Meinst du so?:

card_mod:
  style:
    .: |
      .title {
        background-color: orangered;
    }

Hat leider keine Auswirkungen. Und so leider auch nicht (auch nicht auf die Schriftfarbe):

card_mod:
  style:
    .: |
      .title {
        background-color: rgba(5, 4, 200, 0.5);
        --primary-text-color: #4c4c4c;
        --secondary-text-color: #00c4c;
    }
8

probiere bitte:

card_mod:
  style: |
    element.style {
      background-color: orangered !IMPORTANT;
    }

Ich bin absoluter css - Laie und weiß nicht, wie und ob man den element.style mit card_mod beeinflussen kann und wie es korrekt referenziert werden muss.

Es funktioniert jedoch, wenn ich es in developer tools in Chrome eintrage…

9

Das sollte funktionieren

card_mod:
  style:
    .: |
      .title {
        background-color: rgba(5, 4, 200, 0.5);
      }

Hast du den Cache mal geleert?

10

Weiß auch nicht, wieso es erst nach 5x Neuladen eine Wirkung hat, aber nun sieht es wie folgt aus:
grafik

Der Text wurde hinterlegt, aber nicht das Feld der Überschrift.

Dies hier hat leider gar keinen Einfluss:

card_mod:
  style: |
    element.style {
      background-color: orangered !IMPORTANT;
    }
11

Wenn ich das alles richtig sehe sind es mushroom-cards … Oder?

12

Nach 5 maligem neu laden, wird der Cache praktisch überschrieben. Nach der Änderung immer den Browser Cache leeren und neu laden, dann klappt das beim erstenmal.
CSS ist zum designen von Elementen aber man muss für jedes Element, die Änderungen angeben und die Elemente müssen genau bezeichnet sein.

Meine Empfehlung währe, versuch es mal mit ChatGPT, erstellen einen Prompt mit genauen Angaben, was Du haben willst und poste deinen bisherigen Code, meistens kommt ne halbwegs brauchbare Antwort und den Rest schafft man dann selbst oder einfach erneut ChatGPT fragen.

14

Hmm, mal schauen. Ich hatte mit ChatGPT bei diesen UI-Fragen noch nie Glück, aber versuchen kann ich es einmal.

Ja, das sind Mushroom Cards. Aber auch im HA Forum, wo sich ein User sehr engagiert mit dem Styling auseinandergesetzt hat, finde ich zum Hintergrund keine Hilfe.

Update:
Puh, also ich bin erstmal durch mit diesem Thema. ChatGPT habe ich gelöchert, aber keines der Beispiele funktioniert bei mir. Der Code sieht korrekt aus, aber es hilft halt nicht.
Dann habe ich mich im Forum an allen diesen Karten ausprobiert:

grafik
grafik374×508 10.5 KB

Bei keiner dieser Karten bekomme ich erwartete Resultate. Mal kann ich die Farbe der Schrift verändern, aber dann halt nicht den Hintergrund. Dann geht es bei einer anderen Karte genau anders rum.

Dies ist ziemlich nervig. Ich überlege, ob noch irgendwas übrig geblieben ist, von irgendwelchen vorherigen Versuchen, wo etwas wie ein Theme oder eine andere Instanz die Änderungen überschreibt. Es ist ja nicht so, als würde ich nur in einem Browser unbefriedigende Ergebnisse sehen. Weder im Browser, noch in der App auf dem Handy sehe ich das erwartete Verhalten.

Wenn das bei euch klappt, scheint mein System irgendwo eine Macke zu haben. Aber leider habe ich kein “Live-System”, was irgendwo testweise nebenbei läuft und wo ich es mal frisch testen könnte.

Danke aber, für eure Gedanken.

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

15

Hast du eine Lösung gefunden?

Ich möchte die Überschrift-Karten auch gerne bearbeiten. Eventuell mit einer komplett hinterlegten Hintergrundfarbe, oder primär erstmal nur die Schriftart/-größe/-farbe.

Mir gefällt es nämlich nicht, dass die Überschrift untergeht gegenüber den Seperatoren aus den Bubble-Cards:
grafik

Kann mir jemand Helfen, wie ich die Überschriftkarte bearbeiten kann hinsichtlich Hintergrund und Schrift?

1 „Gefällt mir“
16

Hänge auch gerade genau da:
Anpassung Hintergrundfarbe der Überschrift.

Gibt es dafür eine Lösung mit dem Card-Mod?

17

Hi,

wie schaut es aus, wenn Du folgendes ausprobierst?

card_mod:
  style: |
    ha-card {
      background-color: FARBE/WERT !important;
    }

(Also ha-card, statt element.style, usw.)