custom: button-card

[Sven1973]

Tom Bombadil
ich habe mir mal dein Plädoyer für die "custom: button-card" hier genauer angesehen.
Die Fexibilität ist schon beachtlich. Für mich ist die Anpassung der Größe bspw. wichtig. Mein Tablet in der Want hat eine Auflösung von 1920x1080 also FullHD.
Ich versuch meinen View genau darauf anzupassen und hatte bisher keine Möglichkeit gefunden, eine Größe für eine View zu definieren.

Ich habe nun testhalber eine neue "Seite" angelegt. (ein wenig deinem Bsp. folgend)
Allerdings habe ich nun oben und unten eine Rand und keine Ahnung wie ich den wegbekommen kann...

type: custom:button-card
cards: []
path: test
subview: true
card_mod:
  style: |
    ha-card {
      background-color: rgba(0,0,0,0);
title: TEST
background:
  opacity: 100
  alignment: center
  size: cover
  repeat: no-repeat
  attachment: fixed
  image: /api/image/serve/107cc982e66cfb200344a30417e21fd2/original
name: ""
styles:
  grid:
    - gap: 10px 10px
    - grid-template-areas: |
        "Faylinn Finnlay Karl"
        "BadOG Oskar Billard"
    - grid-template-rows: 1fr 1fr
    - grid-template-columns: 1fr 1fr 1fr
    - width: 1630px
    - height: 1080px
  custom_fields:
    Faylinn:
      - background: blue
      - height: 540px
      - width: 533px
      - border-radius: 5px
      - border: 0.1px outset black
      - box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66)
    Finnlay:
      - background: blue
      - height: 540px
      - width: 533px
      - border-radius: 5px
      - border: 0.1px outset black
      - box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66)
    Karl:
      - background: blue
      - height: 540px
      - width: 533px
      - border-radius: 5px
      - border: 0.1px outset black
      - box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66)
    BadOG:
      - background: blue
      - height: 540px
      - width: 533px
      - border-radius: 5px
      - border: 0.1px outset black
      - box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66)
    Oskar:
      - background: blue
      - height: 540px
      - width: 533px
      - border-radius: 5px
      - border: 0.1px outset black
      - box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66)
    Billard:
      - background: blue
      - height: 540px
      - width: 533px
      - border-radius: 5px
      - border: 0.1px outset black
      - box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66)
custom_fields:
  Faylinn: .
  Finnlay: .
  Karl: .
  BadOG: .
  Oskar: .
  Billard: .​

grafik.png

[Tom Bombadil]

Aus der Ferne schwer zu sagen - vermutlich ist es der Typ, den Du für das Dashboard eingestellt hast. Evtl beim Grid mit negativem margin-top arbeiten.

'Pro Tip' zu den Karten selbst: Wenn die alle das grundlegend gleiche Layout haben sollen, beschäftige Dich mal mit "button_card_templates". Alternativ funktionieren hier auch 'Anker' (YAML-Feature, '<<') oder auto-entities (diese beiden sind sogar einfacher zu verwalten als Templates, da sie im gleichen YAML stehen). In allen 3 Fällen musst Du dann den Code für alle Karten nur einmal schreiben. Es gibt ein paar schöne (und sehr beeindruckende) Beispiele dafür in diesem langen Fred, einfach mal durchscrollen.

Viel Erfolg!

/tom

p.s. / edit: Hier mal eine Beschreibung von petro, wie man sich wiederholende Elemente zB mit Ankern abbildet..