I am seeing this as well spent the last 10 days getting my dashboard looking good and then this morning woke up this morning to find most of the styling elemats not working on more. Have you managed to resolve?
Found the answer on the card mod page, bit of a pain making all the alterations but it is working.
I 
bubble card.
I think the design is even better than commercial products.
It’s really taking my HA to the next level.
Appreciate all the effort by @Cloos
1 Like
Thanks a lot, @mattmon!
I have a question for everyone. I’ve just updated HA to the latest version and I’ve noticed that with the latest Bubble Card beta, the regular mode of the pop-ups behaves like the optimized mode, at least on my test config. I can’t see any pop-up content being shown while the page is loading. If this is true, it would be awesome to see the optimized mode becoming obsolete since it requires more steps to work after every update.
Can someone confirm this? 
Can confirm. No pop up during page load
I do have a pop up configured, and it is functional as expected.
I never installed optimized mode.
Bubble card 1.6.0-beta 4 via HACS on HA 2023.12.4
Hey @Cloos,
I just updated HA and also to the beta version of your card (Beta 4).
I can confirm that the regular popup seems to be smoother. This is much more evident on the Sonoff NSPanel Pro I’m using like a thermostat (the hardware isn’t that good, so every optimization of your card is really appreciated 
).
I also didn’t noticed any popup during the page loading.
Can’t wait to see more card-type implementation 
Does anyone know if it’s possible to use the hash on URL in the notification click ?
service: notify.mobile_app_phone
data:
title: "Motion Detected"
message: "Someone."
data:
clickAction: '/lovelace/homepage#cameras'
This way doesn’t work, it doesn’t trigger the popup.
Hi, have you tried with the last beta?
Happy new year everyone!
I’m a noob on this, but how do I style the separator to increase the font size? I’ve added font-size to a styles, like below (extreme values for testing):
type: custom:bubble-card
card_type: separator
name: Rooms
icon: mdi:home-outline
styles: |
ha-card {
color: red;
font-size: 50px;
}
But the font-size get’s overridden by (copied from “inspecting” the result in Chrome):
.separator-container div h4 {
display: inline-flex;
margin: 0 20px 0 0;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
(the text goes red, so that part is working as nothing is overriding it)
What’s the right way to do this?
EDIT:
Putting it on ha-card h4 made it work:
styles: |
ha-card h4 {
font-size: 50px !important;
}
Happy New Year!
I tested it with version v1.6.0-beta.4, and it doesn’t work.
I was unsure if I had to change the ‘bubble-pop-up.js?v=1.5.3’ to ‘v1.6.0-beta.4’.
1 Like
Anyone know where in the theme I can set icon color and the img cell color?
Changing this did nothing:
paper-item-icon-color: 'var(--text-color)'
paper-item-icon-active-color: 'var(--text-color)'
Hey, i dont know if thats a Problem on my Side or Bubble Card.
Everything in the Bubble Popup looks kinda blurry. Everything else on my Dashboard looks sharp as normal. Is there a Fix to this?
1 Like
@Cloos Is there a function for bubble card to single or double tap to turn off a light or switch?.. instead of having to click the icon then select power, then click/toggle power? Just seems like a lot of clicking to turn something off.
1 Like
Not the correct solution, but i bypassed this with the mushroom lightcard.
If you use the bubble theme it will look pretty decent.
guess that will work for now… was liking the round corners without having to modify css/card-mod
…also is nice to have the light name/description not get cut off from the mushroom slider bar
I would like to change the background color of these cards with the right variable. Somehow I don’t get it. Can someone point me in the right direction?
1 Like
I just added toggle as a tap action. Then clicking the icon will toggle the light.
type: custom:bubble-card
card_type: button
entity: light.bad_1_etg
icon: mdi:light-recessed
button_type: slider
name: Bad
tap_action:
action: toggle
styles: |
.range-fill {
background: var(--accent-color) !important;
}
kinda works… ya have to double tap for it to toggle, not single tap
still like this option, cause its also a lot less code.
UPDATE: Take that back.
If I wanted somewhere between 2%-5% dim to turn on the light it wont work because the icon is sitting in that range, so it ends up popping up the “more info” panel.
I have a while before I push this new setup out, so will hang tight for it to mature some more… definitely like where it is heading so far!
2nd UPDATE:
This MAY be an issue with the version I am running Beta v1.6.0-beta 4
I was able to location the syntax for tap/double-tap and was unable to get either to function properly.
- type: custom:bubble-card
card_type: button
entity: light.living_room_lights
icon: mdi:light-recessed
button_type: slider
name: Ceiling
tap_action:
action: toggle
double_tap_action:
action: more-info
@Cloos
Verified what I mentioned in the above post… will open an issue on this.
Beta version does not honor the tap/double tap actions.
I reverted to v1.5.3 and it did work properly, however that reopens previous issues centering of card not working, so this kinda sucks at the moment. Please can you look into this.
The war against bugs and instability continues 
Happy New Year everyone! 
I’m back at work! First, I want to share this discovery. Since the recent updates of Home Assistant (I’m not sure which one exactly), the optimized mode for pop-ups has become obsolete. This is because the regular mode is now exactly as efficient, which greatly simplifies things for both new and current users. I will keep the optimized mode in Bubble Card for now, but it will probably be removed in the future.
In addition, I’ve been working tirelessly on bug fixes and numerous optimizations to further enhance the experience. I hope that this version will be (once again) the perfect candidate to become the stable 1.6.0 version.
Looking forward to an amazing year ahead with more enhancements and features. Stay tuned!
v1.6.0-beta.5 :
- The “Optimized mode” is no longer necessary in the latest releases of HA!
- Everything has been optimized for the latest version of HA.
- The custom tap actions have been permanently fixed!
- Significant optimizations of the editor.
- Pop-ups are now faster (once again).
- Various issues have been resolved.
- Further overall optimizations have been made.
3 Likes