⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

[PaNiCo]

Nicely done!
Which theme are you using? Or is it custom css on every card?

[aureliensas]

I’m using : v2.3.0

[Menelao (Roberto)]

Try the latest beta

[EiStri]

Is it possible to template the horizontal-button-stack buttons to show them conditionally like the sub-buttons?

[amstermk]

you can do as described here:

[Use-Case] Multiple Horizontal button stacks for multiple people ·...

[Dakononov (Dmitry)]

Thank you so much! Do you know how to change the size of this button?

[jeroenvdd89 (Jeroen)]

hi all,
can anyone confirm if this is ‘normal’ popup behavior:
when i toggle my popup it takes up the full height (on mobile and normal browsers)

[Harry-1976]

You should probably add !important:

styles: |-
  .bubble-state {
      font-size: 24px !important;
      font-weight: normal;
  }

[Harry-1976]

That’s normal. You can adjust it. Play with the settings under ‘Styling options’ → ‘pop-up styling’.

[jeroenvdd89 (Jeroen)]

i don’t see any option regarding the height?

[gdenas]

Is there a way to resize a specific sub-button icon. I want to put in a large bubble card the first raw sub-buttons with normal icons and in the second raw sub-buttons with smaller icons.
thanks in advance

[Seagull01 (Andy)]

Loving the bubble card, top work Cloos, work in progress, but it’s a start

[amstermk]

Play around with „top margin“

[jeroenvdd89 (Jeroen)]

That just lowers the pop up but doesn’t change. The height at all

[amstermk]

Then try this:

.bubble-pop-up {
height: 120px !important;
}

[Harry-1976]

Afaik adjusting the pop-up other than positioning it hasn’t been implemented yet. You can check github (worth checking out anyway for all tips, tricks and stuff).

[Abunafha]

      .bubble-close-button {
          background: #922724 !important;
          height: 70px !important;
          width: 70px !important;
        }

[Cloos]

Bubble Card 2

v2.3.4

Hi everyone, and Happy New Year!

I’m back after a little break, and I hope you’re all doing well!

First of all, I’d like to talk about the instability issues with the previous releases (v2.3.1 to v2.3.3). These versions were initially marked as the latest release on GitHub but were later moved to pre-release due to the issues they had. If you missed them, don’t worry, this changelog combines everything you might have missed if you’ve stayed on v2.3.0, along with some new fixes!

I also want to thank @MrBearPresident again for his valuable contributions to these releases!

As always, let me know if you encounter any issues or have feedback. Your input helps make these updates even better!

Here’s what’s new:

---

New features

• Conditional sub-button visibility:
  Sub-buttons now support conditional visibility based on Home Assistant’s conditional system, allowing more dynamic setups without the need to add templates. #787. Thanks to @MrBearPresident for the contribution! PR #995.

  In YAML:

     visibility:
       # Show this sub-button only when motion is detected at the front door.
       - condition: state
         entity: binary_sensor.front_door_motion
         state: "on"
  

  

• New pop-up trigger system:
  Introduced a new trigger system in the pop-up editor, to allow more complex triggers. This new feature is based on the conditional system from @MrBearPresident, so thanks again to him for this great new possibility! #332

  This is not a breaking change, existing triggers from previous versions will still work but can only be edited in YAML mode. If you switch to the new system, it will override previously added triggers.

  In YAML:

     trigger:
       # Open this pop-up when motion is detected at the front door.
       - condition: state
         entity: binary_sensor.front_door_motion
         state: "on"
  

• Box shadow variable:
  You can now adjust the box shadow for your Bubble Cards, this can be done with the --bubble-box-shadow variable. PR #1009 by @flobiwankenobi.

• Safety binary sensor icon:
  Added a dedicated icon for safety binary sensors. PR #967 by @nexeck.

• Pop-up grid gap variable:
  You can now customize the spacing between items in pop-ups using the --bubble-pop-up-gap variable. The default value is 14px.

• Accent color for lights:
  You can now use the accent color in a light button/slider instead of the light color. To enable it, go to the editor or add use_accent_color: true in YAML. #692.

  

---

Bug fixes and optimizations

• Instant .bubble-state and .bubble-name templating:
  Templates using card.querySelector('.bubble-state').innerText or card.querySelector('.bubble-name').innerText are now rendered instantly when the page loads. #975.

• Pop-up slide-to-close animation:
  The animation for closing a pop-up by sliding from the header has been fixed.

• Reset pop-up auto-close timer on interaction:
  Interacting with a pop-up now resets the auto-close timer, ensuring the pop-up remains open as long as it’s actively used. Thanks to @samrenfrew for the contribution! PR #1071.

• Horizontal button stack unstable order:
  An issue causing an unstable order of horizontally stacked buttons has been fixed. #780. Thanks to @RazorClam for the contribution! PR #1137

• Select card options language fix:
  Select Card options now correctly display in the default language. #1040.

• Synced select sub-button states:
  Select sub-button states are now properly synchronized when changed elsewhere in the interface. #1058.

• Pop-up title is now hidden:
  If a title is added to a pop-up (vertical stack) in the editor, it is now hidden. #1003. Thanks to @MrBearPresident for the contribution! PR #1089.

• Fan modes issue:
  I should have resolved an error when HVAC are in dry mode. #987.

• Media player custom style issue:
  Resolved an issue where modifying the background color in .bubble-media-player caused rounded corners to disappear. Thanks to @MrBearPresident for the contribution! PR #1015.

• Entity picture issue:
  Fixed an issue where some entity_picture URLs were not displayed.

• Volume slider issue:
  Closing the volume slider in a media player card now behaves as expected. #994 - PR #1001 by @MrBearPresident.

---

Bubble Card news

---

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

---

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Thank you so much for being part of this amazing community, your support will always makes a huge difference!

---

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

---

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Release Bubble Card v2.3.4 · Clooos/Bubble-Card

[Balucanb]

Perhaps I have missed but I would like to make everything transparent for this card, I searched in this thread and have tried a few examples but no luck. is it possible to make all of transparent? Here is the current yaml any help/answers are appreciated.

cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.attic_temp_humid_temperature
    name: Attic
    show_state: true
    card_layout: large-2-rows
    sub_button:
      - entity: sensor.attic_ac_temp_humid_temperature
        name: Attic AC
        show_name: true
        show_state: true
        show_last_changed: true
      - entity: sensor.attic_ac_moisture_temperature
        name: AC Pan
        show_name: true
        show_last_changed: true
        show_state: true
    scrolling_effect: false
    show_attribute: false
    show_last_changed: true

[RonOnline (Ron)]

You mean like this:

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.attic_temp_humid_temperature
name: Attic
show_state: true
card_layout: large-2-rows
sub_button:
  - entity: sensor.attic_ac_temp_humid_temperature
    name: Attic AC
    show_name: true
    show_state: true
    show_last_changed: true
  - entity: sensor.attic_ac_moisture_temperature
    name: AC Pan
    show_name: true
    show_last_changed: true
    show_state: true
scrolling_effect: false
show_attribute: false
show_last_changed: true
styles: |-
  .bubble-button-card-container {
  background: none !important;
  }
  .bubble-icon-container {
    background: transparent;
  }