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

I would love to use this, but I just cannot get the styles css working consistently. Every time I reload the dashboard the pop-up looks different. Anyone else having issues with styles?

Hi, is there a video tutorial for this?
I’m struggling just to make a simple popup with multiple buttons, sometimes they don’t show up at all

Hey

Im just asking because im trying to learn, what is the key difference between this and browser_mod popup. Im using that today but have started to set this bubble card up. But im kind of worrying about all the extra code that needs to be on the dashboard.

The original Kiosk Mode is old and not maintained. I use the fork by @NemesisRE and it is regularly updated (within the last three days as of this message.) It works perfectly and is better than any card_mod or browser_mod capability that I’ve tried. It is one of the more common recommendations I give out in the frontend channel on Discord.
EDIT: Posted this message before realizing someone else has pointed out the same thing.

1 Like

Hi,
There is a detailed setup video from BeardedTinker.

4 Likes

Hey sorry quick question for you. Am i smoking crack or is card type custom not available through the GUI and only through Yaml?

Yes it’s only available in YAML for now.

Any eta for this ? :stuck_out_tongue:

I was wondering if I could ask again for some feedback on my question here.

This looks great, but I am having some issues getting it installed.

Added via HACS custom repository, added to my resources.yaml, and created a quick dashboard (yaml mode) and but I just get the error that the custom element doesn’t exist,
I have redownloaded, restarted multiple times with the same result.

Am I missing something?

image

Hi! Have you tried the default styles template? It’s documented here: Bubble Card - Styles template

You should not have to do anything in resources.yaml, just installing it with HACS should be enough. But you can take a look at this video:

YouTube - Pop-up cards with Bubble Card in Home Assistant

I tried. but I could not find a way to have three different colors based on two different states. Is that possible using the styles template? If so, I will see where I went wrong and try again. :slight_smile:

I’m sorry I’ve answered without reading everything, I’ve never tried changing the icon with templates and I don’t know if it’s possible right now.

I will try that but I’ve received so many questions since the project’s release and it’s taking a lot of time to answer them all :sweat_smile:

No problem at all. I know you are doing your best and I am very thankful for your efforts and attention. I am not trying to be demanding. I was just wondering if someone already had an easy answer. This is not urgent or important :slight_smile:

I have put in a thank you donation to show my appreciation for your hard work.

1 Like

hello,
I’m using the captuccin latte theme and currently the bubble card button has no background when either on or off.
Can anyone please help me with the css code to add to the theme file?

I added this to each button but that’s only for the static background and not on/off plus don’t want to have to add it to every single button.

 styles: |
      ha-card > div > div > div { 
      background: #EFF1F5 !important; 
      }

Any help is greatly appreciated. Thank you

Hello,
i’m starting with HA
i just installed Bubble Card wich looks fantastic, But unfortunately, i got a problem that i can’t solve.
When trying to add a pop up card, it completely freeze my HA with an error that occurs 36750 times :sweat_smile:.
Here is the error i got:

'Logger: frontend.js.latest.202310050
Source: components/system_log/__init__.py:300
First occurred: 16:34:05 (36750 occurrences)
Last logged: 16:34:31

Uncaught error from WebKit 605.1.15 on Mac OS 10.15.7 TypeError: null is not an object (evaluating 't.classList') i (/hacsfiles/Bubble-Card/bubble-card.js:1:17014) /hacsfiles/Bubble-Card/bubble-card.js:1:17350

does anybody got this problem before and know how to solve it?
thanks

Congrats, really good good job!!!

Sorry I have another question. For the love of me I cannot figure out how to color the horizontal stack buttons… I’ve looked at the style guide and I think I’m doing g it right but doesn’t work. I’m no smart person, typically use GUI with limited Yaml.

I would like to color the buttons and remove the line boarded if possible. Here is my sample code.

I assume I would need to put the “style” after every button?

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#Lights'
1_name: Lights
2_link: '#Security'
2_name: Security
1_icon: mdi:lightbulb-group-outline
3_link: '#media'
3_name: Media
2_icon: mdi:shield-outline
3_icon: mdi:music-circle-outline
styles: |
  .switch-button {
       background-color: ${state === 'on' ? 'blue' : 'red'} !important;
       }

Hi,

I’ve added a button on a pop-up that opens another pop-up. I would like to open the previous pop-up when I close the secondary pop-up.

Is there a possibility to open a pop-up when closing another pop-up?