Uhrzeit auf jedem lovelace Reiter

alexamend

Active member
Hallo Zusammen,

ich bin auf der Suche nach einer Möglichkeit die Uhrzeit auf jedem lovelace Reiter immer ober mittig anzuzeigen. Gibt es hierfür einen Platzhalter?
hier als Bsp. wie ich dies mir vorstelle. der Rot Markierte Bereich soll für die Uhrzeit verwendet werden, habe bisher keine Möglichkeit gefunden diese über die gesamte Breite zu definieren
- Bitte nicht die Temperaturen beachten... der Kachelofen war zu diesem Zeitpunkt an :cool:

Screenshot 2022-09-28 142554.png
 
Das ist jetzt optisch nicht die reine Freude, aber mit den nativen Eigenschaften von HA wäre z.B. dieses möglich:
1664439736202.png


Dafür habe ich in der configuration.yaml einen neuen Sensor angelegt:
YAML:
  - platform: time_date
    display_options:
      - 'time'
und den dann als "Plakette" verwendet:
1664440110927.png
Lässt sich bestimmt noch etwas schöner ausarbeiten, aber zumindest die Position stimmt so schonmal :)
 
Das ist jetzt optisch nicht die reine Freude, aber mit den nativen Eigenschaften von HA wäre z.B. dieses möglich:
Anhang anzeigen 1611

Danke für die Info, das hatte ich bereits schon im Einsatz, entspricht aber nicht meinen Vorstellungen -SORRY- hatte ich leider nicht erwähnt.

Habe jetzt etwas gefunden das mir zusagen würde, leider scheitere ich an der Einrichtung.
Screenshot_20220929_183915.jpg

YAML:
type: custom:compact-custom-header
  main_config: true
  clock_date: true
  menu: overflow
  notifications: clock
  options: show
view:

Soll angeblich in die ui.yaml ganz oben rein noch vor view:

Die zugehörige custom habe ich auch installiert

Custom header
Entweder hat sichvam core soviel geändert das die Konfig anders aussehen muss, oder die Integration wird nicht mehr unterstützt.
 
Also geht es Dir rein um die Optik, verstehe ich das richtig?

Zeigst Du das in nem Browser an? Dann könnte man eventuell (nicht getestet) mittels Browserplugin zielführend darauf einwirken. Also zusätzliches CSS draufwerfen.
Optik ist zwar auch sehr wichtig, aktueller überwiegt erstmal die Funktion,
Zeige es auf allen (Ausnahme Echo Show) in der App an, je nach Gerät im FullyKiosk oder Standard. CSS hatte ich bereits auch schon ins Auge gefasst, bin da (etwas) eigen, dies sind meines Erachtens nach Funktion die out of the Box Funktionieren sollten (meine Ansicht)
Wir reden hier nicht von einer Sonder Integration die ein eher seltenes Gerät einbinden soll, es geht um die Anzeige von Zeit und Datum.
 
Konnte mitlerweile das Problem lösen.

hierzu muss über HJACS -> Header Cards Installiert werden

danach dies ganz am Anfang im RAW noch vor views: definiert werden

YAML:
header_cards:
  cards:
    - type: markdown
      content: |
        {{ states("sensor.time") }} Uhr
title: AmendHome
views:

Screenshot 2022-11-17 105039.png

EDIT: Mit einstellbarer Hintergrundfarbe damit diese zur Tab Leisten Farbe passt

YAML:
header_cards:
  cards:
    - type: markdown
      style: |
        ha-card {
        background: rgba(16,30,36,255);
        }
      content: |
        {{ states("sensor.time") }} Uhr
views:

Mit Passender Hintergrundfarbe

Screenshot 2022-11-17 111949.png
 
Zuletzt bearbeitet:
EDIT: Mit einstellbarer Hintergrundfarbe damit diese zur Tab Leisten Farbe passt

YAML:
header_cards:
cards:
- type: markdown
style: |
ha-card {
background: rgba(16,30,36,255);
}
content: |
{{ states("sensor.time") }} Uhr
views:

Mit Passender Hintergrundfarbe
@alexamend ist zwar schon Uralt dein Beitrag aber genau das ist das was ich suche :)

Irgendwie scheint es bei mir aber nicht zu klappen mit deinem Snip

1715928268177.png

  • Core2024.5.3
  • Supervisor2024.05.1
  • Operating System12.2
  • Frontend20240501.1
 
Irgendwie scheint es bei mir aber nicht zu klappen mit deinem Snip
Wenn Du den 4. Wert von rgba von 255 auf 0 setzt hast Du vollständige Transparenz und musst garkeine Farbe angeben.

Es gibt allerdings auch Browser die ein wenig sensibel auf background reagieren (vergleiche background vs. background-color), versuchs ggf. noch so: background-color: rgba(0,0,0,0); oder direkt so: background-color: transparent;.
 
Anscheinend klappt das nicht so richtig.

habe nun folgende Sachen ausprobiert:

background-color: rgba(0,0,0,0);
background-color: transparent;
background: transparent;
background: rgba(16,30,36,0);

habe
Chrome 123.0.6312.58
Fireforx 126.0

achso und cache hab ich mal gelöscht

1715932442558.png
 
Ja habe es installiert.

Der Code stimmt überein.

header_cards:
cards:
- type: markdown
style: |
ha-card {
background-color: transparent;
}
content: |
{{ states("sensor.time") }} Uhr
views:
- path: default_view
title: Home
cards:
- type: vertical-stack
 

Anhänge

  • 1715933384412.png
    1715933384412.png
    29,7 KB · Aufrufe: 3
  • 1715933416115.png
    1715933416115.png
    20,3 KB · Aufrufe: 3
Hmhmm. Ich meine mich zu erinnern, da gabs neulich mal ne Änderung bei card_mod und Dinge die vorher akzeptiert wurden machen nun Schwierigkeiten... versuchs nochmal so:
YAML:
header_cards:
  cards:
    - type: markdown
      card_mod:
        style: |
          ha-card {
          background-color: transparent;
          }
Also card_mod: ergänzen und die Einrückungen darunter entsprechend anpassen.
 

Zurzeit aktive Besucher

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
4.703
Beiträge
47.960
Mitglieder
4.350
Neuestes Mitglied
FreundderSonne
Zurück
Oben