Hilfe! Dashboard UI style mit separater CSS datei und card-mod definieren

[Smartblau]

Hallo!
Wie erreiche ich die folgenden Ziele?

1. Das gesamte (zusätzliche) CSS vom Dashboard an einem zentralen Ort/Datei verwalten (NICHT in jeder einzelnen Karte)
2. CSS vom existierenden Theme überschreiben (minimalist desktop)
3. Dashboard mit sections verwenden
4. CSS verwenden und keinen Umweg über YAML

Card-mod ist installiert und funkioniert prinzipiell. Allerdings bei den meisten Karten (mushroom cards) nicht. Ja, ich habe das wrappen in mod-card versucht und verschiedenste selektoren ebenfalls. s.u.

Beispiele:

type: entities
title: Beispiel-Karte
entities:
  - entity: light.wohnzimmer
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.0);
      box-shadow: none;
    }

hier macht card-mod was es soll (ist aber irrelavant, weil ich die Karte in der Form nicht benutze)

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.tag_datum_de
    icon: mdi:calendar
  - type: entity
    entity: sensor.uhrzeit_de
    icon: mdi:clock
    use_entity_picture: false
layout_options:
  grid_columns: 2
  grid_rows: 2
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.0);
      box-shadow: none;
    }

funktioniert nicht. Anstelle von ha-card habe ich auch diverse andere Selektoren aus dem Dom mit o.g. Variante getestet:

mushroom-chip
mushroom-entity-chip
hui-card
.chip-container
.type-custom-mushroom-chips-card
ha-card.type-custom-mushroom-chips-card

Alternativ habe ich noch das wrappen in mod-card versucht:

type: custom:mod-card
card:
  type: custom:mushroom-chips-card
  chips:
    - type: entity
      entity: sensor.tag_datum_de
      icon: mdi:calendar
    - type: entity
      entity: sensor.uhrzeit_de
      icon: mdi:clock
      use_entity_picture: false
  layout_options:
    grid_columns: 2
    grid_rows: 2
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.0);
      box-shadow: none;
    }

funktioniert auch nicht. Die mushroom chip karten werden zwar korrekt angezeigt, aber das CSS nicht durch card-mod gestyled.

Der alten Trick mit !important im CSS brachte auch kein Erfolg. Geht das eigentlich überhaupt noch?

Ich bin am Verzweifeln. Gibt es wirklich keine einfache Möglichkeit das CSS von Home Assistant mit meinen o.g. Zielen zu beeinflussen, ohne sich einen abzubrechen?

So sieht die ganze Karte aus im Inspektor:

[totow]

Guck dir mal von HA die Theames an:

Home Assistant frontend

Hier findest du auch so ziemlich alles was du bei mushroom anpassen kannst:

GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 🍄

Edit:
allgemein kann man viel aus anderen Themes lernen, hier habe ich z.B. ein Cyberpunk theme gefunden was auch gleich card-mod sachen mit in dem theame hat:

flejz/hass-cyberpunk-2077-theme/blob/master/themes/cyberpunk-2077.yaml

ab Zeile 577
ich hoffe es hilft dir.

LG
Tobi

[Smartblau]

Dank Tobi, aber das ist nicht das was ich suche. Ich benötige ‘100% echtes’ CSS, das ich Selektoren wie z.B. bestimmten Klassen zuweisen kann. Und das in einer separaten CSS Datei, womit gleichnamige Selektoren im eigentlichen Theme ‘overruled’ werden. Eine separate Datei nicht nur, weil ich keine dutzenden einzelnen card-mod Einträge über das Dashboard edit UI verteilen möchte, sondern auch damit mein eigenes zusätzliches CSS nicht verloren geht, sollte das Theme ein Update über HACS erhalten.

Und ich würde gerne verstehen, warum card-mod bei manchen Selektoren greift, und bei manchen wiederrum nicht.

[totow]

@Smartblau

sollte das Theme ein Update über HACS erhalten.

wenn du dein eigenes Theme erstellst wir da nichts von HACS überschrieben.
Habe meine angepassten Themes auch in ein anderen Ordner abgespeichert.

Natürlich musst du aufpassen das die Themes innerhalb der Dateien nicht gleich heißen.

LG

@Smartblau

Ich benötige ‘100% echtes’ CSS, das ich Selektoren wie z.B. bestimmten Klassen zuweisen kann. Und das in einer separaten CSS Datei, womit gleichnamige Selektoren im eigentlichen Theme ‘overruled’ werden

Da kann ich dir dann leider nicht bei helfen.

[Smartblau]

Danke. Genau dieses Setup mit eigenem Theme möchte ich vermeiden. Ich hätte gerne, dass das Theme aus HACS seperat bleibt und stets mit updates versorgt wird. Dazu dann mein eigenes CSS in einer separaten Datei, dass nur minimal ins Theme eingreift. Das geht mit jedem CMS dass ich in 20+ Jahren genutzt habe. Ich kann mir nicht vorstellen, dass das mit HA wirklich so ein Krampf sein soll.

[Smartblau]

OK, kurzes Update. Separate CSS Datei einbinden
Das geht ja recht simpel über die ressourcen, wie ich festgestellt habe.
Allerdings scheint da so viel CSS in line geladen zu werden, dass es absolut unmöglich ist (zumindest für mich) zu sagen, welches CSS jetzt “das letzte Wort” hat. Hab alle möglichen Elemente versucht zu stylen, von body über div bis zu konkreten Klassen und ID – keine Chance. Ich leg das jetzt ad acta

[totow]

Du hast ja auch Probleme bei den chips.
Meine Mushroom Chips sehen so aus:

