Bubble card coloring

Entraide Home Assistant
1

Bonjour à tous,

j’essai d’utiliser les fonctions de changement de couleur des bubble card. J’ai trouvé des infosici : [Styling Module] Sub-button coloring based on entity state · Clooos/Bubble-Card · Discussion #1661 · GitHub

Mais je en comprends passi il faut installer un module en plus, ou simplement utiliser des lignes de code lors de la création des bubble card.

Si vous avez des infos je suis preneur.

Merci.

2

Bonjour,
il y a des exemples dans la doc :

3

Merci pour ton retour. Mais je cherche toujours comment appliquer la transparence au fond du bouton.

Actuellement il est blanc comme sur cette photo

Capture d’écran 2025-09-10 à 10.41.06
Capture d’écran 2025-09-10 à 10.41.06426×191 4.13 KB

et j’aimerai que juste le fond soit transparent comme ici :

FOND
FOND548×183 15 KB

4

Hello,

si ça n’a pas changé avec les dernières versions, tente ça

            .bubble-sub-button {
              background-color: rgba(0, 255, 255, 0.5); /* Couleur bleue semi-transparente */
            }

c’est aussi possible d’activer un changement de couleur au clic

            .bubble-sub-button:active {
              background-color: rgba(0, 123, 255, 0.5); /* Couleur bleue semi-transparente */
            }

cdt

5

Merci pour ton retour, mais ce n’est pas ça….

Dommage ça avait l’air bien comme rendu visuel

6

Il faut installer le module & l’active dans le bubble-card en question :

Capture d’écran du 2025-09-10 20-12-17
Capture d’écran du 2025-09-10 20-12-17639×523 22.4 KB

7

D’ailleurs, il y a maintenant plein de module assez sympa a utiliser, notamment le sub_button_wheel , qu’on peut utiliser pour plein de chose, comme contrôler la vitesse du ventilateur sur un climate:

Capture d’écran du 2025-09-10 20-13-39
Capture d’écran du 2025-09-10 20-13-39512×197 20 KB

8

Merci Roumano, on l’installe via Hacs ce module ? Le module store est grisé dans mes options.

9

re,

tout est dans la doc GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch. > Styling >Modules, le lien direct passe pas

cdt

10

Bonjour,

Une solution alternative : utiliser custom:button-card. Ca te permettra de faire tout ce que tu veux (changer la couleur de l’icone, sa taille, la retourner, etc.) sans card_mod…

type: custom:button-card
variables:
  card_bg: rgba(50,55,93,1.0)
aspect_ratio: 3/1
custom_fields:
  bubble:
    card:
      type: custom:button-card
      label: Test Master Bathroom
      show_label: true
      styles:
        card:
          - width: 380px
          - height: 80px
          - border-radius: 999px
          - background-color: rgba(47,174,255,1.0)
          - border: none
        label:
          - font-weight: bold
          - justify-self: start
          - padding-left: 80px
  icon_area:
    card:
      type: custom:button-card
      icon: mdi:shower
      icon_size: 40px
      styles:
        card:
          - width: 60px
          - height: 60px
          - border-radius: 50%
          - border: none
          - background-color: '[[[ return variables.card_bg ]]]'
        icon:
          - width: 40px
          - color: white
          - transform: scaleX(-1)
styles:
  card:
    - background-color: '[[[ return variables.card_bg ]]]'
    - color: red
    - border-radius: 0
  custom_fields:
    bubble:
      - position: absolute
      - place-self: center
    icon_area:
      - position: absolute
      - top: 50%
      - left: calc(50% - 190px + 10px)
      - transform: translateY(-50%)

image
image478×157 4.13 KB

11

Effectivement ! Merci je vais regarder de ce côté, surtout qu’au niveau esthétique c’est pareil.

12

Si tu as des questions par rapport au tutoriel évoqué sur ton autre sujet, n’hésites pas à revenir vers moi.