Schriftgröße ändern bei HA Kachelkarten (Card_mod3)

Dashboards
1

Hallo Leute,

Ich möchte die Schriftgröße bei einer Kachelkarte ändern.
Ich finde alle möglichen Anleitungen wie man Icons oder Kacheln einfärbt.
Wie man die größe der Kachel ändert habe ich herausgefunden, aber nicht wie die Schriftgröße verändert wird.

Hier mein beispielcode

type: entity
entity: binary_sensor.kontakt_wohnzimmer_fenster
state_color: true
icon: mdi:window-closed-variant
name: Fenster
card_mod:
  style: |
    :host {
       --card-secondary-font-size: 80px;
       --card-primary-font-size: 80px;
      }

Funktioniert natürlich nicht.
Kann mir jemand ein gedanklicher Schubs geben oder noch besser eine Anleitung?

Danke für Hilfe und Gruß

Jürgen

2

Hi Jürgen, du musst in diesem Fall direkt das value ansprechen. Dort kannst du dann die Schriftgröße in px oder % definieren. Prozentangabe sind meist besser, weil dann die Größe proportional zu Card angepasst wird (hat was mit Darstellung auf Handy, Tablet und PC zu tun).

type: entity
entity: binary_sensor.kontakt_wohnzimmer_fenster
state_color: true
icon: mdi:window-closed-variant
name: Fenster
card_mod:
  style: |
    :host {
       --card-secondary-font-size: 80px;
       --card-primary-font-size: 80px;
      }
    .value {
       font-size: 10px !important;
      }

image
image275×149 2.16 KB

1 „Gefällt mir“
3

Hi jayjojayson,

Danke für Antwort, also es funktioniert zum Teil:
Das Wort (in unserem Beispiel) „Getrennt“ kann ich vergrößern/kleinern.
Aber wie vergrößere ich jetzt zum Beispiel das Wort „Fenster“ ? Und Icon ?
Ich habe außerdem festgestellt das die Zeilen

 --card-secondary-font-size: 80px;
       --card-primary-font-size: 80px;

überhaupt keine Funktionen haben, man kann sie auch löschen, es ändert sich nichts ? Ich weiß das „important“ damit zu tun hat ?

Jetzt würde ich noch gerne das Wort „Getrennt“ weiter nach unten schieben. Ich habe in unserem Beispiel mal übertrieben und „Getrennt“ wird oben abgeschnitten:

type: entity
entity: binary_sensor.kontakt_wohnzimmer_fenster
state_color: true
icon: mdi:window-closed-variant
name: Fenster
card_mod:
  style: |
    :host {
       --card-secondary-font-size: 80px;
       --card-primary-font-size: 80px;
      }
    .value {
       font-size: 45px !important;
      }

Gibt es dafür eine Doku, die das bisschen ausführlich erklärt.
Ich möchte das ganze auch bischen verstehen, sonst muß ich ja noch 100mal nachfragen :grinning:

Danke und Gruß
Jürgen

4

Moin, nach der Icongröße hast du aber nicht gefragt. :wink:
Anbei der Code, damit kannst du jetzt alles verändern (Name, Icon und Value).
Eine allgemeine Anleitung gibt es nicht, ist halt Codesprache und wenn man weiß wie, dann kann man die Sachen einfach ansprechen. Das ist aber schwer zu erklären, ich kann HTML, PHP und CSS programmieren und weiß daher wo und wie schauen muss, um die richtigen Klassen im CSS anzusprechen. Über die Entwicklertools im Browser bekommt man sehr viel heraus, aber auch hier muss man wissen wie und wo geschaut werden muss.

type: entity
entity: binary_sensor.kontakt_wohnzimmer_fenster
state_color: true
icon: mdi:window-closed-variant
name: Fenster
card_mod:
  style: |
    .name {
       font-size: 10px !important;
      }
    .value {
       font-size: 10px !important;
      }
    .icon {
       --mdc-icon-size: 10px;
      }

image
image287×149 1.91 KB

2 „Gefällt mir“
5

Hi jayjojayson

Ja super :+1:, es klappt, mit dem kann ich schon mal viel anfangen. Vielen Dank dafür :+1:.
Mein Problem ist, ich kann überhaupt nicht programmieren, aber solche Beispiele helfen mir ungemein, Sachen herzuleiten.
Ich habe mir auch schon die Entwickler Tools im Browser angeschaut, aber da steige ich absolut nicht durch :worried:.

Jetzt wäre da noch die Sache mit „nachuntenschieben“ des " .value" aber ich würde das ganze mal als gelöst setzen.

Ich danke dir nochmals für die Geduld und Hilfe.

Gruß Jürgen

1 „Gefällt mir“
6

Ich habe dir mal noch ein paar Sachen hinzugefügt. Mit margin und padding kannst die gewünschten Objekt bewegen. Margin steht dabei für den Außenabstand und padding für den Innenabstand. Für den Abstand zu anderen Objekten nutzt man daher margin. Soll aber in einem Fenster etwas verschoben oder das Fenster größer gemacht werden, nutzt man padding. Da gibt es noch einige Dinge, die man auch beachten kann, z.B. float oder align, aber für den einfach Einstieg reicht das aus.

Angegeben werden können dann z.B. margin-top, margin-right, margin-bottom, margin-left, oder man fasst es zusammen und schreibt margin: 10 10 10 10;. Die vier Zahlen stehen dann ebenfalls wieder für top, right, bottom, left.

type: entity
entity: binary_sensor.23124ra7eo_android_auto
state_color: true
icon: mdi:window-closed-variant
name: Fenster
card_mod:
  style: |
    .name {
       font-size: 10px !important;
       margin-top: 10px;
      }
    .value {
       font-size: 10px !important;
       margin-left: 50px !important;
      }
    .icon {
       --mdc-icon-size: 10px;
       --paper-item-icon-color: red;
       margin-right: 50px;
      }

Hier die Seite hilft dir vielleicht, das ein oder andere besser zu verstehen. Dort kann man die Begriffe nachschlagen und auch testen. https://www.w3schools.com/css/

1 „Gefällt mir“
7

Hi jayjojayson

Und nochmals vielen Dank.
Damit habe ich alle Werkzeuge zusammen :+1:, die ich Aktuell brauche.
Jetzt bist mich erstmal los, für ne Weile :smiley:…(hoffe ich :stuck_out_tongue_winking_eye:)

Gruß Jürgen

8

Na sehr schön, dann viel Erfolg beim basteln. :slight_smile:
Kein Problem, stelle deine Fragen ruhig, dafür sind wir alle hier, um uns gegenseitig zu helfen. :slight_smile: