Dashboard Schriftgröße generell ändern möglich?

A

andi55

Member
Hallo,
ich finde die Standart Dashboard Schriftgröße zu klein und möchte diese generell etwas größer haben ohne ein größeres Display zu nutzen.
Mit lovelace-card-mod habe ich es bereits versucht und konnte die Schrift auch allen Karten nach meinen Wünschen anpassen, aber
- wenn ich das Dashboard öffne wird manchmal zuerst die normale Größe angezeigt und erst kurz danach oder erst nach einem "Refresh" erscheint die größere Schrift
- ein Update der "lovelace-card-mod" hat mir zuletzt das komplette Dashboard zerschossen und ich konnte es nur mit Mühe und nach laden eines älteren Backups wieder herstellen.
Irgendwo muss doch die Dashboard Schriftgröße eingestellt sein. Gibt es keine Möglichkeit diese generell zu ändern ohne in jeden einzelnen Karte jeden einzelnen Eintrag anpassen zu müssen?
 
andi55 schrieb:
Gibt es keine Möglichkeit diese generell zu ändern ohne in jeden einzelnen Karte jeden einzelnen Eintrag anpassen zu müssen?
Zum Vergrößern anklicken....
Ja doch, Du kannst es per Theme machen.

Zu Themes generell: https://www.home-assistant.io/integrations/frontend/
Datengrundlage: https://github.com/home-assistant/frontend/blob/master/src/resources/ha-style.ts

Ich habe da mal zwei häufig verwendete Dinge rausgesucht:
CSS: 
    --paper-font-body2: {
      @apply --paper-font-common-base;

      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
    };

    --paper-font-body1: {
      @apply --paper-font-common-base;

      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    };
Dort wird font-size verwendet und in Kombination damit sollte man auch immer line-height berücksichtigen. Das führt zu diesen Variablen:
paper-font-body1_-_font-size
paper-font-body1_-_line-height
paper-font-body2_-_font-size
paper-font-body2_-_line-height

Du siehst, immer erstmal das was mit zwei Bindestrichen oben steht (aber ohne diese Bindestriche mitzunehmen), dann _-_ und dann den zu editierenden Wert, das zusammen ergibt die notwendige Bezeichnung. Wenn wir das jetzt als Theme anlegen in der configuration.yaml, dann so:
YAML: 
frontend:
  themes:
    change_size:
      paper-font-body1_-_font-size: '20px'
      paper-font-body1_-_line-height: '26px'
      paper-font-body2_-_font-size: '20px'
      paper-font-body2_-_line-height: '30px'
Das frontend: solltest Du dort eigentlich schon stehen haben, dann nur den Bereich darunter einfügen. Die Angaben müssen zwingend in einzelnen Anführungsstrichen stehen.

Dann HA einmal neustarten (oder unter Entwicklerwerkzeuge => Dienste den Dienst "Home Assistant Frontend: Reload themes" / service: frontend.reload_themes ausführen), dann unter Deinem Profil das Thema change_size auswählen. Nach jeder Änderung muss das Theme natürlich neu geladen werden.

Es ist... sehr gruselig 😅 und welche Einstellungen genau zu treffen sind und welche Variablen noch aus der Datengrundlage entnommen und dann angepasst werden müssen überlasse ich Dir, aber das wäre wohl der Weg, wenn Du nicht die Kacheln einzeln anpassen möchtest. Unnötig zu erwähnen, dass es sich nicht NUR aufs Dashboard bezieht, aber das Theme kannst Du ja nach Belieben ein- und ausschalten.
 
Hallo Nival & Andy55,
wie kann ich das hier integrieren, damit alles in einer gewünschten Schriftgrösse ist, und mit dem
Wochentag (in Deutsch)?
Wochentag ist in englisch.png
Recht herzlichen Dank an alle!!!
Novell1
 
Nival schrieb:
Ja doch, Du kannst es per Theme machen.

Zu Themes generell: https://www.home-assistant.io/integrations/frontend/
Datengrundlage: https://github.com/home-assistant/frontend/blob/master/src/resources/ha-style.ts

Ich habe da mal zwei häufig verwendete Dinge rausgesucht:
CSS: 
    --paper-font-body2: {
      @apply --paper-font-common-base;

      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
    };

    --paper-font-body1: {
      @apply --paper-font-common-base;

      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    };
Dort wird font-size verwendet und in Kombination damit sollte man auch immer line-height berücksichtigen. Das führt zu diesen Variablen:
paper-font-body1_-_font-size
paper-font-body1_-_line-height
paper-font-body2_-_font-size
paper-font-body2_-_line-height

Du siehst, immer erstmal das was mit zwei Bindestrichen oben steht (aber ohne diese Bindestriche mitzunehmen), dann _-_ und dann den zu editierenden Wert, das zusammen ergibt die notwendige Bezeichnung. Wenn wir das jetzt als Theme anlegen in der configuration.yaml, dann so:
YAML: 
frontend:
  themes:
    change_size:
      paper-font-body1_-_font-size: '20px'
      paper-font-body1_-_line-height: '26px'
      paper-font-body2_-_font-size: '20px'
      paper-font-body2_-_line-height: '30px'
Das frontend: solltest Du dort eigentlich schon stehen haben, dann nur den Bereich darunter einfügen. Die Angaben müssen zwingend in einzelnen Anführungsstrichen stehen.

