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

Thank you, that solved it. Do you know how to override the default theme of Bubble Card? I want to incorporate the custom Octopus Energy Rate Card But it’s coming out this like:

Where I want it to come out like the default of the octopus card (it’s colour coded based on price)

I don’t have Octopus Card to test but as far as I know Bubble Card does not add any theming to other cards.

Do you have a non-default theme for your entire Lovelace view?

Thank you again. I managed to resolve you, you need to add a horizontal stack first, then add the custom card within horizontal stack. Then the custom card’s theme will output correctly. If you try add the custom card before doing a horizontal stack, you get the bubble card theme issue as per my screenshot.

1 Like

First of all, I love bubble-card, and your dedication to work-out the bugs! It took my dashboard to the next level.

I was just wondering if there’s a way around the contents of pop-ups appearing upon page load? I tried the optimized option, but it has the same behavior.

1 Like

Hi :wave: can you assist me , share your code :pray:

Great collection. I mainly use the popup feature to display additional room controls and information.

Question: Is it possible to darken the page background when the popup is open? Right now, I can only see options to change the background within the popup itself. What I am looking for is a way to darken / blur the page background, when a popup is open. It is a typical popup/modal behaviour. Looks weird on PC and tablet without it.

1 Like

I would like to change the background colour of the icon that’s currently shown in white. I would also like to change the grey if possible?

type: vertical-stack
cards:
  - type: custom:bubble-pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:silverware-variant

image

a little request for the buttons (in the situation of a light)

can you make it possible to set the color of the light as the backgroundcolor from the GUI? So you don’t have to use the yaml to get the color state? :slight_smile: makes it a bit easier…

Keep up the good work! :wink:

I’ve been trying to get controll of the full background of the pupup, but only gets it to work inside the different cards with card-mod.
How do I set css within the popup it self?

Just wanted to say thanks for the hardwork for this front end. @Cloos
I have finally gotten to a stage where I have something half decent with my skills.

3 Likes

OK, I finally figured:

type: custom:bubble-card
card_type: pop-up
hash: '#pop'
name: test
styles: |
  #root {
    background-color:  red;
  }
1 Like

Hi, have you tried with button_type: slider ? With this it will automatically take the color for the background.

1 Like

oh wow… i feel stupid right now… :flushed: thanks for the reply!

this is so cool. can you share your yaml at all?

My partner and I are using phones with varying screen sizes (an iPhone 15 Pro Max and an iPhone 14 Pro). We’ve noticed that with our current theme, the popup appears off-center. Is there a method to center the popup differently based on the screen size, or to have it automatically adjust to be centered?

I’ve tried the ‘Margin’ option but it appears off-center to one of us.

Its possible to add limit on the height in popup or option to stop scroll

I seem to have issues with the theming of the bubble pop-up, the background appears white instead of the default dark one. I use the default Bubble theme, but every theme i use has this behaviour. Inspecting the DOM show me a white style attribute for the background with an alpha of 88%. Any idea what is causing this?

Have you tried refreshing the page after changing the theme?

I did, emptying the cache also doesn’t help. I rebooted the system, but to no avail. Can the value of this line be altered on my side: --bubble-pop-up-background: rgba(255, 255, 255, 0,88);

Changing this doesn’t really help, because the gradient on top stays white (first-child::after linear-gradient background also has alpha of 88%)

Are these the normal values? Or is there something messing up my css?

You can change the background color in the editor, but I don’t understand how you can have this issue on all themes.

My only guess is that you might already have a background color in your pop-ups YAML?