Größere Buttons ohne button-card, bevorzugt mit Bubble Card

Dashboards
21

Teile mal bitte deine komplette Card mit CSS, dann schaue ich es mir mal an. :slight_smile:

22

Gerne:

type: custom:bubble-card
card_type: button
sub_button:
  - name: Sonos
    icon: mdi:speaker-wireless
    tap_action:
      action: navigate
      navigation_path: "#sonos"
    show_background: false
    show_attribute: false
    show_icon: true
  - name: Alexa
    icon: mdi:drama-masks
    tap_action:
      action: navigate
      navigation_path: "#alexa"
    show_background: false
  - name: Heizung
    icon: mdi:radiator
    tap_action:
      action: navigate
      navigation_path: "#heizung"
    show_background: false
  - name: Kalender
    icon: mdi:calendar-week-outline
    tap_action:
      action: navigate
      navigation_path: "#kalender"
    show_background: false
  - name: Anrufliste
    icon: mdi:phone-log-outline
    tap_action:
      action: navigate
      navigation_path: "#telefonbuch"
    show_background: false
  - name: TV
    icon: mdi:television-classic
    tap_action:
      action: navigate
      navigation_path: "#fernseher"
    show_background: false
  - name: Tanken
    icon: mdi:gas-station
    tap_action:
      action: navigate
      navigation_path: "#tanken"
    show_background: false
name: Steuerung
show_last_changed: false
styles: |
  .bubble-button-card-container {
    border-radius: 10px !important;
    color: #606060;
    border: none !important;
    #background-color: transparent !important;
    opacity: 0.7;
  }

  .bubble-icon {
    opacity: 1;
    color: transparent !important;
  }
  .large .bubble-button-card-container {
    height: 64px;
    
  .bubble-sub-button-container {
    display: grid !important;
    grid-template-columns: repeat(10, auto); /* 3 Spalten für 2 Reihen */
    grid-template-rows: repeat(1, auto);
    gap: 16px !important;
    align-items: center;
    justify-items: center;
    padding-left:  0px;
    padding-right: 0px;
    }

  .large .bubble-sub-button {
    height: 64px !important; /* Größe der Buttons */
    width: 64px !important;
    font-size: 24px !important;
    align-items: center;
    justify-content: center;
  }

  .large .bubble-sub-button-icon {
    --mdc-icon-size: 128px !important; /* Größere Icons */
      height: 25px !important;
    padding-right: 10px; 
    color: var(--primary-color);
  }
card_layout: large
icon: ""
show_state: true
scrolling_effect: false
button_type: name
show_icon: false
show_name: false
23

So, hier bitte schön. Da waren noch ein paar andere Fehler drin. Du musst im CSS immer darauf achten das die Klasse mit { geöffnet und mit } geschlossen wird. Da ist wichtig! Ganz unten über --mdc-icon-size kannst du die Größe der Icons jetzt einstellen.

type: custom:bubble-card
card_type: button
sub_button:
  - name: Sonos
    icon: mdi:speaker-wireless
    tap_action:
      action: navigate
      navigation_path: "#sonos"
    show_background: false
    show_attribute: false
    show_icon: true
  - name: Alexa
    icon: mdi:drama-masks
    tap_action:
      action: navigate
      navigation_path: "#alexa"
    show_background: false
  - name: Heizung
    icon: mdi:radiator
    tap_action:
      action: navigate
      navigation_path: "#heizung"
    show_background: false
  - name: Kalender
    icon: mdi:calendar-week-outline
    tap_action:
      action: navigate
      navigation_path: "#kalender"
    show_background: false
  - name: Anrufliste
    icon: mdi:phone-log-outline
    tap_action:
      action: navigate
      navigation_path: "#telefonbuch"
    show_background: false
  - name: TV
    icon: mdi:television-classic
    tap_action:
      action: navigate
      navigation_path: "#fernseher"
    show_background: false
  - name: Tanken
    icon: mdi:gas-station
    tap_action:
      action: navigate
      navigation_path: "#tanken"
    show_background: false
name: Steuerung
show_last_changed: false
styles: |
  .bubble-button-card-container {
    border-radius: 10px !important;
    color: #606060;
    border: none !important;
    #background-color: transparent !important;
    opacity: 0.7;
  }
  .bubble-icon {
    opacity: 1;
    color: transparent !important;
  }
  .large .bubble-button-card-container {
    height: 64px;
  }  
  .bubble-sub-button-container {
    display: grid !important;
    grid-template-columns: repeat(10, auto); /* 3 Spalten für 2 Reihen */
    grid-template-rows: repeat(1, auto);
    gap: 16px !important;
    align-items: center;
    justify-items: center;
    padding-left:  0px;
    padding-right: 0px;
   }
  .large .bubble-sub-button {
    height: 14px !important; /* Größe der Buttons */
    width: 14px !important;
    font-size: 24px !important;
    align-items: center;
    justify-content: center;
  }
  .large .bubble-sub-button-icon {
    --mdc-icon-size: 28px !important; /* Größere Icons */
      height: 25px !important;
    padding-right: 10px; 
    color: var(--primary-color);
  }
card_layout: large
icon: ""
show_state: true
scrolling_effect: false
button_type: name
show_icon: false
show_name: false

image

image

1 „Gefällt mir“
24

Sehr gut. Es funktioniert. Ich danke Dir…Ja, ich bin diesem Code mit CSS immer nah am Rande der Verzweiflung.

Danke für die schnelle Hilfe!!!
Gruß, AndiFidi

1 „Gefällt mir“