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

[Cloos]

What version do you see in the Bubble Card editor when you are on your phone? (You can see it in the footer)

Edit: Have you installed it with HACS?

[neives (Ricardo Neiva)]

Hi,

Is it possible to change the colour of a sub-button icon based on state of an entity?

If the climate state is cool, the icon will change to snowflake with this code:

${subButtonIcon[0].setAttribute("icon", hass.states['climate.a_c_quarto'].state === 'off' ? 'mdi:fan-off' : hass.states['climate.a_c_quarto'].state === 'cool' ? 'mdi:snowflake' : hass.states['climate.a_c_quarto'].state === 'heat' ? 'mdi:fire' : 'mdi:fan' )}

But I also want to change the icon color to blue. Is it possible?

Thank you

[Cloos]

You can add this in your custom styles, I will add this example in the documentation:

.bubble-sub-button-1 > ha-icon {
  color: ${hass.states['climate.a_c_quarto'].state === 'on' ? 'green' : 'black'} !important;
}

[wr3ckt]

Thank you!

[neives (Ricardo Neiva)]

Awesome!

Thanks

[Woody1]

I am loving this card and using it in my dashboard. One question I have though is how do you change the 1 day to go and 0 days to tomorrow and today?

[FarleighRed]

I use the Waste Collection Service Integration which then means I have some sensors set up that get the information directly from my local council.

GitHub - mampfes/hacs_waste_collection_schedule: Home Assistant integration...

[hazio]

I’m currently hiding the icon for the seperator card using icon:none, but how do I remove the space where the icon was so the title aligns left?

Alternatively, I could use a Title card as a workaround.

[Krona]

So im using the bubble card pop-up as a pop-up menu for my views which looks really good, but is there a way to get rid of the button up to the right which is unnecessary since i use the pop-up button to close the menu?
I also wonder if its possible to change the opacity of the buttons in the menu, and the background of it.

[amstermk]

To get rid of the “X” use the following code in the custom styles section of the popup:

.pop-up > :first-child 
{ display: none !important; }

[Krona]

That fixed it, thanks!
Another thing that bothers me… I changed the font size for the separators i use as headers for every view, which would look esthetically good if it wasnt for the text being cut off. Any way to expand the text-field to prevent it from being cut off like this? Or resize the card height to prevent it from happening?
You can see it in the g in “Belysning”

[janstadt]

@Cloos any ideas here on having a media player be in the top level of a popup?

[mloTek]

Hi guys,

can anybody help me with the following… I would like to set a background color for my icon in the header. What’s the card-mod code for this? I can not figure it out. Thanks.

Like here:

[amstermk]

This should work:

.bubble-icon-container {
    background: rgb(230, 128, 41); !important;
  }

[amstermk]

Your can try this:

.bubble-name {
    height: 24px
    }

Or otherwise have a look at the styles.ts section of the separator card:

https://github.com/Clooos/Bubble-Card/blob/aa7684a61454a4c24da01457ca9c4ead24d5ca49/src/cards/separator/styles.ts

[Seexelas]

Hi everyone,

How can I override the orange when a switch bubble is on please ?

I used this from the github :

  .bubble-button-card-container {
    background-color: ${state === 'on' ? 'green' : 'red'} !important;
  }

It goes green but directly after go orange.

Thanks for the help,

Alexis

[amstermk]

… turn off “show background when entity is on” in the button settings…

[maurizio53 (Maurizio Fabiani)]

I am interested to use bubble-card like you… can you please share your code so i can get ideas?

[Seexelas]

Sorry for my noob question, but where is it ? I can’t find it… thx and sorry

[amstermk]

Made a screenshot: