2 Entitäten zusammenfassen und anpassen

[Poi]

Hallo Leute,
ich möchte gern zwei Entitäten auf einer Karte zusammenfassen und bekomme das nicht hin. Es sollte wie folgt aussehen:

Als Haupt-Entität soll der Sensor “Forecast” abgebildet werden. Der soll nur das Wetter von heute anzeigen. Genau daunter passend ein zweiter Sensor für die Aussentemperatur vor Ort “sensor.e3_vitocal_außentemperatur”.

Ich habe das mit einem Vertikal-Stapel schon realisiert. Schaut aber nicht so nett aus und nimmt auf dem Handy zuviel Platz weg.

Ich möchte das es am Ende so aussieht:

Das wäre so meine Vorstellung. Ich bekomme das so einfach nicht hin. Es gibt ja die Karte für mehrere Entitäten, die aber ist mir zu einfach und die gewünschten Informationen bzw. die Anzeige ist nicht so toll…

Danke für Tipps und Hilfe. Gruß!

[Bacardi]

type: custom:vertical-stack-in-card
cards:
  - show_current: true
    show_forecast: false
    type: weather-forecast
    entity: weather.forecast_zu_hause
    forecast_type: hourly
    card_mod:
      style: |
        ha-card {
          margin: 0 !important;
          padding: 10 !important;
          --ha-card-border-radius: 0px !important;
        }
  - type: entities
    entities:
      - entity: sensor.hwr_bewegungsmelder_temperature
        name: Temperatur HWR
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          margin-top: -45px !important;
          padding: 10 !important;
          --ha-card-border-radius: 0px !important;
        }

Was für eine Tricksereise … ob das dauherhaft stabil ist? Aber es geht

[Poi]

Hey, damit beschäftige ich mich in Kürze, bin gerade viel unterwegs.

Ich berichte was ich damit angestellt habe!

Danke erstmal und Gruß….

[Schwippser]

custom:stack-in-card

funktioniert bei mir super

[Poi]

Ich bekomme das nicht hin?!
Die untere Zeile ist einfach starr und bewegt sich nicht nach oben. Da passt was nicht.
Bei dir sieht es so aus wie ich das gern haben möchte…

[Poi]

Da aber kannst du nur entitäten untereinander auf einer Karte zusammenfassen. Aber irgendwie nicht richtig so wich ich das gern haben möchte.

[Bacardi]

Hm, mit bloßem Auge unsere beides Codes verglichen - sieht gleich aus aber bei mir funktioniert und bei Dir nicht. Ich bat ChatGPT um Verbesserung meines Codes. Er hat die Maßeinheit px hinzugefügt und oben etwas umgeordnet. Versuche mal - das mit dem px könnt ich mir schon vorstellen.

type: custom:vertical-stack-in-card
cards:
  - type: weather-forecast
    entity: weather.forecast_zu_hause
    show_current: true
    show_forecast: false
    forecast_type: hourly
    card_mod:
      style: |
        ha-card {
          margin: 0 !important;
          padding: 10px !important;
          --ha-card-border-radius: 0px !important;
        }

  - type: entities
    entities:
      - entity: sensor.hwr_bewegungsmelder_temperature
        name: Temperatur HWR
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          margin-top: -45px !important;
          padding: 10px !important;
          --ha-card-border-radius: 0px !important;
        }

[Poi]

Nää…
ich habe die Vermutung das diese style: Einträge bei mir überhaupt nichts bringen. Ist da evtl. grundsätzlich was am fehlen? Ich habe vor paar Monaten auch schonmal versucht Styles anzupassen was nicht funktioniert hat.

Ich kann an “style:” ändern was ich will, da rührt sich garnix…

Tx!

[EDIT]
→ ich habe es herausgefunden ←

HACKS " card-mod 3" hat gefehlt! Ich habe mich hin und her belesen und mir gedacht das es nur daran liegen kann…

Löppt! Danke Euch dafür.

Zusammenfassung

Ich habe eine Karte bei der sich die Fargen und Styles anpassen und ändern lassen.
Evt. kann man da was draus erkennen. Wenn ich hier etwas verändere dann passiert auch was.

Kann es sein das irgendwie der Parameter “style: | ha-card” nicht stimmt?!

type: custom:button-card
entity: switch.licht_gasse_switch_0
name: Button Card Test
show_state: false
variables:
  BewegungErkannt: |
    [[[ return states['switch.licht_gasse_switch_0'].state === 'on'; ]]]
styles:
  card:
    - background-color: |
        [[[ return variables.BewegungErkannt ? 'red' : 'inherit'; ]]]
  icon:
    - color: |
        [[[ return variables.BewegungErkannt ? 'white' : 'inherit'; ]]]
    - width: 50px
    - height: 50px
  name:
    - color: |
        [[[ return variables.BewegungErkannt ? 'white' : 'inherit'; ]]]
    - font-size: 20px
    - font-weight: bold
  grid:
    - grid-template-areas: "\"i\" \"n\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr auto

by HarryP: Zusammenführung Doppelpost (bitte “bearbeiten” Funktion nutzen)

[Bacardi]

@Poi

" card-mod 3" hat gefehlt

Kein Kommentar
Ich hätte natürlich auch erwähnen können, daß card_mod installiert werden muß vorher. Wichtig, es geht jetzt!
Ich würde solche “Frickellösungen” aber nur dezent einsetzen, hab immer im Hinterkopf, daß ggf. Updates enorme Anpassungsarbeiten nach sich ziehen können.
Viel Spaß

[Poi]

Jo, Danke!

Hier noch das fertige Design:

und der Code:

Zusammenfassung

type: custom:vertical-stack-in-card
cards:
  - show_current: true
    show_forecast: false
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: hourly
    card_mod:
      style: |
        ha-card {
          margin: 0 !important;
          padding: 10px !important;
          --ha-card-border-radius: 0px !important;
        }
  - type: entities
    entities:
      - entity: sensor.e3_vitocal_aussentemperatur
        name: Außenfühler
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          margin-top: -45px !important;
          margin-right: -3px !important;
          margin-left: 10px !important;
          padding: 10px !important;
          font-size: 20px;
          --ha-card-border-radius: 0px !important;
        }

[Schwippser]

Geht auch nebeneinander…

mode: horizontal

[Poi]

Neeee, das sieht nicht so schön aus…
Tx!