Titel/Header in glance Card bearbeiten und background entfernen

Dashboards
1

Hallo, ich frage mal hier auch noch nach, vielleicht hat von euch einer eine Idee. Ich benötige für ein aktuelles Projekt eine glance Karte, kann aber den Titel nicht über card-mod bearbeiten. Über die Entwickler-Tools im Browser kann ich die Klasse card.header bearbeiten, aber ich komme nicht an die Verschachtelung heran. Könnt ihr mir da vielleicht helfen?

type: glance
title: test
entities:
  - sensor.total_power
  - sensor.total_power_nur_verbrauch
  - sensor.solar_einspeisung_ausgelesen_negativ
card_mod:
  style: |
    ha-card {
      box-shadow: none !important;
      border: none !important;
    }
    .card-header {
      font-size: 1.5em !important;
      font-weight: bold !important;
      color: var(--primary-color) !important;
      text-transform: uppercase; 
    }
2

Wenn das was ist was du bei Jeder Karte machst mach es lieber über ein Theme.

Hab bisschen herum getestet mithilfe dieses Beitrages:

type: glance
title: test
entities:
  - sensor.total_power
  - sensor.total_power_nur_verbrauch
  - sensor.solar_einspeisung_ausgelesen_negativ
card_mod:
  style: 
    $: |
      .card-header {
        font-size: 1.5em !important;
        font-weight: bold !important;
        color: var(--primary-color) !important;
        text-transform: uppercase; 
      }

grafik
grafik1138×425 19.5 KB

LG

1 „Gefällt mir“
3

Vielen lieben Dank totow für Testen und die Lösung. :slight_smile: Die Dashboards haben es mir ja voll angetan. Ich mache aktuell ein Dashboard für Mobile mit der auto-entities card. So dass man nur noch die Startseite konfiguriert und der Rest (nach Räumen) sortiert angezeigt wird. Bin da auch schon Recht weit. Ein Theme will ich eigentlich nicht verwenden, weil es ein zusätzlicher Schritt wäre. Das Dashboard soll dann von jeder Mann genutzt werden können, mit möglichst wenig Hürden am Anfang.

Ich habe dein Code jetzt mal ausprobiert und funktioniert. Deinen Link hatte ich gestern Nach schon angeschaut, war wohl zu spät. Es liegt wirklich an der Formatierung von $: | So richtig klar ist mir das noch nicht wann : | oder : > oder $: | verwendet wird.

Jetzt funktioniert die Einfärbung auf jeden Fall, aber dafür wird die Bedingung der ha-card nicht mehr übernommen. Muss mir das nochmal genauer anschauen.

type: glance
title: test
entities:
  - sensor.total_power
  - sensor.total_power_nur_verbrauch
  - sensor.solar_einspeisung_ausgelesen_negativ
card_mod:
  style:
    $: |
      ha-card {
        background: tranparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0px !important;
      } 
      .card-header {
        font-size: 1.5em !important;
        font-weight: bold !important;
        color: var(--primary-color) !important;
        text-transform: uppercase; 
      }
4

Du weißt das du Themes bei Dashboard hinterlegen kannst? → Es muss nicht vom User eingestellt werden.

grafik
grafik1179×719 45.2 KB

card-mod ist bei mir auch nur trial and error und in Foren suchen.
Habe bei meinem Dashboard viel von card-mod in ein Theme geschoben:

Davor hast du beim Laden immer gesehen wie es vom Standard zu den geänderten Werten gegangen ist, das Problem hab ich mit einem Theme nicht.

LG

5

Ja das weiß ich, nutze ja selber für mich ein angepasstes Theme. Aber der Endnutzer müsste das Theme dann erst bei sich über den File Editor oder sonst was in HA hochladen, bevor er es nutzen könnte.

Mit dem Laden ist mir auch schon aufgefallen, liegt wohl daran, dass Card Mod erst zum Schluss darüberläuft und das Theme gleich beim Aufruf der Seite geladen wird.

Ich werde mal schauen, erstmal mit Card-Mod… Später vielleicht noch ein passendes Theme dazu.

Grüße

6

Ich habe eine Möglichkeit gefunden, den Background zu entfernen. Man muss direkt über den DOM darauf zugreifen. Mal so mal so…

type: glance
title: test
entities:
  - sensor.total_power
  - sensor.total_power_nur_verbrauch
  - sensor.solar_einspeisung_ausgelesen_negativ
card_mod:
  style:
    $: |
      ha-card {
        background: tranparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0px !important;
      } 
      .card-header {
        font-size: 1.5em !important;
        font-weight: bold !important;
        color: var(--primary-color) !important;
        text-transform: uppercase; 
      }               
      :host(.type-glance) {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0px !important;
        outline: none !important;
        margin: 0 15px 0 15px !important;
      }