square: false
columns: 3
type: grid
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: action
        double_tap_action:
          action: none
        tap_action:
          action: assist
          start_listening: true
        hold_action:
          action: none
        icon: mdi:message-text
    alignment: start
    card_mod:
      style: |
        ha-card {
        --chip-box-shadow: none;
        --chip-spacing: 0px;
        --chip-background: none;
        --chip-font-size: 13px;
        --chip-font-face: verdana; 
        --chip-font-weight: 100;
        --chip-height: 25px;
        --chip-icon-size: 32px;
        border: none;
           }
  - type: custom:mushroom-chips-card
    chips:
      - type: weather
        entity: weather.home
        show_conditions: false
        show_temperature: true
    alignment: center
    card_mod:
      style: |
        ha-card {
        --chip-box-shadow: none;
        --chip-spacing: 0px;
        --chip-background: none;
        --chip-font-size: 13px;
        --chip-font-face: verdana; 
        --chip-font-weight: 100;
        --chip-height: 25px;
        --chip-icon-size: 32px;
        border: none;
           }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: '{{ states(''sensor.time'') }} | {{ states(''sensor.datum'') }} '
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
        --chip-box-shadow: none;
        --chip-spacing: 0px;
        --chip-background: none;
        --chip-font-size: 13px;
        --chip-font-face: verdana; 
        --chip-font-weight: 100;
        --chip-height: 25px;
        --chip-icon-size: 32px;
        border: none;
           }

vielleicht hilft dir das ja noch als Anhaltspunkt für die chips.

Edit:
werde jetzt aber mal versuchen mein cardmod kram in das theame von mir zu bekommen.

Edit2:
So ich habe jetzt das zu meinen Theme hinzugefügt:

  mush-chip-box-shadow: none
  mush-chip-spacing: 0px
  mush-chip-background: none
  mush-chip-font-size: 13px
  mush-chip-font-face: verdana
  mush-chip-font-weight: 100
  mush-chip-height: 25px
  mush-chip-icon-size: 32px

und konnte dafür das:

    card_mod:
      style: |
        ha-card {
        --chip-box-shadow: none;
        --chip-spacing: 0px;
        --chip-background: none;
        --chip-font-size: 13px;
        --chip-font-face: verdana; 
        --chip-font-weight: 100;
        --chip-height: 25px;
        --chip-icon-size: 32px;
        border: none;
           }

so oft raus nehmen das laut RAW editor mein Mobile Dashboard nur noch 4100 Zeilen code anstelle von 4900+ hat.
Und so wird das auch sofort Angezeigt und lädt nicht erst.

Danke @Smartblau das du mich auf die Idee gebracht hast.

LG

[Smartblau]

Das Problem besteht nicht nur bei den Chips. Ich kann mit CSS gar keinen Selektor ansprechen. Nur mit card mod und auch nur bei der ganz einfachen entity card konnte ich CSS beeinflussen bisher.
Irgendwo steckt da der Wurm drin

[totow]

Wenn ich dein Chip Card-mod segment mit meinen vergleiche fehlt bei dir immer das --chip-
ich hatte --chip-box-shadow: none; du hast box-shadow: none;

Edit:
Vielleicht hilft dir auch der Thread aus der englischsprachigen community bei mushroom + card-mod:

Mushroom Cards Card Mod Styling/Config Guide

Edit 2:

@totow

mein Mobile Dashboard nur noch 4100 Zeilen code anstelle von 4900+ hat.

muss mich korrigieren bin jetzt bei ~3860 also durch die kleine Anpassung im Theme (8 Zeilen) konnte ich über 1000 Zeilen Card-mod rausschmeißen.
Werde ich auch gleich nochmal für mein normales Dashboard nachholen.

LG

[SmartBuddy]

HA lässt sich in vielerlei Hinsicht leider nicht so bequem stylen wie man das von typischen CMS-Systemen wie Wordpress, Contao o.Ä. bekannt ist.
Grund dafür ist der vor allem der der Komponentenbasierte Aufbau. Insbesondere der sog. Shadow-Dom macht diesbezüglich viele Probleme weil du von Außerhalb des Shadow-Doms nicht einfach einen Selektor ansprechen und dein CSS dran hängen kannst.

Du bist beim Card-Mod schon genau richtig um das Styling bestmöglich zu beeinflussen, allerdings dürfte dich der Abschnitt DOM-Navigation in der Dokumentation vielleicht noch mal einen Schritt weiter bringen. Hier geht er auf die Selektorenstruktur ein, um Elemente innerhalb des Shadow-Doms anzusprechen.

Was die “globale” CSS-Datei betrifft: Ich nutze diese eigentlich nur um gewisse Variablen zu überschreiben und die Schrift-Fonts einzubetten. Alle “nativen” Karten haben einen Card-Mod Eintrag.
Bei mir ist die Button-Card viel im Einsatz. Diese Karte hat einen eigen Abschnitt für den Punkt Styling.

Der alten Trick mit !important im CSS brachte auch kein Erfolg. Geht das eigentlich überhaupt noch?

Klar!

[Smartblau]

Danke für deine Antwort. Auch wenn Sie nur meine Befürchtungen bestätigt.

Na hoffentlich bekommt beim Dev Team ein CSS styling dann bald auch etwas mehr Priorität auf der Roadmap, ähnlich wie die Sections. Die sind ja auch ein Schritt in die richtige Richtung von mehr Flexibilität UND Nutzerfreundlichkeit. Ich werde dann mal weiter basteln. Ziel ist gerade ein Dashboard spezifisch für ein Wallpanel zu bauen, dass langfristig einen möglichst geringen Pflegeaufwand hat. Dazu gehört für mich maßgeblich, maximal viel im UI zu verwalten und Styles nicht individuell für jede einzelne Karte anzulegen. Mal schauen… vielleicht bin ich ja bald so weit, um eine erste Version hier für Feedback zu posten. Danke schon mal!