Bubble Card Icon verschieben

Allgemein
1

Ich hab HA und auch Bubble Card geupdated…
damit haben sich die Icons / der Hintergrund geändert

IMG_2407
IMG_24071179×419 64.4 KB

Früher sah das so aus
IMG_2228
IMG_22281179×1144 149 KB

Hat jemand ne Idee wie ich das „zurecht rücken kann“?

2

schon mal Strg + F5 gedrückt?

3

Auf dem Handy :wink: ?

Du meinst neu starten ? Ja

Siehst auch im WebBrowser genau so aus wie in der App

4

da kann man auch ne Tastatur anschließen, zumindest bei Android.
Aber ne habe im Post nichts von Handy gesehen.
Bei Apps kann man aber auch den Cache leeren.

Screenshot_20250712-215407
Screenshot_20250712-2154071224×2700 113 KB

LG

5

Da ich beim iPhone nicht gefunden habe, wich ich den App Cache löschen kann …hab ich die App gelöscht und neu installiert… keine Besserung

6

das kann ich dir auch nicht sagen.

Am PC bzw. im Browser wird es richtig angezeigt?
Kann ja auch immer noch an Bubble Card selber liegen.

7

Nein auch auf dem PC (Web Browser) ist es nicht anders

Hab jetzt mal die Beta Version der bubble Card getestet, auch nicht besser

9

Würdest du einmal mitteilen auf was du geupdated hast. Bubblecard 3.0 vermute ich…

Zeig bitte den YAML code der Karte, dann kann man das nachvollziehen und sehen wo man drehen muss damit sich das wieder ändert.

Ich denke da werden sich in dem mega Update auf 3.0 die Formatierungen minimal geändert haben

Oder die liefen voher aller auf normal und jetzt auf large. Da scheint doch der main button container jetzt größer zu sein. Oder sind das sub buttons?

Update:
Ich hab das mal nachvollzogen…

so wie ich dass sehe müssten das Sub Buttons sein… Wenn ich das mal aufbaue, dann passiert das bei mir nicht. Ich tippe mal auf einen simplen Formatierungsfehler bei dir.
Ich würde da nicht gleich den RollBack Hammer schwingen :wink: → Thema: Wiederherstelle Supervisor internet…

Hier mal mein Code:

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Garagentor
    icon: ""
    tap_action:
      action: none
    entity: cover.garagen_tor
    state_background: true
  - name: Alle Lichter
    entity: light.alle_lichter
    show_background: true
    tap_action:
      action: none
    light_background: false
    show_name: false
  - name: Alle Fenster
    icon: ""
    show_background: true
    tap_action:
      action: none
    entity: binary_sensor.alle_fenster
    show_name: false
    show_state: false
  - name: "Nebeneingang Schloss"
    icon: ""
    show_background: true
    tap_action:
      action: none
    entity: lock.lock_ultra_8f8a
    show_name: false
  - name: Temperatur
    icon: mdi:home-thermometer
    show_background: true
    tap_action:
      action: navigate
      navigation_path: /dashboard-zuhause/gerate
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
    border: none;
  }
  .bubble-sub-button {
    height: 56px !important;
    width: 56px !important;
    border: 6px solid #f00;
  }

  .bubble-sub-button-1 {
    border: 6px solid #fff !important;
    background-color: #f0f;
  }
  .bubble-sub-button-3 {
    border: 6px solid #0f0 !important;
  }
  .bubble-sub-button-4 {
    border: 6px solid #00f !important;
    background-color: #99f;
  }
  .bubble-sub-button-5 {
    border: 6px solid #00f !important;
    background-color: #c44;
  }
  .bubble-sub-button-container {
    display: flex !important;
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0 !important;
  }

das ist das Ergebnis:
BubbleCard SubButtons Es

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

11 
`type:%20custom%3Abubble-card%0Acard_type%3A%20button%0Ascrolling_effect%3A%20false%0Ashow_name%3A%20false%0Aname%3A%20Pumpe%0Aicon%3A%20mdi%3Apump%0Agrid_options%3A%0A%20%20columns%3A%202%0A%20%20rows%3A%201%0Adouble_tap_action%3A%20%7B%7D%0Atap_action%3A%0A%20%20action%3A%20navigate%0A%20%20navigation_path%3A%20/dashboard-pool%0Abutton_type:%20state%0Ashow_state:%20false%0Asub_button:%20%5B%5D%0Astyles:%20%7C%0A%20%20.bubble-button-background%20%7B%0A%20%20%20%20opacity:%201%20!important;%0A%20%20%20%20background-color:%20$%7Bstate%20===%20'on'%20?%20'lightgrey'%20:'orangered'%7D%20!important;%0A%20%20%7D%0A%20%20.bubble-icon%20%7B%0A%20%20%20%20opacity:%201%20!important;%0A%20%20%20%20color:%20$%7Bstate%20===%20'aus'%20?%20'pink'%20:'grey'%7D%20!important;%0A%20%20%7D%0A%20%20.bubble-icon%20%7B%0A%20%20%20%20icon_position:%20left%0A%20%20%7D%0A%20%20.bubble-button-background%20%7B%0A%20%20%20%20height:%2050px%20!important;%0A%20%20%20%20width:%2050px%20!important;%0A%20%20%7D%0A%20%20.bubble-button-card-container%20%7B%0A%20%20%20%20background:%20none;%0A%20%20%7D%0Aentity:%20switch.hometaic_ip_access_point_pumpe_unterputz%0A `
12

