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

Hello everyone,

I really like the bubble card and I’m experimenting with it now. I would like to put a popup button in a popup window. This works very well, but the second popup card is not fully visible. Is there a way to reduce the height of a popup window?
see pictures


Here is the YAML from my weather card:

Damn Cloos,

looks realy great.

Please let us take part in the Yaml :slightly_smiling_face:

Thank you for this great work.

Hello everyone !
Can anyone tell me if it is possible to do it or not?

Hi,

I have an issue with pop-up
on editor mode it looks like that:


on the Dashboard it looks like that:

Sometimes the popup have no issues and sometimes the brightness bar have some bugs.
I’m using the latest beta of bubble card
But it happens always also with the stable versions.

any idea how to fix it?

Thank You!

Hello guys,

this is my first time here.
First of all I have to say, absolutely world class, what you and especially ‘Cloos’ have mastered here. I am thrilled!

I have now brought my house into Home-Assistant myself and started with the dashboard.
I have questions about this, maybe someone can help me.

I would like to add small numbers or graphics at the bottom of the Horizontal buttons stack that report the status in the room, e.g. how many people are currently in the room or how many lights are on etc…

In the screenshots attached I have drawn it roughly as I would like it to look.

Can anyone help me here? Thank you very much!

Have a nice weekend! Enjoy the sun, I hope it shines with you as much as it does with us :slight_smile:

I can only upload one picture per post, so unfortunately a second post. Sorry!

Even when I use your code I still get an error. I think it is something to do with how I have my Weather_forecast_daily sensor set up along with my lack of understanding how this code actually works!

Thanks for an amazing card! It has really improved flexibility.

I’d like to ask if it is possible to change the border radius.
I have changed this in Themes, but without success. All other cards accept the change, but not Bubble-card.

Is it possible to do this?

Many thanks.

Very nice, can you share your code? I like the temperature card how did you do that?

I am trying to change the background-color of the sub_button icons. Does anyone manage to do that? Thanks

Can’t help you… but I‘m looking for similar modifications: Change size and font-size (entity-state) of the sub-buttons

If it is all at the same time you have css here

You can change that in .rows-2 .bubble-sub-button-container or in .rows-2 .bubble-sub-button

In custom styles

Thanks for your help! … but I‘m not sure how to do it… do I insert the following code into custom styles?

  .rows-2 .bubble-sub-button {
    font-size: 16px !important;
  }

… as that doesn‘t work…

Edit: the following code worked:

.bubble-sub-button {
font-size: 16px !important;
}

O

strange, but if we set the service correctly manualy in editor mode, then after, it is working again and we can modify it in the web ui!

Il also seams that the show_name: false option do not work for main button for switch and state button

is there any way to keep all my popups in a separate view and trigger them from the main view ? Im only being able to trigger popups as long as they’re on the same view of the trigger, I tried navigate: ‘popups#lights’ sometimes it opens ‘popups’ blank view, others it opens the ‘lights’ popup but without any animations effects (it just appears) and closing just takes you to the blank ‘popups’ view

Hi, I just finish my first bubble-card dashboard

Some captures :slight_smile: :


Home page with some shortcuts and global view
1 page per flour. We can even do 3 rows of sub buttons !


View on the light and shutter views

Many thanks !

Evolutions that could be nice :

  • tap button on separator icons
  • possibility to update background… of a specific sub button
  • use by default layout of theme
6 Likes

2 things iv got to mention.

  1. Call service doesnt work for button type: state & for subbuttons
  2. Is it possible to get conditional sub buttons & Buttons? This would be really handy and really great!

If I want to change the background colours of the sub buttons dependant on their state, is there a way to do this?

Anyone know why the content of this pop-up card is going on top of the header when scrolled?

The background of each slider is transparent, but even if I remove that it covers up the “Lights” gray header bubble at the top when scrolled.

I also have a sticky nav bar at the bottom of my main dashboard view (this is all on my main dash view) and it gets covered up by the Lights pop-up.

My Thermostat pop-up card seems to be fine in both respects:

Not sure what I’m doing wrong. Here’s my code for the Lights one if it is helpful. Thanks for any help.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    bg_color: '#e6e4da'
    hash: '#lights'
    name: Lights
    icon: mdi:lightbulb
    bg_opacity: 100
  - type: custom:mushroom-title-card
    title: ''
    subtitle: Press and hold a room for more controls
    alignment: start
    card_mod:
      style: |
        ha-card {
          margin-top: -10px;
        }
  - type: custom:big-slider-card
    entity: light.master_bedroom
    name: Bedroom
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon: mdi:bed-empty
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0,)
  - type: custom:big-slider-card
    entity: light.living_room
    name: Living Room
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon: mdi:sofa
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)
  - type: custom:big-slider-card
    entity: light.hallway
    name: Hallway
    icon: mdi:square-outline
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    colorize: false
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)
  - type: custom:big-slider-card
    entity: light.kitchen_lights
    name: Kitchen
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon: mdi:food-fork-drink
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)
  - type: custom:big-slider-card
    entity: light.main_floor_bathroom_light
    name: Bathroom
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon: mdi:toilet
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)
  - type: custom:big-slider-card
    entity: light.basement
    name: Basement TV Area
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon: mdi:television-classic
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)
  - type: custom:big-slider-card
    entity: light.office
    name: Office
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon: mdi:desktop-tower-monitor
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)
  - type: custom:big-slider-card
    entity: light.patio_string_lights
    name: Patio
    icon: mdi:string-lights
    show_percentage: false
    height: 60
    bold_text: true
    color: orange
    icon_color: orange
    border_radius: 20px
    border_color: green
    background_color: rgba(0,0,0,0)