Dashboard Transparenz und Schriftfarbe

Dashboard/Cards/Frontend
1

Hallo zusammen,

ich bin gerade dabei mir ein neues Dashboard zu erstellen und stoße hier auf “mehrere” Hindernisse:

  1. Mit Card-Mod habe ich bereits eine volle Transparenz bei meinen Karten hinbekommen, jedoch hätte ich gerne eine Transparenz von ca. 70%. Hier habe ich z.B. mal ein Bild von bimboo009 hier aus dem Forum:

image
image1920×1023 81.6 KB

Wie bekomme ich sowas hin?

  1. Meine Schriftart ist leider schwarz. Ich kann das ganze zwar über das allgemeine Theme/Dark-Mode von HA lösen, würde das aber gerne auf das Dashboard beschränken. Das ist der aktuelle Zustand beim Light-Mode:

image

Lässt sich das auch mit Card-Mod umsetzen, und wenn ja, wie?

Mein aktueller Code sieht wie folgt aus:

type: vertical-stack
cards:
  - type: custom:weather-card
    entity: weather.forecast_home
    forecast: false
    details: true
    card_mod:
      style: |
        ha-card {
           color: red;
           background: transparent;
           border-style: none;
          }
  - show_current: false
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    card_mod:
      style: |
        ha-card
          {background: transparent;
           border-style: none;
          }

Vielen Dank schon einmal!

LG
fl0wing

2

In der Forensuche nichts gefunden (das Thema haben wir hier ständig)?

3

Da die Karte auf CSS basiert, hier die übersicht über die meisten CSS Modifikationen:

4

Falls du nach der Überschrift gegangen bist, dann sorry. “Iconfarbe nach Zustand” ist nicht Thema dieses Beitrags und das bekomme ich noch hin, ich weiß nicht warum sich diese Überschrift automatisch gezogen wurde. Hier geht es um verschiedene Transparenzstufen und Schriftfarbe. Zum Thema Schriftfarbe gibt es viele Einträge, leider war keiner Lösung für mich dabei…

5

Bin/war ich. :grinning:

Jetzt stimmt die Überschrift aber! :wink:

1 „Gefällt mir“
6

In CSS ist es i.d.R. opacity: statt transparent:

7

Schau mal hier:

Vielleicht ist da was hilfreiches zur Textfarbe dabei. Der Poster hat viele nützliche Tipps zu Card Mod:

8

Danke für eure Hilfe!
Opacity hat zwar funktioniert, nur wird dabei leider die gesamte Karte inkl. Inhalt transparenter, was zu Folge hat, dass man Symbole und Schrift schlechter erkennt.

Ich habe dann den Umweg gewählt und mir eine png mit einer halbtransparenten Farbe und diese als background für die Karten genommen.

Die Schriftfarbe habe ich dank eurer Typs dann auch mit CSS umgesetzt bekommen.

Hier nun noch mein Code, falls jemand die gleichen Probleme hat und dies dann anpassen will :slight_smile:

type: vertical-stack
cards:
  - type: custom:weather-card
    entity: weather.forecast_home
    forecast: false
    details: true
    card_mod:
      style: |
        ha-card
          {background: url("/local/picture/background/transparent2.png");
           border-style: grey;
           --primary-text-color: white;
           --secondary-text-color: grey;
          }
  - show_current: false
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    card_mod:
      style: |
        ha-card
          {background: url("/local/picture/background/transparent2.png");
           border-style: grey;
           text-color: red;
           --primary-text-color: white;
           --secondary-text-color: #A0A0A0;           
           }

LG
fl0wing

9

@fl0wing wenn du die Krücke mit dem transparenten PNG umgehen willst, sollte es mit card_mod so gehen:


ha-card {
  background: rgba(255, 120, 120, 0.5);
}

Die ersten 3 Zahlen sind die RGB-Werte der gewünschten Farbe, die letzte der Alpha-Wert. 0 = 0% nicht sichtbar (voll transparent), 0.5 = 50% halbtransparent, 1 = 100% volldeckend, keine Transparenz. Usw.

1 „Gefällt mir“
10

Stand in meinem link oben schon alles drin :person_shrugging:

2 „Gefällt mir“
11

@metallmanu jau stimmt. Sogar bestens erklärt. Hatte ich übersehen. Hätte ich mir dann ja auch sparen können.

12

Ich hatte heute Mittag bereits diese Lösung von Metallmanu ausprobiert und mir hatte es dann die gesamte Karte inkl. der Wettersymbole transparent gemacht… als ich es jetzt noch einmal versucht habe, funktioniert es super. Danke euch beiden! :slight_smile:

2 „Gefällt mir“