Aber so kann das glaube keiner ohne extremen Aufwand lesbar machen.

Poste doch bitte mal so dass man das auch lesen kann.

13

Ich bin …. Zu doof dazu :frowning:
< >
Auch mit vorvormatierten Text einfügen geht es nicht :frowning:

14

Ach unsinn!

Da ist doch ein Knopf im Editor

Screenshot_20250713_190721_Chrome_2
Screenshot_20250713_190721_Chrome_2972×2107 205 KB

Dann einfach den YAML Code dazwischen setzen :slightly_smiling_face:

15

es funktioniert auf dem iPhone nicht …
wohl aber am Mac …

type: custom:bubble-card
card_type: button
name: Licht an
show_icon: true
icon: mdi:lightbulb
scrolling_effect: false
show_name: false
grid_options:
  columns: 2
  rows: 1
styles: |
  .bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === 'on' ? 'orange' :'lightgrey'} !important;
  }
  .bubble-button-background {
    height: 50px !important;
    width: 50px !important;
  }
  .bubble-button-card-container {
    background: none;
  }
tap_action:
  navigation_path: /dashboard-lichter
  action: navigate
double_tap_action: {}
button_action:
  tap_action: {}
  double_tap_action: {}
entity: light.group_all_lights
visibility:
  - condition: state
    entity: light.group_all_lights
    state: "off"
  - condition: state
    entity: light.licht_lilith_hue
    state: "off"
hold_action:
  action: none
16

Was du gepostet hast ist nichts drin zu finden was den Ring überhaupt erzeugt. Das wird wahrscheinlich nur ein Teil des Codes sein. Das sind doch subbuttons. Da musdt du docv nen border definiert habe. Oder du arbeitest irgendwo in dem main background mit nem padding.
Poste doch sonst mal den ganzen Code…
Oder nimm doch testweise mal meinen code. Bau deine Entitäten ein pass die Farben an.

17

Mit Deinem Code … schaut es gut aus … aber :wink: Du hast 5 “fixe Button”

meine Buttons sind etwas kompliziert … je nach Zustand ändern sich Farben oder auch Icons…

