Costum Button card - Gehts auch kleiner?

Dashboard/Cards/Frontend
1

Hallo mal wieder,

Weiß jemand wie ich das einigermaßen hinbekommen könnte? Kenn mich da leider noch nicht so aus.

Da es mit der Müll-Benachrichtigung nur so semi geklappt hat, wollt ich nun versuchen mir die entsprechende Karte bei Abholung immer anzeigen zu lassen. Klappt soweit auch alles, da aber immer nur 1 oder 2 Tonnen auf einmal abgeholt werden, wird die entsprechende Karte leider sehr groß angezeigt. Gibt es die Möglichkeit die entsprechend Karte auch kleiner anzeigen zu lassen? bzw. nur das Icon?

Mit Bildern wirds wohl etwas klarer werden was ich meine :slight_smile: :

So siehts in der Vorschau aus:
small

Wären die Icon immer so groß wärs perfekt.
Doch wenn z.b. Morgen der Müll (in dem Fall 2 Tonnen) abgeholt wird, werden natürlich nur zwei Karten angezeigt (was ja so gewollt ist). Allerdings werden die Karten dementsprechend vergrößerst dargestellt:

big

Gibt es die Möglichkeit das diese klein bleiben bzw. einfach nur ein kleine Icons angezeigt werden? Oder gibt es eine einfache Methode?

yamml:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.restmull
            state: Graue Tonne Morgen
        card:
          show_name: false
          show_icon: true
          type: custom:button-card
          color: grey
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          entity: sensor.restmull
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.papiermull
            state: Grüne Tonne Morgen
        card:
          show_name: false
          show_icon: true
          type: custom:button-card
          color: green
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          entity: sensor.papiermull
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.gelbersack
            state: Gelber Sack Morgen
        card:
          show_name: false
          show_icon: true
          type: custom:button-card
          color: yellow
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          entity: sensor.gelbersack
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.biomull
            state: Braune Tonne Morgen
        card:
          show_name: false
          show_icon: true
          type: custom:button-card
          color: brown
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          entity: sensor.biomull
2

Moin, spiel doch mal mit der Button Card und den Style Möglichkeiten herum. Hier ein erster ChatGPT erzeugter Code als Anfang.

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.restmull
            state: Graue Tonne Morgen
        card:
          type: custom:button-card
          show_name: false
          show_icon: true
          entity: sensor.restmull
          color: grey
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          styles:
            card:
              - width: 50px
              - height: 50px
              - padding: 5px
            icon:
              - width: 30px
              - height: 30px

      - type: conditional
        conditions:
          - condition: state
            entity: sensor.papiermull
            state: Grüne Tonne Morgen
        card:
          type: custom:button-card
          show_name: false
          show_icon: true
          entity: sensor.papiermull
          color: green
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          styles:
            card:
              - width: 50px
              - height: 50px
              - padding: 5px
            icon:
              - width: 30px
              - height: 30px

      - type: conditional
        conditions:
          - condition: state
            entity: sensor.gelbersack
            state: Gelber Sack Morgen
        card:
          type: custom:button-card
          show_name: false
          show_icon: true
          entity: sensor.gelbersack
          color: yellow
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          styles:
            card:
              - width: 50px
              - height: 50px
              - padding: 5px
            icon:
              - width: 30px
              - height: 30px

      - type: conditional
        conditions:
          - condition: state
            entity: sensor.biomull
            state: Braune Tonne Morgen
        card:
          type: custom:button-card
          show_name: false
          show_icon: true
          entity: sensor.biomull
          color: brown
          tap_action:
            action: navigate
            navigation_path: /lovelace/Mull
          styles:
            card:
              - width: 50px
              - height: 50px
              - padding: 5px
            icon:
              - width: 30px
              - height: 30px
3

Da ich echt noch viel zu neu bin…versteh auch nicht was ChatGPT damit zu tun hat :thinking:…aber perfekt. :+1: :+1: Genau so wollt ichs. Danke

4

Freue mich.

ChatGPT ist einfach nur ein neuartiges Werkzeug. Ich habe nur Deine Frage und Deine Code reinkopiert und heraus kam oberer Code. 1 min Aufwand. Ich gebe zu, daß es ganz selten beim ersten Mal gleich klappt. Normalerweise muß man mehr probieren und testen.