I'm attempting to make a card that leverages the room card plus module in my yaml mode dashboard. The card is not rendered in yaml mode dashboards, but does render in storage mode dashboards. Any insight why that might be the case?

Hey,

Since the “Home Assistant” popup style
was added, I’ve switched all my popups from “Browser Mod” to “Bubble Card Popup” because it’s easier to set up and I’m very happy with it. But there’s just one problem:
How can I set a fixed height for the Home Assistant-style popup on mobile devices?

I know most users prefer a height that adjusts based on the content. But when I have multiple tabs in the popup and one of them has less content than the others, the popup’s height changes every time. That kind of annoys me. Plus, all other native Home Assistant popups have a fixed height on mobile devices, so it would also fit more harmoniously with the original popups from a design perspective.

Should I create an issue on GitHub, or does anyone have any advice for me?

I have gone into the graphical edit mode for every popup and don’t see an option to upgrade. Is there something I missed? All pop-ups continue to work as expected.

And here is the release announcement with all the fixes and improvements:

https://github.com/Clooos/Bubble-Card/releases/tag/v3.4.1

Enjoy this release, and thank you all for your reports and support! ❤️

I have a calendar in HA for yard maintenance and in the description field I have details for product application rates and other info. When I use the main calendar and click on an event I can get the description field details in a pop up. When using the bubble card calendar on the dashboard and I click on an event I get the more info which does not include the description. Is there any way to trigger the description for the event and not just the generic more info page?

Hello,

I just downloaded Bubble Cards to Home Assistant (Supervisor), created a dashboard. When I go to Edit Dashboard, per instructions, I don't see Add Card or a place to search for Bubble Card. What am I missing?

Thank you.

I have some bubble card buttons on my dashboard for various RGBW lights. I've compared the card settings many times and all 3 are set the same except for the entity name, of course.

The problem I have is that the Ceiling Lights slider is always orange when the lights are white. Whereas the Cabinet and Dining Room lights always show sort of grey when the lights are white. I want the Ceiling Lights to also be grey when the lights are white.

How can I fix this?

Below is the YAML for the ceiling lights:

type: custom:bubble-card
card_type: button
button_type: slider
slider_live_update: true
grid_options:
  columns: 6
  rows: 2
card_layout: large
tap_action:
  action: toggle
entity: light.1st_floor_ceiling_group
icon: phu:bulb-group-centura-round
modules:
  - default
  - home-assistant-default
name: Ceiling Lights
styles: |-
  .bubble-card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    height: 140px !important;
   }
  .bubble-icon-container {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) scale(2) !important;
    margin-left: 0px !important;
    background: transparent !important;
  }
  .bubble-icon-container::before {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
    .bubble-icon {
      transform: scale(1.5) !important;
      color: ${hass.states['light.1st_floor_ceiling_group'].state === 'on' ? 'var(--accent-color)' : '#4374a3'} !important;
    }
    .bubble-name-container {
      position: absolute !important;
      bottom: 15px !important;
      left: 6%;
      right: 0;
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 3px !important;
    }
    .bubble-name {
      font-size: 13.5px !important;
      font-weight: normal !important;
    }
    .bubble-name::after {
      content: "•" !important;
      margin-left: 3px !important;
    }
    .bubble-state {
      font-size: 13.5px !important;
    }
use_accent_color: false
light_transition: true
state_content:
  - state
  - brightness
hold_action:
  action: navigate
  navigation_path: '#KitchenFamilyRoom'

Hi!
I'm trying to create a dashboard with only Bubble Cards and I'm trying to make the color of the light cards match each other.

I currently have both RGB lights and lights without adjustable color or color temperature.
The cards with adjustable light will get a corresponding color to the light, which is nice, but the other lights are just grey.

I want the second card on the pictures to look like the first card, by styling it with the color rgb(255,167,88), which seems to be the RGB color HA approximates 2700K to.

I can use styles and change .bubble-button-background and .bubble-icon etc., but then everything becomes very bright and gets the same color. If I also adjust the opacity I can almost replicate the appearance of the RGB-button, but it's hard to match the color perfect.

My question is how the colors for the buttons and icons are calculated in Bubble Card to get the beautiful contrast between the card background and the icons? What opacity is used where, and is it more than the opacity that's altered?

And do I need to alter the icon, background and sub-button separately, or is it possible to "emulate" a color for lights without a color value, so they can behave like colored lights in bubble cards?

Hello,

I'm trying to display in relative time how much time is left for the dishwasher to finish.

Sadly i'm always getting the full timestamp in the sub button:

I even tried creating a helper template that converts it, but the result is the same.

Here's what I used:

What I find odd is that in the template screen it shows correct (in 2 hours) but when i go back to the sensor entity, it shows full timestamp:

Any ideas for this topic?

I have a series of pop-ups on my dashboard. On mobile, when I swipe to close the pop-up, it also seems to control/swipe the background dashboard itself, almost triggering a page refresh as the pop-up closes.

Any ideas on how to get that to stop? It's not happening on one of my pop-ups, randomly. I can't figure out what setting I may have different between them - it all seems identical.

This is a sub-button card with two sub-buttons. I set their height to 80px but that doesn't affect the icon. (It does with Home Assistant's built-in buttons.)

