Uhrzeit auf jedem lovelace Reiter

[alexamend]

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

 

[blurrrr]

Wenn ich mich richtig erinnere, war das mal ein ziemliches Gehampel mit irgendwelchen "custom-cards"... vllt klappt es ja hiermit https://github.com/thomasloven/lovelace-card-mod und entsprechenden CSS-Anpassungen (sicher bin ich mir da aber nicht).

 

[Nival]

Das ist jetzt optisch nicht die reine Freude, aber mit den nativen Eigenschaften von HA wäre z.B. dieses möglich:



Dafür habe ich in der configuration.yaml einen neuen Sensor angelegt:

  - platform: time_date
    display_options:
      - 'time'

und den dann als "Plakette" verwendet:

Lässt sich bestimmt noch etwas schöner ausarbeiten, aber zumindest die Position stimmt so schonmal

 

[Jotty]

Hallo Nival,

mir reicht das völlig. Danke!

 

[alexamend]

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.

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.

 

[Nival]

entspricht aber nicht meinen Vorstellungen

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.

 

[alexamend]

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.

 

[alexamend]

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

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

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

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

Mit Passender Hintergrundfarbe

 

[R2B2-123]

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

• Core2024.5.3
• Supervisor2024.05.1
• Operating System12.2
• Frontend20240501.1

 

[Nival]

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;.

 

[R2B2-123]

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

 

[Nival]

Hast Du https://github.com/thomasloven/lovelace-card-mod installiert?

 

[R2B2-123]

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

 

[Nival]

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:

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.

 

[R2B2-123]

Krasser Typ Danke hat geklappt

 

[Nival]

Danke hat geklappt

Prima - zusätzlich kleine Anmerkung, wenn Du das nächste mal Code postest, dann bitte dieses hier beachten: https://forum.heimnetz.de/threads/hinweis-zum-thema-einfuegen-von-yaml-code-in-beitraegen.1019/