# \[ CARTE \] Bubble Card - Des pop-up et une collection de cartes minimalistes

**URL:** <https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028>\
**Category:** Interface / Lovelace / Thème / Custom Card\
**Tags:** interface-lovelace, hacs, carte-personalise-custom-card, custom-card\
**Created:** [Septembre 14, 2023, 1:49 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028 "2023-09-14T13:49:48Z")\
**Posts on this page:** 20\
**Page:** 9

<div class="post-metadata">

**Author:** ![Jefnewtech](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jefnewtech/32/2584_2.png) [@Jefnewtech](https://forum.hacf.fr/u/Jefnewtech)\
**Post date:** [Août 25, 2024, 3:10 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/164 "2024-08-25T15:10:20Z")

</div>

Super merci. Ton Dashboard est un mélange de bubble Card et de mushroom si je comprends bien ☺

---

<div class="post-metadata">

**Author:** ![herveaurel](https://forum.hacf.fr/user_avatar/forum.hacf.fr/herveaurel/32/134147_2.png) [@herveaurel](https://forum.hacf.fr/u/herveaurel)\
**Post date:** [Août 25, 2024, 3:18 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/165 "2024-08-25T15:18:20Z")

</div>

Plus maintenant, je suis full Bubble, mais au moment de ce screen, il l’était.  
Enfin… Ca dépend des onglets…!

---

<div class="post-metadata">

**Author:** ![Jefnewtech](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jefnewtech/32/2584_2.png) [@Jefnewtech](https://forum.hacf.fr/u/Jefnewtech)\
**Post date:** [Août 25, 2024, 3:36 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/166 "2024-08-25T15:36:59Z")

</div>

Merci pour l’info. Je suis occupé de à refaire entièrement mon dash également en full bubble et decluttering. ☺

---

<div class="post-metadata">

**Author:** ![MilesTEG1](https://forum.hacf.fr/user_avatar/forum.hacf.fr/milesteg1/32/45824_2.png) [@MilesTEG1](https://forum.hacf.fr/u/MilesTEG1)\
**Post date:** [Août 29, 2024, 11:50 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/167 "2024-08-29T11:50:46Z")

</div>

Bonjour à tous,  
J’essaie de me faire un dashbord sympa, à base de Bubble-Cards.  
Je vais construire petit à petit ce dashboard, car j’ai peu de temps en journée à y consacrer et que ce que j’ai par ailleurs est un bordel pas possible XD

Je précise que je ne suis pas très doué avec le YAML de HomeAssistant, ni avec toutes les subtilités de ce dernier…  
Mais j’apprends par l’exemple.

Je travaille sur ce dashboard en YAML pur, depuis VSCode sur mon mac.

Aujourd’hui j’essaie de faire une carte qui va m’afficher le nombre de mises-à-jours disponible, cliquable pour voir les MAJ à faire.

J’aurais besoin d’aide pour adapter mon code actuel aux Bubble-Cards 🙂

J’ai ce code pour la carte de base qui affiche le nombre de MAJ :

```yaml
      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:mushroom-template-card
            primary: Software et modules
            secondary: |2-
                {% if is_state(entity, '0') %} 
                  Tout est à jour
                {% elif is_state(entity, '1') %} 
                  1 mise à jour
                {% else %}
                  {{ states(entity)}} mises à jour
                {% endif %}
            icon: mdi:home-assistant
            entity: sensor.nombre_de_mise_a_jour_total
            icon_color: |2-
                {% if is_state(entity, '0') %} 
                  light-blue
                {% else %}
                  orange
                {% endif %}

```

J’aimerais afficher en popup quand on clique dessus ce qui est décrit dans ce post :

> [@Maj de HACS version 1.34, vers la version 2.0. procédure d'installation?](https://forum.hacf.fr/t/maj-de-hacs-version-1-34-vers-la-version-2-0-procedure-dinstallation/46439/72):
>
> Finalement j’ai quand même fait la carte des updates disponibles, ça donne ça dans un pop-up bubble-card: 
> 
> > **sensor**
> >
> > # ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------ # -------------------------------------------------------------------- available - name: tplt\_available\_updates\_system state: | {% set var = states.update |selectattr('state', 'equalto'…

 ![image](https://forum.hacf.fr/uploads/default/original/3X/f/8/f8e82ede4c53a70476f7383c9ad40f6f9516d4b3.png)

J’ai déjà le code de ceci, à peu près fonctionnelle (je n’arrive pas à avoir la première ligne, car je n’ai pas le`switch.hacs_pre_release`. @mrgrlscz si tu passes par-là, voudrais-tu bien le donner, s’il te plait ?)

 ![CleanShot 2024-08-29 at 13.49.53@2x](https://forum.hacf.fr/uploads/default/original/3X/4/f/4fa065d2993ae342b6edf83d4da1e1a89c5af01c.png)

(j’ai aussi un souci avec les entités HACS sans icônes…, mais c’est un autre souci).

Merci pour votre aide ^^

---

<div class="post-metadata">

**Author:** ![mrgrlscz](https://forum.hacf.fr/user_avatar/forum.hacf.fr/mrgrlscz/32/56240_2.png) [@mrgrlscz](https://forum.hacf.fr/u/mrgrlscz)\
**Post date:** [Août 29, 2024, 2:59 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/168 "2024-08-29T14:59:30Z")

</div>

Tu dois l’avoir mais désactivée par défaut.  
il faut l’activer dans paramètres / devices & intégrations / hacs / hacs / diagnostic

---

<div class="post-metadata">

**Author:** ![mrgrlscz](https://forum.hacf.fr/user_avatar/forum.hacf.fr/mrgrlscz/32/56240_2.png) [@mrgrlscz](https://forum.hacf.fr/u/mrgrlscz)\
**Post date:** [Août 29, 2024, 3:26 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/169 "2024-08-29T15:26:40Z")

</div>

```auto
type: custom:bubble-card
card_type: button
entity: sun.sun
button_action:
  tap_action:
    action: navigate
    navigation_path: '#update'

```

Pour ce qui est de «&nbsp;convertir&nbsp;» ta carte existante en bubble-card… C’est plus complexe que ça en a l’air:  
Bubble ne gère pas les templates Jinja2.  
Je te conseillerais d’être plutôt à l’aise avec le yaml / css / templates avant de te lancer là dedans!

---

<div class="post-metadata">

**Author:** ![MilesTEG1](https://forum.hacf.fr/user_avatar/forum.hacf.fr/milesteg1/32/45824_2.png) [@MilesTEG1](https://forum.hacf.fr/u/MilesTEG1)\
**Post date:** [Août 29, 2024, 6:35 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/170 "2024-08-29T18:35:01Z")

</div>

Merci @mrgrlscz  
J’avance un petit peu ^^

Avec ce code, je peux afficher un début de popup pour les MAJ :

```yaml
      - type: custom:bubble-card
        card_type: button
        button_type: state
        card_layout: large-2-rows
        name: Update(s) Software & modules
        entity: sensor.texte_avec_nombre_de_mise_a_jour_total
        icon: mdi:update
        show_state: true
        button_action:
          tap_action:
            action: navigate
            navigation_path: '#update'
        sub_button:
          - entity: sensor.tplt_available_updates_system
            icon: mdi:home-assistant
            show_background: false
            show_state: true
            tap_action:
              action: more-info
          - entity: sensor.tplt_available_updates_addon
            icon: mdi:puzzle
            show_background: false
            show_state: true
            tap_action:
              action: more-info
          - entity: sensor.tplt_available_updates_hacs
            icon: mdi:view-module
            show_background: false
            show_state: true
            tap_action:
              action: more-info

```

![CleanShot 2024-08-29 at 20.27.45](https://forum.hacf.fr/uploads/default/original/3X/3/7/37383d7708a84b8c22ad6d20a876db0ce7a9d705.gif)

> **le code YAML des deux templates pour afficher le nombre de mise à jour total :**
>
> ```yaml
> # Nombre de mise à jour total
> - name: "Nombre de mise à jour total"
> unique_id: "nombre_de_mise_a_jour_total"
> state: >
> {{ states.update
> |selectattr('state', 'eq', 'on')
> |list
> |count
> }}
> 
> - name: "Texte avec nombre de mise à jour total"
> unique_id: "texte_avec_nombre_de_mise_a_jour_total"
> state: |2-
> {% if is_state('sensor.nombre_de_mise_a_jour_total', '0') %} 
> {% set text_a_afficher = "Tout est à jour" %}
> {% elif is_state('sensor.nombre_de_mise_a_jour_total', '1') %} 
> {% set text_a_afficher = "1 mise à jour" %}
> {% else %}
> {% set text_a_afficher = states('sensor.nombre_de_mise_a_jour_total') + " mises à jour" %}
> {% endif %}
> {{ text_a_afficher }}
> 
> ```

Maintenant faut que je vois comment intégrer dans la popup les cartes qui affichent les mises à jour…

> [@mrgrlscz](#):
>
> Pour ce qui est de «&nbsp;convertir&nbsp;» ta carte existante en bubble-card… C’est plus complexe que ça en a l’air:  
> Bubble ne gère pas les templates Jinja2.  
> Je te conseillerais d’être pitot à l’aise avec le yaml / css / templates avant.

Je n’ai pas trop saisi la dernière phrase 😆  
Mais j’apprends par l’exemple 🙂

Edit : ajout du code des template

---

<div class="post-metadata">

**Author:** ![MilesTEG1](https://forum.hacf.fr/user_avatar/forum.hacf.fr/milesteg1/32/45824_2.png) [@MilesTEG1](https://forum.hacf.fr/u/MilesTEG1)\
**Post date:** [Août 29, 2024, 7:06 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/171 "2024-08-29T19:06:19Z")

</div>

Bon, et bien je ne comprends comment ajouter à la popup d’autres cartes…  
à savoir la liste des mises à jour disponible…

---

<div class="post-metadata">

**Author:** ![mrgrlscz](https://forum.hacf.fr/user_avatar/forum.hacf.fr/mrgrlscz/32/56240_2.png) [@mrgrlscz](https://forum.hacf.fr/u/mrgrlscz)\
**Post date:** [Août 29, 2024, 11:03 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/172 "2024-08-29T23:03:38Z")

</div>

> [@MilesTEG1](#):
>
> Bon, et bien je ne comprends comment ajouter à la popup d’autres cartes…

Un pop-up bubble, est obligatoirement tout en haut d’une `vertical-stack`, suivent ensuite les cartes que tu veux y intégrer:

```auto
type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#update'
    name: Mises à jour
  - type: entities
    entities:
      - sun.sun
  - type: entities
    entities:
      - sun.sun

```

---

<div class="post-metadata">

**Author:** ![mrgrlscz](https://forum.hacf.fr/user_avatar/forum.hacf.fr/mrgrlscz/32/56240_2.png) [@mrgrlscz](https://forum.hacf.fr/u/mrgrlscz)\
**Post date:** [Août 29, 2024, 11:13 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/173 "2024-08-29T23:13:20Z")

</div>

> [@MilesTEG1](#):
>
> Je n’ai pas trop saisi la dernière phrase 😆  
> Mais j’apprends par l’exemple 🙂

J’ai corrigé (tapé à la vas-vite) ^^  
Un exemple: jette un oeil à la partie `styles:`

> **Code**
>
> ```auto
> type: vertical-stack
> cards:
> - type: custom:bubble-card
> card_type: pop-up
> hash: '#update'
> name: Mises à jour
> sub_button:
> - entity: switch.hacs_pre_release
> name: Beta
> show_name: false
> icon: ""
> show_state: true
> show_last_changed: false
> show_attribute: false
> show_icon: false
> show_background: true
> tap_action:
> action: toggle
> - type: custom:bubble-card
> card_type: separator
> name: "Mise(s) à jour ignorée(s):"
> entity: binary_sensor.tplt_skipped_updates_all
> styles: |-
> ha-card { color: var(--primary-background-color); }
> .bubble-line {
> background: var(--primary-background-color);
> opacity: 0.2;
> margin-right: 8px;
> }
> ${
> card.querySelector('.bubble-name').innerText = hass.formatEntityAttributeValue(hass.states[entity], 'count')
> + (hass.states[entity].attributes.count == '1' ? ' ignorée' : ' ignorées')
> }
> - type: custom:flex-table-card
> etc etc...
> 
> ```

[Templates Bubble-card](https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#templates)

---

<div class="post-metadata">

**Author:** ![Coben](https://forum.hacf.fr/user_avatar/forum.hacf.fr/coben/32/27676_2.png) [@Coben](https://forum.hacf.fr/u/Coben)\
**Post date:** [Août 31, 2024, 3:05 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/174 "2024-08-31T15:05:06Z")

</div>

Salut a tous.  
Merci a @Clooos pour ce superbe travail que je vais m’empresser d’adopter.  
Une petite question : comment ne faire apparaître un sub-button sur une condition d’état?  
(par exemple ne faire apparaitre un sub button d’une light seulement si elle allumée, si éteinte pas de sub button).  
Merci!

---

<div class="post-metadata">

**Author:** ![selecus](https://forum.hacf.fr/user_avatar/forum.hacf.fr/selecus/32/59567_2.png) [@selecus](https://forum.hacf.fr/u/selecus)\
**Post date:** [Août 31, 2024, 5:39 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/175 "2024-08-31T17:39:31Z")

</div>

non ce que tu demandes n’est pas possible en utilisant juste un paramètre modifiant la présence ou l’absence du sub button  
Par contre si tu veux obtenir le même résultat tu peux créer deux cartes conditionnelles contenant à chacune d’elles une bubble card : l’une avec le sub button et l’autre non

---

<div class="post-metadata">

**Author:** ![Clooos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clooos/32/77640_2.png) [@Clooos](https://forum.hacf.fr/u/Clooos)\
**Post date:** [Août 31, 2024, 6:23 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/176 "2024-08-31T18:23:18Z")

</div>

Il y a aussi les templates à placer dans les custom styles de Bubble Card, il y a des exemples dans la documentation sur GitHub, avec cet exemple justement.

---

<div class="post-metadata">

**Author:** ![Coben](https://forum.hacf.fr/user_avatar/forum.hacf.fr/coben/32/27676_2.png) [@Coben](https://forum.hacf.fr/u/Coben)\
**Post date:** [Septembre 1, 2024, 10:13 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/178 "2024-09-01T10:13:25Z")

</div>

effectivement

![image](https://forum.hacf.fr/uploads/default/original/3X/0/e/0ed510a2fa518876ccde392685c67e7de42e785f.png)

![image](https://forum.hacf.fr/uploads/default/original/3X/0/1/01519023fb503efcb7ebaac610604b9e9318329a.png)

le code

```auto
type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: separator
    name: lumieres salon
    icon: mdi:ceiling-light-multiple-outline
  - type: custom:bubble-card
    card_type: button
    hash: '#yeelight 1'
    tap_action:
      action: navigate
      navigation_path: '#salon'
    entity: light.lumieres_salon
    show_state: false
    sub_button:
      - entity: light.yeelight_1
        name: y1
        show_icon: true
        show_name: true
    styles: |-
      .bubble-sub-button-1 {
        display: ${hass.states['light.yeelight_1'].state === 'on' ? '' : 'none'} !important;
      }
  - type: custom:bubble-card
    card_type: button
    entity: light.yeelight_1

```

---

<div class="post-metadata">

**Author:** ![Romain\_Burla](https://forum.hacf.fr/user_avatar/forum.hacf.fr/romain_burla/32/5431_2.png) [@Romain\_Burla](https://forum.hacf.fr/u/Romain_Burla)\
**Post date:** [Septembre 1, 2024, 1:40 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/179 "2024-09-01T13:40:01Z")

</div>

Salut à tous,  
est-il possible de changer l’icon principal en fonction de l’etat de l’entité ?  
Par exemple ma piscine possède plusieurs mode de fonctionne grace à un input select, je voudrais qu’en fonction du mode, l’icon du bubble principal change.  
Merci 🙂

---

<div class="post-metadata">

**Author:** ![Coben](https://forum.hacf.fr/user_avatar/forum.hacf.fr/coben/32/27676_2.png) [@Coben](https://forum.hacf.fr/u/Coben)\
**Post date:** [Septembre 1, 2024, 2:27 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/180 "2024-09-01T14:27:44Z")

</div>

D’apres le Git c’est possible  
pour la couleur:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/e/de8bbfec084216a6a567fffd0651e195ebfd0c4e.png)

pour l’icone en elle meme :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/d/5db83fa2d3e9d5695ac5a3e4990130ae573c7e6a.png)

---

<div class="post-metadata">

**Author:** ![Coben](https://forum.hacf.fr/user_avatar/forum.hacf.fr/coben/32/27676_2.png) [@Coben](https://forum.hacf.fr/u/Coben)\
**Post date:** [Septembre 1, 2024, 2:34 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/181 "2024-09-01T14:34:37Z")

</div>

pour ma part j’essaye de changer le name d’un sub-button, le but serait de changer le texte en fonction de l’etat d’un sensor mais je n’arrive deja pas a changer tout simplement le texte.  
Ca fonctionne pour la bubble card principale mais pas pour le sub-button

code 1:

```auto
type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: separator
    name: Electro-Vannes
    icon: mdi:pipe-valve
  - type: custom:bubble-card
    card_type: button
    entity: switch.vanne_generale
    sub_button:
      - show_state: false
        show_last_changed: false
        show_icon: false
        show_background: true
        show_name: true
        styles: |-
          ${card.querySelector('.sub-button-name').innerText =
          hass.formatEntityState(hass.states['switch.vanne_generale'])}
    styles: |-
      .bubble-icon {
        color: ${hass.states['switch.vanne_generale'].state === 'off' ? 'green' : 'red'} !important;
      }

      ${card.querySelector('.bubble-name').innerText =
      hass.formatEntityState(hass.states['switch.vanne_generale'])}
    show_state: false

```

 ![image](https://forum.hacf.fr/uploads/default/original/3X/2/e/2ee1b19ffa654a7d72399dedc52bee292007731e.png)

code 2 :

```auto
type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: separator
    name: Electro-Vannes
    icon: mdi:pipe-valve
  - type: custom:bubble-card
    card_type: button
    entity: switch.vanne_generale
    sub_button:
      - show_state: false
        show_last_changed: false
        show_icon: false
        show_background: true
        show_name: true
        name: |-
          ${card.querySelector('.sub-button-name').innerText =
          hass.formatEntityState(hass.states['switch.vanne_generale'])}
    styles: |-
      .bubble-icon {
        color: ${hass.states['switch.vanne_generale'].state === 'off' ? 'green' : 'red'} !important;
      }

      ${card.querySelector('.bubble-name').innerText =
      hass.formatEntityState(hass.states['switch.vanne_generale'])}
    show_state: false

```

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/3/d339fe4bc5ac454f9faebb8ecc78fdc643ee6efc.png)

Merci!

---

<div class="post-metadata">

**Author:** ![yeoh](https://forum.hacf.fr/user_avatar/forum.hacf.fr/yeoh/32/43393_2.png) [@yeoh](https://forum.hacf.fr/u/yeoh)\
**Post date:** [Septembre 2, 2024, 8:45 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/182 "2024-09-02T08:45:33Z")

</div>

Hello, tout d’abord un grand merci pour Bubble Card c’est vraiment top pour faire des interfaces bien plus modernes 👍

Question bête, comment faire pour changer la couleur des séparateurs j’ai bien trouvé le code mais je ne vois pas où indiquer la couleur malgré plusieurs essais :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/8/088f42f990556060692386b2b1dfe736c5cc773d.png)

Merci 😉

---

<div class="post-metadata">

**Author:** ![selecus](https://forum.hacf.fr/user_avatar/forum.hacf.fr/selecus/32/59567_2.png) [@selecus](https://forum.hacf.fr/u/selecus)\
**Post date:** [Septembre 2, 2024, 9:19 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/183 "2024-09-02T09:19:57Z")

</div>

essaye plutôt qlqc comme ça:

```auto
type: custom:bubble-card
card_type: separator
styles: |-
  .bubble-line {
    background: var(--accent-color) !important;
  }

```

ou

```auto
type: custom:bubble-card
card_type: separator
styles: |-
  .bubble-line {
    background: var(--primary-color) !important;
    opacity: 0.5;

  }

```

ou

```auto
type: custom:bubble-card
card_type: separator
styles: |-
  .bubble-line {
    background: black !important;
  }
```

---

<div class="post-metadata">

**Author:** ![yeoh](https://forum.hacf.fr/user_avatar/forum.hacf.fr/yeoh/32/43393_2.png) [@yeoh](https://forum.hacf.fr/u/yeoh)\
**Post date:** [Septembre 2, 2024, 11:49 UTC](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028/184 "2024-09-02T11:49:21Z")

</div>

Merci pour ton retour et effectivement la dernière fonctionne très bien 😉  
J’ai ajouté opacity en plus :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/6/6/665f8034c358b315ab391097bde865af25028ad7.png)

```auto
type: custom:bubble-card
card_type: separator
name: Piscine
icon: mdi:pool-thermometer
styles: |-
  .bubble-line {
    background: blue !important;
    opacity: 0.6;
  }

```

Je complète si besoin pour d’autres avec changement de la couleur de l’Icon et la taille de la police :

![image](https://forum.hacf.fr/uploads/default/original/3X/b/c/bce0dca2df562f41d4808200c6df155b5d93c01a.png)

```auto
type: custom:bubble-card
card_type: separator
name: Piscine
icon: mdi:pool-thermometer
styles: |-
  .bubble-line {
    background: #1E7FCB !important;
    opacity: 1;
  }
  .bubble-icon {
    color: #1E7FCB !important;
  }
    * { 
      font-size: 20px !important;
  }
card_layout: large

```

[Page précédente](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028.md?page=8)

[Page suivante](https://forum.hacf.fr/t/carte-bubble-card-des-pop-up-et-une-collection-de-cartes-minimalistes/28028.md?page=10)