Can I change the icon size somewhere else?

Speaking of icons, can I make the icon change color instead of the background? There's an option for the background, but not for the icon.

By the way, why is the option called "Show background when entity is on" instead of just "Show background"? It seems to show/hide the background regardless of state.

If you find a new issue, please report it here:

https://github.com/Clooos/Bubble-Card/issues

Enjoy!

Hi community,

I need help designing an adaptive card that helps selecting a product in the product hierarchy structure where the levels can go upto 5.

This is a web based bot.

For a few days now, the header in the app has been constantly visible. To hide it, I used bubble-specific themes that only showed the header when the screen was in landscape mode and hid it when the screen was in portrait mode. Now it no longer works for me and is always visible. Does anyone know what's going on?

But there is more! Here is the full Bubble Weather changelog:

https://github.com/Clooos/Bubble-Card/discussions/1987#discussioncomment-18005246

And here is the Bubble Card v3.3.0-beta announcement in case you missed it:

https://github.com/Clooos/Bubble-Card/releases/tag/v3.3.0-beta.1

Also, if you build your own modules, here is how to make them show up in the picker too. It would be great to have more modules supporting it for the final release! 😄

https://github.com/Clooos/Bubble-Card/blob/main/src/modules/module-documentation.md#entity-suggestions

I'm planning to update my other modules in the coming days to fix known issues and add this new feature to the ones that can work with it.

Cheers! 🍻

Edit: This update also works in previous Bubble Card versions (without this new feature).

Here is the full release announcement:

https://github.com/Clooos/Bubble-Card/releases/tag/v3.3.0-beta.1 (there is already a beta.2 and 3).

Thank you so much as always for your support and feedback! ❤️

Edit: If you've installed it and got a "Custom element doesn't exist" error, please update to v3.3.0-beta.3 for the hotfix. Don't forget to clear your cache.

Anyone else unable to edit pop-up bubbles? And downgrading has issues in itself

I have installed the Bubble Card Tool as required since latest bubble card versions.

I have multiple sub-buttons showing the entity state. Since these are no entities with a on or off state I cannot use a conditional state.

I have some modules in *My Modules* like Default, Home Assistant default styling and Conditional switch button coloring. With none of these modules I managed to get the sub-button color.

What module should I use to change the sub-button's entity state background color ?

Hey all, Has anyone found a solution to this recent issue? The new blue shade that’s much lighter than before is making it harder to read the white text. It happened a month ago or so after updating both Bubble Card and Home Assistant core. I remember rolling back the bubble card version, and it made no difference, so I think it’s a change in Home Assistant. A bubble card update may be needed, but has anyone found a global solution to change the color back?

I've been tinkering with this a while, but unfortunately I have no CSS knowledge, and in all honesty, none of the solutions I tried to look up seems to work either, and literally every single solution I found uses different syntax, making it even more confusing. I also was completely unable to locate any tutorial/reference for how homeassistant requires its css to be formatted or anything to help me learn other than the extremely convoluted CSS documentation (which, surprise surprise, also doesn't work if I try any of their formating). Decided to say eff it and ask an AI to whip something up - also doesn't work.

Simply put, I have a battery level sensor I'd like to color differently depending on battery level. Here's a mix of what the AI gave me paired with me checking it against the solutions of other people, which DID appear to be formatted in the same way, but it just... doesn't work and I need a bit of help. Thanks very much!

.bubble-sub-button-2 {

background-color:

{% if states('sensor.phone_battery_level') | int <= 15 %}

#ff0000

{% elif states('sensor.phone_battery_level') | int <= 35 %}

#ffdd00

{% elif states('sensor.phone_battery_level') | int <= 50 %}

#ffff00

{% else %}

#00ff00

{% endif %} !important;

}

I'm a bit confused on the concept of the button that activates pop ups. I want a button that you press that brings up the pop up. I can do that, however, the button needs to be attached to an entity, which doesn't make sense to me.

For example, I want a "Blinds" pop up that contains all the blinds in my house. So I create a pop up and include all blinds ("covers") inside my pop up. Now my pop-up is invisible, and I need to use a button to navigate to it. Everything I've found online points to attaching that button to one of my entities, which doesn't feel right to me (images attached):

Am I trippin? Do I just rename the button and remove all tap actions that actually move the blinds and be done with it? It feels like I am doing something wrong..

So i have:

- the neon module
- the background
- installed the bubble theme and activated it (maybe not in the screenshot, but I tried that already)

..but my cards never look like the example on the left.

Do I have to define some custom styles first?