Verschiedene Designanpassungen

hallo,

ich versuche innerhalb eines vertikal stack in card die breite der einzelnen karten zu verändern.

zur veranschaulichung hier mal ein beispiel:

wie man sich vielleicht denken kann, finde ich diese aufteilung nicht optimal. es sollen die 2x power flow card plus am breitesten sein, dann die modern cicular gauge cards (vor allem auch nicht so weit nach unten ragen) und dann am schmalsten die entitäten.

leider kann ich nur die breite der gesamten karte im layout bestimmen (bei mir 33), was zur folge hat, das die darin befindlichen karten zu gleichen teilen geviertelt werden. kann man das umgehen oder ändern? die grid options können hier leider nicht pro stack angewendet werden.

zum anderen würe ich gern logo und schriftgröße der überschrift verändern. dies funktioniert leider nicht. in entitäten oder cards funktioniert das bestens per card-mod, bei den überschriften funktioniert das leider nicht. hat hierfür jemand eine lösung? ich habe schon gelesen, das dies auch über die button-card realisierbar wäre.

den code der gesamten karte kann ich leider nicht teilen, da ich am tablet sitze und dies hier leider nicht möglich ist. könnte ich somit erst am dienstag abend nachreichen.

Hi, du kannst innerhalb deines vertical stacks eine custom-layout-card verwenden und so die breiten der einzelnen Cards definieren:

type: vertical-stack
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        grid-template-columns: 30% 30% 20% 20%
        grid-template-rows: auto
        mediaquery:
          "(max-width: 1000px)":
            grid-template-columns: 100%
            grid-template-rows: auto
      cards:
        - hier deine erste card
        - zweite card usw..

Überschriften sind leider sehr beschränkt vom styling, da ist es besser wie du gelesen hast mit einer custom-button-card zu arbeiten.

1 „Gefällt mir“

ui das werde ich direkt mal ausprobieren :+1:

hab mal was probiert

image

type: custom:button-card
name: Wetter
icon: mdi:weather-partly-rainy
size: 2rem
layout: icon_name
tap_action:
  action: none
card_mod:
  style: |
    ha-card {                       
      background: transparent;
    }
grid_options:
  columns: 3
  rows: 1

das könnte ich doch so als überschrift nehmen, oder? jetzt noch in die bestehenden stacks einbauen und gucken obs passt.

1 „Gefällt mir“

Hi, ja genau die button card kannst du so dafür verwenden, einfach den Hintergrund ausblenden, eventuell noch das Icon wenn gewünscht und dann hast du eine gute Überschrift, die du über card_mod stylen kannst.

1 „Gefällt mir“