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