Is it possible to show the actual value from the slider and not from the device?
My temperature control device, which works on z-wave, don’t update immediately, so the shown value will not change when i do a slide. It will update first, when the command is send by the z-wave controller.
Not for now, but one day, a slider sub-button is in my to-do list 
Hi everyone!
I’m back and I’m a bit excited to be finally able to share this new major gigantic update with you all! It took me a lot of time and effort (more than 2 months… damn, that was long), but I’m really proud of how it turned out!
This version introduces a lot of exciting new features, including a highly requested card that many of you have been eagerly waiting for! Alongside these new additions, I’ve fixed way too many bugs and further optimized the code. For some setups, this means even lower resource consumption, and I can say the improvement is truly impressive on low-end/older devices! Yes again… I know.
As always, I can’t wait to hear your feedback. And a huge thank you to all the beta testers and to everyone for your continued support!
P.S.: I’m really sorry for the extensive changelog, I did my best to make it as readable as possible.
Here are the main new features:
The climate card is finally available! The mode selection menu is a sub-buttons that is added automatically when creating the card. You can then modify or remove this sub-buttons as you wish. After a lot of beta testing, it should supports all type of climate entities and works seamlessly! #398
Select cards and sub-buttons now support attribute lists for climate, light, and media player entities. This option will only show if your entity is supported. #665
You can now modify most of the styles directly in your theme file without needing custom styles! For example, here’s my dashboard with less rounded borders and new background colors.
This was achievable with just a few lines added to my theme. Don’t forget to reload your theme using the frontend.reload_themes action, such as via Developer Tools.
Bubble:
# Bubble Card variables test
bubble-border-radius: "8px"
bubble-main-background-color: "rgb(50,70,90)"
bubble-secondary-background-color: "rgb(0,70,90)"
bubble-pop-up-main-background-color: "rgba(200,200,200,0.5)"
bubble-accent-color: "rgb(100,140,180)"
bubble-icon-background-color: "rgb(50,80,100)"
bubble-select-list-width: "200px"
bubble-select-list-background-color: "rgb(100,140,180)"
I’ll be adding the full list to the documentation soon, but just like with custom styles, you can find all of them by checking the src/cards folder in this repository. In each card folder, you’ll find a file named styles.ts. These files contain all the applied styles.
If you have a sub-button with a light entity, it will now change its color based on the light’s color. I noticed many of you were achieving this with custom templates, no need for them anymore!
That “Power” sub-button now changes its color based on the light’s color. This pop-up is also modified by the new global variables, though the color harmony might not be the best…
A new blurred background option for media player cards based on the media cover has been added, giving a cleaner and more modern look.
Breaking changeBackdrop styling changes for pop-ups: The default backdrop is now darker without any blur, improving performance on low-end/older devices. To restore the previous blur effect, in the editor just go to your first pop-up on your view, then go to Styling options > Pop-up styling then change Optional - Backdrop blur to 10 (it was the previous value), or add backdrop_blur: 10 in YAML.
Other new featuresSlider live update:
Added an option in the editor to revert to the slider previous behavior. In YAML you can add slider_live_update: true. #817
Automatic entity matching for “Call service” actions:
A new toggle in the editor ensures Call Service actions will automatically match the card or sub-button entity if defined.
YAML users can use:
target:
entity_id: entity
Pop-up slide to close distance:
You can now change the « Slide to close distance » in the pop-up editor. In YAML you can add slide_to_close_distance: 300, this is the distance that you need to slide (in pixels) to close a pop-up.
Toggle for disabling background color in sub-buttons:
In the sub-buttons editor, there is now a toggle to disable the background color based on the entity’s state. In YAML: state_background: false. There is also a new toggle to disable the sub-button background colors based on the light color. In YAML: light_background: false.
New toggle in the editor for sub-button background color:
You can now enable or disable sub-button background colors based on the light color in the editor. You can use light_background: false in YAML.
Select styling:
It’s now possible to modify the styles of a select card/sub-button with the new variables. #725
Cover control buttons:
The open/close buttons for covers are now correctly disabled when they should be. #788
Cover stop button:
The stop button for covers is now correctly hidden when not supported.
Bug fixes and optimizationsImproved light button visibility: Buttons with white light (or without RGB) are now easier to see in bright/light themes. The overall color system has been refined for better handling, and the color can now be customized with the --bubble-light-color variable. #692
Slider optimization:
Button slider updates are now triggered only on release. #686 (Partial optimization for #764)
Slider haptic feedback:
Button slider haptic feedback is now triggered only on release.
Cover attribute fix:
Attributes with a value of “0” were not displayed, this is now fixed! #750
Show name issue:
Disabling the “Text Scrolling Effect” was breaking “Show Name”, this is now fixed! #598
Editor freezing issue:
The editor is not freezing anymore on some setups/browsers. #799 #698
Page initialization:
Faster page initialization on some setups.
CPU usage:
Significantly lower CPU usage on some setups. #799 and #711
Pop-up background update:
Pop-up background_update feature fixed, try this if you have an issue displaying a specific pop-up.
Pop-up optimization:
Improved performance of pop-ups for faster load times on some setups (at this point, I’m probably running out of ways to optimize them further! Maybe…).
Fixed pop-up display:
Resolved issues where some pop-ups were not displaying at all, or only after leaving the editor or changing views. #821
Smoother pop-up animations:
Enhanced pop-up animations for a more fluid experience on some setups.
Additional pop-up fixes:
Addressed other pop-up issues, including console errors on some setup. #840 and #791
Long term memory management:
Better long term memory management. #799
Event listeners for pop-ups:
Better and lighter event listeners system for handling the pop-ups.
Global event listeners for tap actions:
Better and lighter global event listeners system for handling the tap actions.
Select arrow background variable:
Replaced the select arrow background variable with --bubble-select-arrow-background-color. #794
Dropdown menus in pop-ups:
Some dropdown menus from some custom cards were not appearing when placed inside of a pop-up, this is now fixed! #469 and #816
Hold action optimization:
The hold action is now automatically triggered after the delay.
Safari slider button issue:
Fixed an issue on Safari where slider buttons were flashing when a pop-up was opened.
Slider fixes:
Sliders that were not working anymore are now fixed. #849 #838
Fan sliders:
Fan sliders are now set to 0 when turned off.
No actions on scroll:
Actions are now correctly prevented from triggering when scrolling. #892 and #839
Resolved scrolling issue:
Fixed an issue that sometimes made scrolling impossible, particularly in the editor.
Missing point in displayed state:
Added missing point • when “State” is hidden but “Attribute” and “Last changed” are visible. #872 by @tiagof
Binary sensors icon:
Fix: recover icon from binary_sensors. #828 by @brunosabot
Google Wifi Online value:
Fix: support Google Wifi Online value as active. #829 by @brunosabot
Cover card icon variable:
Fix icon variable in cover-card. #776 by @Muenchen-Michi
Styling fixes:
Some various styling fixes.
New pop-up background element:
Introduced a new separated element for the pop-up background. #895
Important: This is a breaking change for users with custom styles that are modifying the pop-up background.
.bubble-pop-up-background {
width: 100%;
height: 100%;
display: flex;
top: 0;
left: 0;
position: absolute;
background-color: var(--bubble-pop-up-main-background-color, var(--bubble-pop-up-background-color, var(--bubble-secondary-background-color, var(--background-color, var(--secondary-background-color)))));
border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px)) var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px)) 0 0;
backdrop-filter: var(--custom-popup-filter);
-webkit-backdrop-filter: var(--custom-popup-filter);
}
Bubble Card newsI’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!
The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.
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.
I have another 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. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. 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.
Thank you so much for being part of this amazing community, your support will always makes a huge difference! 
I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
Is there a way to make the vertical length of the card longer? I’m currently using two separate bubble cards but it would look better if I combined both of these into one bubble, especially because I’m using this as a TV remote (didn’t include the second sets YAML because it is basically just copypasta from the first with changed script calls);
I saw layout lets you do stacked buttons but it looks very jumbled so I didn’t mess around with it too much – the buttons would be too small for mobile UI, not sure if I’m supposed to do another step after that.
type: custom:bubble-card
card_type: media-player
name: Input Selection
icon: ""
show_state: false
hide:
power_button: true
previous_button: true
next_button: true
play_pause_button: true
volume_button: true
double_tap_action:
action: none
hold_action:
action: none
show_attribute: false
attribute: source
sub_button:
- entity: script.turn_tv_on_to_ps5
name: PS5
icon: mdi:sony-playstation
show_name: true
tap_action:
action: toggle
- entity: script.turn_tv_on_to_360
name: 360
icon: mdi:microsoft-xbox
show_name: true
tap_action:
action: toggle
- entity: script.lg_g4_pc_input
name: PC
icon: mdi:desktop-tower
show_name: true
tap_action:
action: toggle
- entity: script.turn_tv_on_to_lenovo
name: Lenovo
icon: mdi:server
show_name: true
tap_action:
action: toggle
tap_action:
action: none
entity: media_player.justinsg4lgtv
show_icon: false
scrolling_effect: true
show_name: true
show_last_changed: false
card_layout: largei have simple bubble card with 2 sub buttons that call a service scene, the scene switching works fine but the background color doesnt change when the scene is active?
is there a way to make the background color #FFFFFF when the scene is currently in an active state?
Hey I’m working on that at the moment but stumbling on to loads of problems.
So PR will come in soon (probably).
For now in “sections”-mode you can use this:
.bubble-button-card-container{
height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
}
.bubble-sub-button-container{
flex-wrap: wrap;
}
Thanks!
I notice that it puts the picture on top of the icon, so parts of the icon would still be visible if you do not choose a small icon.
Do you know how to use a picture for a sub-button?
Usting the same code for .bubble-sub-button-1 instead of bubble-entity-picture just gives me mess, not a single big picture in the center of the button.
I’ve updated to 2.30 now, thank you very much for this great release.
However, I’m not able to style the new climate card: I would like the borders less rounded and applied a “border-radius: 10px important;” to all section with “border-radius” as mentioned in the source style file, but only the icon and the temperature container change the border radius, the container itself not.
Any hint?
.bubble-button-container {
border-radius: 10px !important;
}
.bubble-icon-container {
border-radius: 10px !important;
}
.bubble-temperature-container {
border-radius: 10px !important;
}
.bubble-climate-container {
border-radius: 10px important;
}
.bubble-feedback-container {
border-radius: 10px important;
}
.bubble-color-background {
border-radius: 10px important;
}
I’m having the same issue with the climate card I can’t apply styles to anything but the icon and I can’t even change the icon color either oddly.
I will check that, thanks for the feedback!
Now being on the new release, currently trying to move my visual custom adjustments into the general theme section. Looking forward to the complete overview, because some stuff I cannot really find in the style.ts files.
Now the concrete question:
With
.bubble-button-card-container {
box-shadow: rgba(0, 0, 0, 0.84) 0px 1px 3px
}
I can get a nice 3d effect, see here for the blue button in contrast to the others:
So far I used
ha-card-box-shadow: rgba(0, 0, 0, 0.84) 0px 1px 3px
in my theme definition, which works for most home assistant cards, but not for bubble card.
How can I apply this box shadow to my theme so that it is being applied on all button card containers?
Does that need to be explicitely foreseen by you Cloos to have it available as a bubble-card specific variable that I can set?
This style works for background color. Change as needed:
.bubble-sub-button-2 {
background-color: ${hass.states['input_boolean.gym_motion'].state === 'on' ? '#2f8e2f' : '#1a4a72'} !important;
}
Hi ist it possible to get this Theme/YAML?
Scenes do not have a usable state, it’s just a timestamp of when the scene was last activated.
For me it works like this:
.bubble-button-card-container {
border-radius: 5px !important;
}
hmm, I noticed that there are different ways to start the styles: section. I saw
styles: |
styles: >-
styles: |-
styles: |2-
there might be more… But what are consequences of those differences? i couldn t figure it out…
@tluethi71 These are all ways to define how multiline strings will be interpreted.
styles: |:styles: >-:styles: |-:styles: |2-:Unfortunately, this doesn’t work for me either:
Good. point. I had forgotten that’s why I only use groups, or scripts for more complicated things. I also write toggle scripts
Does this go in the individual bubble card itself? I haven’t tackled the css customizations yet because they seem a little intimidating.