Verschachtelung von 2 card_mod geht nicht, oder doch?

[Sven7311]

Hallo,

ich bin gerade beim Umstieg vom IO Broker auf HA und komme beim Dashboard designen nicht weiter. Ich hätte gerne eine farblich interlegte Titelzeile (Typ:heading), dann diverse andere mushroom cards und um das ganze dann einen farblichen Rahmen. Ich bekomme es aber entweder hin, dass die Titelzeite farbig hinterlegt ist oder dass alles einen Rahmen hat. Aber niemals beides gleichzeitig.
So soll der Rahmen aussehen:

So soll die farbige Titelzeile aussehen:

So sieht der Code dazu aus

square: false
type: grid
columns: 1
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: heading
            heading_style: title
            heading: Sven
            icon: mdi:desktop-classic
            badges:
              - type: entity
                show_state: true
                show_icon: true
                entity: cover.sven_rolladen_cover_0
                tap_action:
                  action: more-info
                color: state
                state_content: current_position
              - type: entity
                entity: binary_sensor.az_sven_terrassentur
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px 10px 10px 10px;
                  background-color: blue;
                }
          - type: custom:mushroom-light-card
            entity: light.az_sven
            name: Decke
          - type: custom:mushroom-light-card
            entity: light.hue_white_lamp_1
            name: Schreibtisch
            show_brightness_control: true
    card_mod:
      style: |
        ha-card {
          border-radius: 10px 10px 10px 10px;
          border: 3px dotted blue;
        }

Ich hoffe ihr könnt mir helfen.

Danke

Sven

[totow]

Darf ich fragen warum du

• eine grid card hast
  • wo eine vertical-stack-in-card drin ist
    • in der eine vertical-stack-in-card ist
      • und hier erst die Karten sind?

Also du möchtest es so in der art haben:

type: custom:vertical-stack-in-card
cards:
  - type: heading
    heading_style: title
    heading: Sven
    icon: mdi:desktop-classic
    badges:
      - type: entity
        show_state: true
        show_icon: true
        entity: cover.sven_rolladen_cover_0
        tap_action:
          action: more-info
        color: state
        state_content: current_position
      - type: entity
        entity: binary_sensor.az_sven_terrassentur
    card_mod:
      style:
        .: |
          ha-card {
            background-color: blue !important;
          }
  - type: custom:mushroom-light-card
    entity: light.az_sven
    name: Decke
  - type: custom:mushroom-light-card
    entity: light.hue_white_lamp_1
    name: Schreibtisch
    show_brightness_control: true
card_mod:
  style: |
    ha-card {
      border-radius: 10px 10px 10px 10px;
      border: 3px dotted blue;
    }

Was card_mod angeht kann ich nur empfehlen im Home Assistant Forum nachzugucken.
Dort gibt es eigentlich schon für jede Karte Lösungen, hier algemein alle Karten.

🔹 Card-mod - Add css styles to any lovelace card

oder auch hier für Mushroom:

Mushroom Cards Card Mod Styling/Config Guide

LG
Tobi

[Sven7311]

allo Tobi,

vielen Dank für deine Hilfe. Die Verschachtelung der Karten war ein wenig historisch bedingt . Ein Kollege hatte mir geraten es ggf. nochmals in einen eigenen Stack zu packen in der Hoffnung, dass dann der card_mod funktioniert.

Aber, … ich habe deinen Quelltext nun in eine neue Karte kopiert, aber es funktioniert bei mir trotzdem nicht . Ich bekomme wieder nur den gepunkteten Rahmen zu sehen. Die Überschrift ist bei mir nicht eingefärbt.
Hast du oder jemand anderes eine Idee waoran das liegen kann? Den Browser als Ursache kann ich eigentlich ausschließen, da es weder über den Edge geht, noch über die App noch über Chrome auf dem Handy.

Danke.

Sven

[Pfize]

Hab den Code von @totow bei mir mal getestet. Sieht aus wie auf dem Screenshot in Beitrag 2. Welche Version von Card Mod hast du den installiert? Version 3.5 wurde zurückgezogen. Falls diese bei dir noch drauf ist mach mal bitte downgrade auf 3.4.4.

[RobertoCravallo]

@Sven7311

Ich bekomme wieder nur den gepunkteten Rahmen zu sehen. Die Überschrift ist bei mir nicht eingefärbt.

Hat mich mal interessiert, bei mir auch nicht…

[RobertoCravallo]

@Pfize

Falls diese bei dir noch drauf ist mach mal bitte downgrade auf 3.4.4.

B I N G O!!! Jetzt geht es auch bei mir. Klasse Tipp!!! Wieso bekomme ich so etwas nie mit…

[Pfize]

Freut mich das ich helfen konnte. Hab auch vor ein paar Tagen mit Card Mod 3.5 und swiper card ein Problem gehabt. Ebenfalls wusste ich auch nichts darüber das diese Version zurückgezogen wurde. Dank diesem großartigen Forum hier wurde das Problem ebenfalls bei mir schnell gelöst.

[Sven7311]

@totow

type: custom:vertical-stack-in-card

Danke. Danke. Danke. Das war die Lösung.

Wenn sich jetzt auch noch meine Probleme mit der Swiper Card lösen, dann ist das Wochenende gerettet.

Klasse Forum hier.

Sven

[RobertoCravallo]

Oh Mann, habt Ihr mir jetzt wieder Arbeit gemacht… Habe mal angefangen die Optik umzustellen mit HEADING, etc.