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

Hi, this is normal, there is a breaking change in the latest beta but you can get it back. It’s always important to read the changelogs, even more when testing the betas, here it is:

You can also find the link to the changelogs when you create a Bubble Card in the editor, the link is below the animated GIF.

Just saw the breaking change list :man_facepalming: sorry for the extra noise!

I have been struggling with two items of the selector and I seem to not find the correct variable for this:

1) I want to left align the text of my dropdown which is embedded in a button

card:
custom_fields:
    source:
      card:
        type: custom:bubble-card
        card_type: select
        entity: input_select.tv_source
        show_attribute: false
        show_state: true
        show_name: true
        show_icon: false
        attribute: friendly_name
        force_icon: false
        scrolling_effect: false
        styles: >-
          .bubble-select-card-container {
          background: transparent;
          }

          ${card.querySelector('.bubble-name').innerText =
          hass.states['media_player.bedroom_tv'].state}

It looks like this:
image
With space to the left and the text seemingly centered.
nevermind this. it was .bubble-name with text align.

  1. how do I change color and size of the dropdown button itself - and ideally, is there a way to move the button to the left instead of the right (like it is right now)?

  2. Using

${card.querySelector('.bubble-name').innerText = hass.states['media_player.bedroom_tv'].state}

it shows the state of one tv. Since I have it included in a button card template is there any way to make the entity a variable or change it based on another sensor state similar to

${state === 'on' ? 'blue' : 'red'} !important; 

Thanks for your help.

Have added back the backdrop_blur and it didn’t seem to make a difference :frowning:

Have cleared cache etc, it seems to happen when I upgrade to v8.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#ben"
    name: Ben
    entity: person.ben
    margin: 7px
    margin_top_mobile: 0px
    bg_color: var(--dock-background)
    bg_opacity: "80"
    bg_blur: "10"
    styles: |2-
        * { 
          font-weight: bold;
        }
        .bubble-button-card-container {
      /*    background: none !important; */
        }
    show_header: true
    close_action: {}
    backdrop_blur: "10"
    card_mod:
      style: |
        #header-container {
          background-color: transparent;
          div {
            background-color: transparent;
          }
        }
        .close-pop-up {
          background-color: transparent;
        }
        .icon-container {
          color: var(--google-red) !important;
          background-color: transparent;
        }

v7 works fine on 2024.11.3

I don’t know what is happening here, but will take a look at this, thanks for the feedback!

Edit: I also don’t understand why you have a mix of default custom styles and card mod styles, but that’s totally unrelated.

Edit 2: I’ve just tried and I’m unable to reproduce this with your YAML, is the issue with the backdrop behind the pop-up or with the pop-up background itself? Also, have you added the modified backdrop blur to the first pop-up in your view order?

2.a) For the color of the dropdown button:

.bubble-dropdown-arrow{
  Background: red;
}

2.b) For the placement. Everything is possible but this would be loads of work. Checkout: CSS Layout - The position Property if this really needed for you.

3.) Conditional text:

${card.querySelector('.bubble-name').innerText = state === 'on' ?  hass.states['media_player.bedroom_tv'].state : 'Off' }

For more examples checkout: Clooos/Bubble-Card Share Your Custom Styles Templates And Dashboards · Discussions · GitHub

2 Likes

I can’t seem to hide the “unavailable”

type: custom:bubble-card
card_type: button
sub_button:
  - entity: sensor.washer_time_remaining
    show_state: true
    show_name: false
    show_background: false
    show: |
      [[[ return entity.state !== 'unavailable'; ]]]
  - show_background: false
    show_state: true
    entity: sensor.laundry_thermostat_temperature
button_action:
  tap_action:
    action: navigate
    navigation_path: "#Laundry"
name: Laundry
icon: mdi:washing-machine
entity: light.office
styles: |-
  ${subButtonIcon[0].setAttribute("icon",
   hass.states['sensor.washer_time_remaining'].state === 'unavailable' ?
   '' : 'mdi:progress-clock')}
  ${subButtonIcon[0].parentNode.querySelector(".state").style.display =
   hass.states['sensor.washer_time_remaining'].state === 'unavailable' ? 'none' : 'block'}

Screenshot 2024-11-26

It will show the remaining time if the washing machine is running. I used the following code to hide the icon when unavailable, but have no luck with states or text.

  ${subButtonIcon[0].setAttribute("icon",
   hass.states['sensor.washer_time_remaining'].state === 'unavailable' ?
   '' : 'mdi:progress-clock')}

Thanks :slight_smile:

Hey

In this example ([Example] Timer-cards with round progressbar. · Clooos/Bubble-Card · Discussion #937 · GitHub), I hide a sub-button.

This I do simply by adding the “hidden” class.

${(() => {if(hass.states['timer.help_house_testtimer'].state != 'active'){card.querySelector('.bubble-sub-button-2').classList.add("hidden")}})()}

I hope this gives you a direction.

1 Like

Thanks mate, it works like a charm.

Thanks for your reply, to me and everyone else!

How do I amend the theme please? I’ve looked at the bubble theme and can’t see bubble-accent-color within it. I assumed I’d just change the colour there.

It is not in there.
Not all variables are included in @cloos his theme.

You can just add it or make a new one.
The values I use for the theme, are also not in @cloos his theme.

It does not have to be much.
image

Thanks a lot, but i’havent get it work with cover bubble card…
Maybe it will be included one day in the card

I really doubt that it ever will be included as a default.
But you can always make a feature request.

Check this example for the full code. It should just work.

1 Like

Hi everyone!

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

Today I have an announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates to help you get even more out of Bubble Card. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons, like little sub-buttons that can display icons based on any entity state. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Here is the link:

Thank you so much for being part of this amazing community, your support will always makes a huge difference! :heart:

P.S.: The final v2.3.0 is almost done, thanks again to all the testers!



5 Likes

Can I do this for sub-buttons too? And if so how do i get the state of those sub-button entities? it seems to only be getting the state of the main button entity. Thanks in advance!

The icon color is in the examples in the documentation:

Is there a way to close the popup on a action? For example i have my own header and want with a tap on the x to close the popup

Hi! Yes you can, just use this tap_action:

    button_action:
      tap_action:
        action: navigate
        navigation_path: "#"
1 Like

Could you post a screenshot?

Have a look here: ⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch - #1877 by MrBearPresident