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

Hi,
I solved this by changing the precision parameter for the entity:
image

I already did this but this didn‘t worked.

Is there no way to turn of the vibration when pulling a slider, and making it impossible to pull it when the entity is off? It’s a big issue right now that lights gets turned on by mistake when i just want to scroll down the view on my phone.

Also, does anyone know if you can make the slider gradient?

Hello
Can someone tell me please which Color theme is here used ?

IMG_6495

Its the Bubble theme

1 Like

How do I move the text down in the separator, so that it looks like it actually connected to the items below it?

image

thank you i got it :slight_smile:

First of all, I really like this HACS, it’s perfect!!!

How do I change the color of the button when opening the popup?

Hey Cloos,

I’ve just enabled the bubble theme and it looks awesome! Good job!
Is there a way to force the status bar and the bottom bar of the app to have the same color?
With other themes their colors match with the theme’s color.

Greetings,
Lukas

I noticed that the buttons keep blinking… when the popup related to it is active.

It would be nice to be able to choose a color or even a gradient that keeps passing.

Hey! Has anybody managed to recreate minimalist-style room card using Bubble-Card?

This one is actually made with button-card, and I wonder If it possible to make something similar with Bubble-card styles

4 Likes

I need help! How can I make these cards smaller? For example, I would like the Wifi card to be smaller… I would like something like the second image.

Something like that!

image

1 Like

Hello,
someone knows a way to create a background box behind the bubble cards?

I use the bubble cards inside vertical-stack card.

Just checking if anyone had any thoughts on this?

How have you done your person entities?

Hello. :slight_smile:

Did anyone use the ps5 mqtt addon together with bubble card? ^^
Theres an attribute which i want as entity picture of the card.

Anyone could help me?

dumb question but is there any way to have an entity picture appear in a sub button (like in the separator)?

parseFloat(hass.states['sensor.gridimport_wh'].state).toFixed(1)

this is how I do it on mine.

2 Likes

I would like to define some CSS variables for the bubblecard in my own custom theme, and use them inside the bubble cards…

Now, how should I do that? When trying it seems the scope of the CSS variables which I declare inside a theme, do not have the scope to be applied inside the bubble card classes?

So… In my_theme.yaml I declare the following variables:

  --fuchsia: 231, 60, 126;
  --fuchsia-light: rgba(var(--fuchsia), 1);

And in bubble card styling section I do the following:

type: custom:bubble-card
card_type: button
button_type: slider
entity: light.my_lights_group
styles: |-
  .bubble-button-card-container {
    /** --fuchsia: 231, 60, 126; */
    /**--fuchsia-light: rgba(var(--fuchsia), 1); */
    background: var(--fuchsia-light) !important;
  }

Offcourse I set the theme inside my preferences, reloaded all yaml-code, reloaded the theme and cleared the browser cache.

I also tried:

type: custom:bubble-card
card_type: button
button_type: slider
entity: light.my_lights_group
styles: |-
  .bubble-button-card-container {
    /** --fuchsia: 231, 60, 126; */
    /**--fuchsia-light: rgba(var(--fuchsia), 1); */
    background: 'var(--fuchsia-light)' !important;
  }

But none of these work unfortunatly. Any idea why not and how to fix this?

Hi guys, can someone help me with coloring my sub-button conditionally?

I created a template sensor which gives me True or False depending on my solar production and consumption. If the solar production is greater than my consumption the sensor state is True, otherwise false.

Now I want to color a sub-button depending of the state of this sensor. What I tried so far:

  .bubble-sub-button-1 {
    background-color: ${
    hass.states['sensor.pv_uberschuss'].state == true ? "var(--good-color)" :
    "none"
    } !important;
  }

Unfortunately the condition does not work and the sub-button nevers gets colored.
What is wrong here? How can I compare a state to a boolean?

Thanks in advance