HTML und CSS im Dashboard nutzen

Dashboards
1

Hallo Zusammen,

Ich komme ja vom ioBroker und dort habe ich in der VIS die Möglichkeit eigenen CSS-Code einzufügen
Diesen kann ich dann auch im Dashboard in HTML anwenden

z.B.

<div class="table-car-ueberschrift">Ölservice</div>

Gibt es eine Möglichkeit soetwas auch in HA umzusetzten?

Ich habe jetzt schon die " TailwindCSS Template Card" ausprobiert

Das mit dem HTML funktioniert da auch ganz gut aber das CSS wird nicht übernommen

Die CSS habe ich als Datei im Ordner „config/www“ abgelegt und als Ressource angelegt

Hat jemand eine Idee?

Danke im Voraus
Gruß
Marcel

2

Moin, dein Vorhaben ist so nicht ganz umsetzbar. Du kannst mit HTML in Home Assistant arbeiten, aber es gibt nur ganz wenig Möglichkeiten. Die Beste Wahl wäre wohl die Markdown-Card, die kommt schon mit HA, also keine extra Installatiion notwendig.

type: markdown
content: |
  <div style="font-size: 20px; font-weight: bold; color: orange; text-align: center;">
    Ölservice
  </div>

Dort kannst du HTML verarbeiten und inline css nutzen. Eine direkte Verknüpfung einer css Datei ist aber nicht möglich.

Ansonsten wäre auch noch die Methode über Card_Mod eine Variante. Damit kann man bei sehr vielen Cards in HA das Styling beeinflussen.

card_mod:
  style: |
    ha-card {
      font-size: 20px;
      font-weight: bold;
      color: orange;
      text-align: center;
    }

Ein Hinterlegen der css als Ressource ist jeden Falls nicht so möglich. Hatte mal einen aktiven Hintergrund für mein Tablet gemacht und da habe ich mir einen abgebrochen mit dem CSS. Wenn du magst, kannst du dir das hier anschauen:
https://github.com/jayjojayson/HA_homedashboard?tab=readme-ov-file#-particles-background

1 „Gefällt mir“
3

@jayjojayson
Danke für deine schnelle Antwort
Das mit dem Inline-CSS in Markdown habe ich auch schon probiert
und Ja das geht auch

Aber der nachteil ist das ich das dann in jeder Karte machen muss
Das selbe ist doch aber auch bei Card-Mod der fall oder kann ich da irgendwie eine zentralle Einstellung hinterlegen

Das werde ich mir auf jeden Fall auch mal ansehen

Gruß
Marcel

4

Korrekt, card-mod ist ein mächtiges, vielfältiges Werkzeug, welches schon viele von meinen Wünschen erfüllt hat.
Eine ‚zentrale Einstellung‘ ist mir auch nicht bekannt, aber ich freue mich immer, wenn ich etwas in HA zu tun habe.
Ich habe auch nicht hunderte Karten, bei denen es dann in ‚Arbeit‘ ausarten würde.

1 „Gefällt mir“
5

hat zufällig jemand die Einstellungen für Card-Mod wenn ich eine Tabelle in der Markdown-Card design möchte

Danke im Voraus
Gruß
Marcel