Dann HA einmal neustarten (oder unter Entwicklerwerkzeuge => Dienste den Dienst "Home Assistant Frontend: Reload themes" / service: frontend.reload_themes ausführen), dann unter Deinem Profil das Thema change_size auswählen. Nach jeder Änderung muss das Theme natürlich neu geladen werden.

Es ist... sehr gruselig 😅 und welche Einstellungen genau zu treffen sind und welche Variablen noch aus der Datengrundlage entnommen und dann angepasst werden müssen überlasse ich Dir, aber das wäre wohl der Weg, wenn Du nicht die Kacheln einzeln anpassen möchtest. Unnötig zu erwähnen, dass es sich nicht NUR aufs Dashboard bezieht, aber das Theme kannst Du ja nach Belieben ein- und ausschalten.
Zum Vergrößern anklicken....
Hallo,
Wochenende :), hab mich mal vorsichtig drangetraut.
Aktuell will ich es erstmal mit Fettschrift versuchen, evtl. reicht das schon. Hier mein aktueller Code

Code: 
frontend:
  themes:
    change_size:
      paper-font-body1_-_font-weight: 'bold'
      paper-font-body2_-_font-weight: 'bold'
      paper-font-body3_-_font-weight: 'bold'
      modes:
        dark:
          secondary-text-color: slategray

Einzelne Karten vom Dashboard ändern sich, andere daneben wiederum nicht.
Was hat es genau mit dem "paper-font-body" auf sich?
Bezieht sich das auf einzelnen Karten oder Bereiche und wie finde ich heraus welche Karte/Bereiche welche "Body Nr" haben?
Auch verliere ich mit der Umschaltung scheinbar die Möglichkeit des Dark Mode, da muß ich aber später nochmal nachsehen.

Danke schonmal und viele Grüße
 
Zuletzt bearbeitet:
andi55 schrieb:
wie finde ich heraus welche Karte/Bereiche welche "Body Nr" haben?
Zum Vergrößern anklicken....
Es läuft nicht alles über die Nummern. Herausfinden kannst Du das ggf., indem Du über den Quellcode gehst. Ein Beispiel anhand eines Elements, der von Deinen Angaben nicht erfasst wird:
1716715524335.png
Hier basierend auf Firefox, zuerst Rechtsklick auf die Seite und dann "Untersuchen" auswählen.
Dann (wenn nicht bereits aktiv) Klick auf Inspektor (1), dann auf den Zeiger (2), damit das gewünschte Element auswählen (3), im Quellcode schauen dass man auch wirklich an der richtigen Stelle ist (4), den gewünschten Wert filtern (5) und dann relativ schnell auf die Variable treffen, die den Wert definiert (6).

In diesem Fall ist die Variable zwar vorhanden, aber nicht gesetzt, wie einem der Tooltip verrät:
1716715681103.png
Davon wieder die beiden Bindestriche davor entfernen, die Variable setzen: ha-label-badge-title-font-weight: 'bold'

Service neu laden, und schon gilt der Wert:
1716715801672.png

Hin und wieder muss man ggf. im Quellcode noch etwas vor oder zurück springen, z.B. wenn es zu detailliert ist als dass etwas gesetzt wäre oder eben noch nicht detailliert genug / ein Element innerhalb der Auswahl nochmal einen eigenen Wert bekommt, aber so funktioniert das im Prinzip.
 
Hallo,
ich bin etwas weitergekommen. Das ich eine Karte nicht ändern konte lag daran das in der Karte selbst die Texgröße angegeben war, das überschreibt dann wohl die globale Einstellung.
Mein derzeitiges Setup ist
Code: 
frontend:
  themes:
    change_size:
      paper-font-body1_-_font-size: '18px'
      paper-font-body1_-_line-height: '24px'
      modes:
        dark:
          secondary-text-color: slategray
Ich habe also lediglich die Schriftgröße um +2px geändert und den Dark Mode aktiviert.

Derzeit hänge ich an meiner speziellen "Alarmkarte" (ich glaube da hatten wir schonmal geschrieben).
Ich finde leider nichts über die Schriftgröße, wird das hier evtl. über die Textfeldgröße skaliert? Auch kann ich nicht nach dem Wert "weight" filtern, das Filtersymbol ist ausgegraut. Browser ist FF allerdings für Linux Mint. Hier ein Screenshot vom Quellcode, evtl. fällt die ja was auf.Code_01.png
 
andi55 schrieb:
Ich finde leider nichts über die Schriftgröße, wird das hier evtl. über die Textfeldgröße skaliert? Auch kann ich nicht nach dem Wert "weight" filtern, das Filtersymbol ist ausgegraut.
Zum Vergrößern anklicken....
So grau sieht das eigentlich immer aus, nutzbar ist es normal trotzdem. In diesem Fall muss man aber tiefer rein:
1717324343758.png
und sieht dort, dass die Klassen primary und secondary leider explizit zugewiesene Werte haben, keine Variablen. Klassen zu überschreiben ist mit Themes meines Wissens nach nicht möglich, dort müsstest Du dann wohl über card_mod gehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Zurzeit aktive Besucher

Gesamt: 99 (Mitglieder: 4, Gäste: 95)

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
5.458
Beiträge
53.934
Mitglieder
5.261
Neuestes Mitglied
Heinz

Teilen

Zurück
Oben