background-color in layout-cards?

[saffi]

Hallo Freunde,

bin gerade dabei mein Dashboard neu aufzusetzen.

Benutze dazu Layout-Cards wie auch mushroom-cards. Nun würde ich gern später den Hintergrund in Form von saisonalen themen ändern. Dazu sollte aber das Infoboard dafür bestmöglich erstellt sein. Also Lesbarkeit z.B.

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-title-card
    title: |-
      {% set time = now().hour %}
      {% if (time >= 18) %}
       Guten Abend!
      {% elif (time >= 11) %}
       Guten Tag!
      {% elif (time >= 5) %}
       Guten Morgen!
      {% else %}
       Hej!
      {% endif %}
    subtitle: |
      {{ states('sensor.mein_dashboard_datum') }}
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      margin: '-20px 0px -10px 0px;'
    cards:
      - type: custom:simple-weather-card
        entity: weather.forecast_home
        name: Aue - Bad Schlema
        card_mod: null
        style: |
          ha-card {
            box-shadow: none;
            background: none;
            --ha-card-border-width: 0;
          }
layout:
  margin: '-15px -10px 10px -10px;'

im ersten Mushroom-light card würde ich z.B. gern einen Hintergrund machen. Derzeit ist dieser transparent. Wenn nun der Hintergrund beispielsweise wie folg ist,



lässt sich der Text nicht mehr lesen.

Gibt es eine andere Möglichkeit dies zubewerkstelligen?

In diesem Beispiel würde es funktionieren, aber dann sind keine Hintergrundmotive mehr möglich.


Vielen Dank im Voraus.

 

[Nival]

Wenn Du die Karte direkt bearbeitest, unten auf Code-Editor gehst und dann dieses einträgst:

type: custom:mushroom-title-card
title: |-
  {% set time = now().hour %}
  {% if (time >= 18) %}
    Guten Abend!
  {% elif (time >= 11) %}
    Guten Tag!
  {% elif (time >= 5) %}
    Guten Morgen!
  {% else %}
    Hej!
  {% endif %}
subtitle: |
  {{ states('sensor.mein_dashboard_datum') }}
card_mod:
  style: |
    ha-card.header { background-color:rgba(0, 0, 0, 0.5); }
    ha-card.header h1 { color:#fff; }
    ha-card.header h2 { color:#fff; }

hättest Du z.B. einen halb transparenten, schwarzen Hintergrund, und beide Zeilen Text in weiss. Das h1 ist title, das h2 subtitle.

 

[saffi]

Hallo Nival,

vielen herzlichen Dank dafür. Das bringt mich ein Stück weiter.

saffi

 

[Nival]

Das bringt mich ein Stück weiter.

Ist allerdings auch nur für diese Karte, bei anderen muss man im Zweifel nochmal nachsehen, wie die CSS-Klassen lauten

In diesem Fall ist es so, dass ha-card ganz simpel überschrieben werden könnte, das hat keine explizite Zuweisung für background, aber .header hat eine (transparent), und deshalb muss man es dann auch genau so explizit angeben. Das ha-card.header bedeutet übersetzt "das Element ha-card mit der Klasse header", und das ist dann genau genug um es zu überschreiben, während ha-card alleine rausgefiltert würde, weil es weniger spezifisch ist / .header am Ende gewinnt.

Das nur zu den Grundlagen, bevor Du Dich wunderst, dass andere Karten mit den Angaben nicht überschrieben werden können.