Custom:Buttom-Card

Allgemein
1

Hallo ich habe ein Custom:Button-Card gemacht nun will ich aber die Schrift nach oben setzten neben das Icon. Ich poste mal den Code weil ich irgendwie auf dem Schlauch stehe.
Vielleicht hat ja einer eine Idee danke schon.


show_name: true
show_icon: true
type: custom:button-card
tap_action:
  action: perform-action
  perform_action: automation.trigger
  target:
    entity_id: automation.beschattung_luften
  data:
    skip_condition: true
icon: ""
entity: input_button.beschattung
name: Lüften Oben
card_mod:
  style:
    ha-tile-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px !important;
      }
    .: |
      ha-state-icon {
         icon-size: 20px!important;
         icon-height: 20px;
         right: 60px!important;
        
      }
      ha-card {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66) !important;
        width: 190px!important;
        height: 80px !important;
        font-size: 12px!important;
        
      }
2

Hi, ich würde in der custom:button-card immer mit Grids in einem Template arbeiten. Für dein Vorhaben kannst du auch die normale Kachelkarte oder Mushrooms verwenden. (die custom:button-card ist ziemlich mächtig guck am Besten mal in die Erklärung) Hier ein Code über card_mod:

type: custom:button-card
show_name: true
show_icon: true
layout: vertical
tap_action:
  action: perform-action
  perform_action: automation.trigger
  target:
    entity_id: automation.beschattung_luften
  data:
    skip_condition: true
icon: ""
entity: input_button.beschattung
name: Lüften Oben
card_mod:
  style:
    .: |
      ha-card {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66) !important;
        width: 190px!important;
        height: 80px !important;
        font-size: 12px!important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .name {
        order: -1;
        font-size: 14px !important;
        font-weight: bold;
        margin-bottom: 5px;
      }
      ha-state-icon {
        width: 24px !important;
        height: 24px !important;
      }
1 „Gefällt mir“
3

Ok danke ich schau mir das mal dort auch.

4

ersetz mal alles inkl. der Zeile “card_mod:” und danach durch

styles:
  card:
    - position: relative
    - height: 135px
    - width: 384px
    - padding: 2px;2px;2px;2px;
  grid:
    - position: relative
  name:
    - position: absolute
    - font-size: 12pt
    - font-weight: bold
    - color: "#ffffff"
    - top: 10px
    - left: 20px

Ich würde ja behaupten speziell die letzten 2 Zeilen sind selbsterklärend. Die anderen eigentlich auch.

5 
card_mod:
  style:
    .: |
      ha-card {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66) !important;
        width: 190px!important;
        height: 80px !important;
        font-size: 12px!important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .name {
        order: -1;
        font-size: 14px !important;
        font-weight: bold;
        margin-bottom: 5px;
      }
      ha-state-icon {
        width: 24px !important;
        height: 24px !important;
      }

so sollte es doch gehen