omg awesome
1 Like
Hey,
I made a card that turns a smart plug on and off. When its off, its icon is white and when its on it turns to green. But when i turn it off, before it goes back to white it blinks up as blue for a split secound. What can I do to fix it, and remove that blue flash?
Here is my current style:
styles: |
.bubble-icon-container {
color: !important;
background: ${state === 'on' ? '#4C9031' : '#303446'} !important;
}
.bubble-icon {
background: !important;
color: ${state === 'on' ? '#4C9031' : ''} !important;
}
.bubble-button-background {
background-color: ${state === 'on' ? '#4C9031' : '#303446'} !important;
opacity: 1 !important;
}
.bubble-sub-button {
color: #8d6671 !important;
background: #8d6671 !important;
}
ha-card {
color: white !important;
}
Hi,
i have installed the latest Beta from Bubble Card and use the Sub-Button Card.
Is it possible to reduce the distance between the two lines?
And can I change the background of the card?
Thx.
Hi! You can directly change this gap by changing the height of all your sub-buttons (in each one go to Layout).
For the background this can be done with custom styles, like for the other cards (check the examples in the documentation).
While adding some other stuff to my configuration.yaml today I got this one after restarting HA:
I’m not quite sure if I need to update this somehow or I can just remove it?
This is the complete entry for bubble card:
# Storage for Bubble Card Modules
template:
- trigger:
- trigger: event
event_type: bubble_card_update_modules
- sensor:
- name: "Bubble Card Modules"
state: "saved"
icon: "mdi:puzzle"
attributes:
modules: "{{ trigger.event.data.modules }}"
last_updated: "{{ trigger.event.data.last_updated }}"
Read this: Incomplete template configuration after 2025.11.0 · Issue #155893 · home-assistant/core · GitHub
Basically, the syntax is not correct: it creates an “empty” trigger and a separate sensor.
Hi! This can be ignored, since Bubble Card v3.1.0 will not use this entity anymore. Bubble Card Tools will simplify the setup of the Module Store for everyone, but also fix so many issues 
1 Like
Ignored or removed from config after the bubble update to 3.1b*?
Those are 2 very different things…
Keeping it doesn’t have any impact, but you will be able to remove it after the v3.1.0 update to keep your configuration.yaml clean 
1 Like
Thx.
When I first tried it, I only set the height for one button. After I applied this height to all of them, the spacing decreased.
Maybe it would also be a good idea to set the height per row when there are multiple buttons.
Hello,
Is it possible to change the orange colour when the heating is in ‘heat’ mode?
Nothing I have tried has worked.
The last code I used was this one, but it does not work.
.bubble-state-climate-heat-color {
color: ${state === 'heat' ? '#9B643D' : 'inherit'} !important;
}
Thanks in advance
PS: I found the solution
This is the code
.bubble-background {
background-color:
}
Hello,
It’s possible to add several attributes for an card ?
type: custom:bubble-card
card_type: climate
entity: climate.second_floor_2
sub_button:
- name: HVAC modes menu
select_attribute: hvac_modes
state_background: false
show_arrow: false
state_color: true
show_attribute: true
show_last_changed: true
show_state: true
force_icon: true
attribute: hvac_action - current_temperature
icon: mdi:fire-circle
i would line put hvac_action ans current_temperature
I even tried putting in a model sensor that takes both pieces of information, but it doesn’t work.
Any ideas ?
There is a module in the module store to do this I’m pretty sure
so i scrolled through this entire doc, which i have to admit put some strain on my eyes, but i couldn’t find anything for changing the font size of a specific sub botton, and the main doc only seems to contain the whole card… .i’m looking for something more like:
.bubble-sub-button-1 {
font-size: 5px !important;
}
however this doesn’t seem to change anything
Hi all,
i have this template custom style:
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
{% if states('sensor.microonde_power') | float > 60 %}
animation: cook 1s linear infinite;
{% else %}
{% endif %}
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
Can I use this custom style with Bubble card to have icon animation?
Thank you
Bubble Card 3
v3.1.0-beta.5
Hi everyone!
I couldn’t resist adding a few more features for this beta. Many of you asked for more slider options, so here they are!
This release brings new Slider layout options to control orientation, value placement, and inversion. It should also makes the Bubble Card Tools migration work perfectly in every scenario (without updating BCT). The sub-button editor bugs are fully fixed, and I fixed many other issues along the way!
Thank you all for the feedback. I cannot wait to hear what you think about this (hopefully last) beta. I really hope this one is the keeper, but we should be very close! 
One more thing! I refreshed the Bubble Card news at the end of this release note, go take a look!
New features and enhancements
-
Slider layout options:
Added fill orientation (left, right, top, bottom), value position (right, left, center, hidden). -
Invert slider direction:
Added optional inverted behavior where 100% fill equals the minimum value for sliders. #1968 -
Sub-button slider CSS targeting:
Sub-button sliders can now be styled via.bubble-sub-button-slider-x(index aligned with the sub-button) or via a name-based class such as.my-slider.
Bug fixes and improvements
-
Module migration with Bubble Card Tools:
Fixed migration frombubble-modules.yamlwith Bubble Card Tools, now supporting!includeand heavily tested. -
Calendar event sorting:
Fixed ordering to handle both all-day and timed events correctly. PR #1937 by @nomis52. -
Media player buttons:
Restored missing buttons in the media player card in some cases. #1930 #1846. -
Separator layout rows height:
Corrected layout rows height for separators. #1971. -
Always-visible sub-button sliders:
Fixed visibility options issues when sliders were “always visible”. #1974. -
Custom styles templates:
Resolved a case where JS templates blocked the CSS declaration immediately following them. #1978. -
Horizontal scrolling:
Fixed unwanted horizontal scrolling appearing on some cards. -
Module Store refresh:
Unblocked Module Store refresh stuck at 95%. #1962. -
Card editor start page:
Fixed card editor being blocked on the initial page. #1959. -
iOS sub-button sliders:
Fixed an issue with “always visible” sub-button sliders on iOS. #1958. -
Sub-button CSS indexes:
Corrected CSS index assignment for sub-buttons. #1956. -
Inline/rows issue:
Fixed inline/rows selection not working in the editor for some users. #1954. -
Layout alignment:
Sub-buttons withlarge-with-2-subbuttons-rowslayout are now displayed like before. -
Card name visibility in media player card:
Fixed card names sometimes not appearing. #1950. -
Event subscription:
No morebubble_card_tools.updatederrors in the HA logs. #1957. -
Misc fixes:
Additional minor fixes.
How to test this pre-release?
The easiest way is to click on the button below, or go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select “Redownload”. You’ll be able to choose the beta version under “Need a different version?”. You can then change back to your previous version if needed.
Bubble Card news
Over the past years, 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.
This is why I decided to create a Patreon as a way to offer something more for those who want to support me. A few days ago, I refreshed my Patreon with two new modules: Bubble Badges v2 (unlimited badges on any sub-button or the main icon) and Bubble Weather (animated weather backgrounds with daily/hourly forecasts, this one was definitely a lot of work). The custom dropdown module is still there if you want full control over labels, icons, and actions on select cards and sub-buttons.
I’m also finally happy with my own dashboard, built entirely with Bubble Card v3.1.0-beta and only new custom modules I’ve been working on for months! Like one that adds unique colors and styles to all cards, one for the weather, one for graphs, square cards, time… I’ll release more of these modules soon, with a detailed post on Patreon and a new YouTube video. I would love to know what you think!
Thank you so much for being part of this amazing community, your support always makes a huge difference! 
I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card, and I really hope you will enjoy my videos. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!
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:
Also, if you ever want to grab me a fresh beer, here are two easy ways 
8 Likes
I’m making pretty extensive use of pop-up bubble cards in my dashboard. Is there any way to minimize all the pop-ups anytime the dashboard is reloaded? I’d love to have them auto minimize each time I open the companion app on my phone (iOS)
Thanks!
Dave
Great update as always! How do I style the bottom row of sub buttons?
Until the last update, I could access a pop-up panel from a notification using the following address:
data:
actions:
- action: NAVIGATE_COMPRA
title: “Abrir Lista”
uri: /lovelace/home#compra
has something happened?