views:
  - type: sections
    path: ''
    sections:
      - type: grid
        cards:
          - type: custom:bubble-card
            card_type: button
            name: Sicherheit
            show_icon: true
            icon: mdi:lock
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orange' :'lightgrey'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'aus' ? 'pink' :'grey'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none
                ;
              }
            tap_action:
              navigation_path: /turen-und-fenster
              action: navigate
            double_tap_action: {}
            button_action:
              tap_action: {}
              double_tap_action: {}
            sub_button: []
            button_type: state
            show_state: false
            entity: input_boolean.sicherheit
            visibility:
              - condition: state
                entity: input_boolean.sicherheit
                state: 'off'
          - type: custom:bubble-card
            card_type: button
            name: Sicherheit
            show_icon: true
            icon: mdi:lock-open-variant
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orangered' :'lightgrey'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'aus' ? 'pink' :'orangered'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            tap_action:
              navigation_path: /turen-und-fenster
              action: navigate
            double_tap_action: {}
            button_action:
              tap_action: {}
              double_tap_action: {}
            sub_button: []
            button_type: state
            show_state: false
            entity: input_boolean.sicherheit
            visibility:
              - condition: state
                entity: input_boolean.sicherheit
                state: 'on'
          - type: custom:bubble-card
            card_type: button
            scrolling_effect: false
            show_name: false
            name: Pumpe
            icon: mdi:pump
            grid_options:
              columns: 2
              rows: 1
            double_tap_action: {}
            tap_action:
              action: navigate
              navigation_path: /dashboard-pool
            button_type: state
            show_state: false
            sub_button: []
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'lightgrey' :'orangered'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'aus' ? 'pink' :'grey'} !important;
              }
              .bubble-icon {
                icon_position: left
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            entity: switch.hometaic_ip_access_point_pumpe_unterputz
          - type: custom:bubble-card
            card_type: button
            name: Licht an
            show_icon: true
            icon: mdi:lightbulb
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orange' :'lightgrey'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            tap_action:
              navigation_path: /dashboard-lichter
              action: navigate
            double_tap_action: {}
            button_action:
              tap_action: {}
              double_tap_action: {}
            entity: light.group_all_lights
            visibility:
              - condition: state
                entity: light.group_all_lights
                state: 'off'
              - condition: state
                entity: light.licht_lilith_hue
                state: 'off'
            hold_action:
              action: none
          - type: custom:bubble-card
            card_type: button
            name: Licht an
            show_icon: true
            icon: mdi:lightbulb-on
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orange' :'lightgrey'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'aus' ? 'pink' :'orange'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            tap_action:
              navigation_path: /dashboard-lichter
              action: navigate
            double_tap_action: {}
            button_action:
              tap_action: {}
              double_tap_action: {}
            entity: light.group_all_lights
            visibility:
              - condition: state
                entity: light.group_all_lights
                state: 'on'
            hold_action:
              action: none
          - type: custom:bubble-card
            card_type: button
            name: Licht an
            show_icon: true
            icon: mdi:lightbulb-on
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'pink' :'pink'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'aus' ? 'pink' :'pink'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            tap_action:
              navigation_path: /dashboard-lichter
              action: navigate
            double_tap_action: {}
            button_action:
              tap_action: {}
              double_tap_action: {}
            entity: light.group_all_lights
            visibility:
              - condition: state
                entity: light.group_all_lights
                state: 'off'
              - condition: and
                conditions:
                  - condition: state
                    entity: light.licht_lilith_hue
                    state: 'on'
            hold_action:
              action: none
          - type: custom:bubble-card
            card_type: button
            name: Fenster
            show_icon: true
            icon: mdi:window-closed-variant
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orange' :'lightgrey'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'on' ? 'orange' :'grey'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            tap_action:
              navigation_path: /turen-und-fenster
              action: navigate
            double_tap_action: {}
            button_action:
              tap_action: {}
              double_tap_action: {}
            entity: input_boolean.irgendein_fenster_offen
          - type: custom:bubble-card
            card_type: button
            name: Battery low
            show_icon: true
            icon: mdi:battery-30
            scrolling_effect: false
            show_name: false
            grid_options:
              columns: 2
              rows: 1
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orange' : 'lightgrey' } !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'aus' ? 'orangered' :'grey'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            tap_action:
              navigation_path: /dashboard-batterie
              action: navigate
            double_tap_action:
              action: none
            button_action:
              tap_action: {}
              double_tap_action: {}
            hold_action:
              action: none
            entity: input_boolean.battery_low
          - type: custom:bubble-card
            card_type: button
            scrolling_effect: false
            show_name: false
            name: Waschm
            icon: mdi:washing-machine
            grid_options:
              columns: 2
              rows: 1
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: /dashboard-geraete
            button_type: state
            show_state: false
            sub_button: []
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'orange' : 'lightgrey'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'on' ? 'orange' : 'grey'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            hold_action:
              action: none
            visibility:
              - condition: state
                entity: input_boolean.trockner_on
                state: 'off'
              - condition: and
                conditions: []
            entity: input_boolean.waschmaschine_on
          - type: custom:bubble-card
            card_type: button
            scrolling_effect: false
            show_name: false
            name: ''
            icon: mdi:tumble-dryer
            grid_options:
              columns: 2
              rows: 1
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: /dashboard-geraete
            button_type: state
            show_state: false
            sub_button: []
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'yellowgreen' : 'lightgrey'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'on' ? 'yellowgreen' : 'grey'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            hold_action:
              action: none
            visibility:
              - condition: state
                entity: input_boolean.trockner_on
                state: 'on'
              - condition: and
                conditions:
                  - condition: state
                    entity: input_boolean.waschmaschine_on
                    state: 'off'
                  - condition: and
                    conditions: []
            entity: input_boolean.trockner_on
          - type: custom:bubble-card
            card_type: button
            scrolling_effect: false
            show_name: false
            name: ''
            icon: mdi:washing-machine-alert
            grid_options:
              columns: 2
              rows: 1
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: /dashboard-geraete
            button_type: state
            show_state: false
            sub_button: []
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${state === 'on' ? 'yellowgreen' : 'yellowgreen'} !important;
              }
              .bubble-icon {
                opacity: 1 !important;
                color: ${state === 'on' ? 'orange' : 'orange'} !important;
              }
              .bubble-button-background {
                height: 50px !important;
                width: 50px !important;
              }
              .bubble-button-card-container {
                background: none;
              }
            hold_action:
              action: none
            visibility:
              - condition: state
                entity: input_boolean.trockner_on
                state: 'on'
              - condition: and
                conditions:
                  - condition: state
                    entity: input_boolean.waschmaschine_on
                    state: 'on'
            entity: input_boolean.geschirrspueler_an

ist der Code … bis zur nächsten Karte Wetter …

18

Das dürfte die Ursache sein. Spiel mal mit den Werten, oder nimm es heraus.

19

Nein … dass ist es nicht … hatte ich schon getestet :wink:
Es müsste eher was mit der Positionierung des Ikons sein …

20

Verhält sich bei mir aber anders, oder ich habe Dein Problem nicht verstanden:

image
image819×109 10.9 KB

image
image790×108 10.8 KB

image
image791×103 10.5 KB

21

Ich teste es nochmal …
Kann man das Ikon kleiner machen ?

22

Keine Ahnung, aber die vermeintliche Verschiebung kommt durch das anpassen des Button Backgrounds.

Eben nochmal in die Styling Doku geschaut, das Icon kann man in der Größe verändern:

styles: |
  .bubble-icon {
    --mdc-icon-size: 26px !important;
  }