Brilliant thank you!
Hello,
is there a way to move the sub buttons all to the left (on the red line) instead of the right.
2 Likes
Hi there,
First of all, great job, love this card.
I need help with style, I want to change the icon color and backgroud color of a button state, based on a sensor value.
I want the color to be red if value of the sensor is higher than 0 and to be green if value is lower than 0.
Tried like this:
{% if states('sensor.energia_geral_channel_1_power') | float > 0 %}
.bubble-icon {
color: red !important;
opacity: 1 !important;
}
.bubble-button-card-container {
background: rgb(210,60,0) !important;
opacity: 1 !important;
}
{% elif states('sensor.energia_geral_channel_1_power') | float < 0 %}
.bubble-icon {
color: green !important;
opacity: 1 !important;
}
.bubble-button-card-container {
background: rgb(153,188,133) !important;
opacity: 1 !important;
}
{% endif %}
but with this it’s always green, doesn’t matter if the value of the sensor is higher ou lower than 0.
Thats something I would like to do aswell. The allignment over several cards below each other is a mess 
Hi, Bubble Card doesn’t supports Jinja templates, only JS templates, I’ve added many examples in the documentation at the Templates section. I will add a note about that to makes it clearer for the new users.
Hi @Cloos , This new version (V2.0/2.0.1) broke my dynamic weather icon implemented via card-mod. I see in the documentation that the dynamic weather icon is now possible without leveraging card-mod; however I cannot figure out how to get it functional.
The expected Icon should show to the left of the “Weather” text - yet there isn’t anything. As stated above, I used card-mod to add a Jinja template as the --card-mod-icon value. I attempted to use the getWeatherIcon function as observed in the documentation, and when I do, the entire pop-up disappears (clicking the button to open the Weather popup does not result in the popup opening/displaying). Can this helpful bunch point me in the right direction??
The YAML - using JS Template
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#weather'
margin_top_desktop: 8%
margin_top_mobile: 8%
hide_backdrop: true
bg_color: none
close_on_click: false
width_desktop: 620px
styles: >
.pop-up {
padding: 0px 8px 220px 8px !important;
}
#header-container {
transform: skew(20deg);
}
.close-pop-up {
--mdc-icon-size: 30px !important;
transform: skew(-20deg);
} .bubble-button-card-container, .bubble-pop-up-container,
.bubble-icon-container, .bubble-close-button {
background-color: transparent !important;
grid-gap: 0px !important;
gap: 0px !important;
--grid-gap: 0px !important;
--vertical-stack-card-gap: 0px !important;
}
.bubble-icon {
transform: skew(-20deg);
opacity: 1;
--mdc-icon-size: 30px !important;
}
.bubble-name {
font-size: 20px;
transform: skew(-20deg);
}
#header-container {
background: rgba(0, 0, 0, 0.32) !important;
transform: skew(20deg);
width: 98% !important;
margin: 0px 12px 0px 6px !important;
filter: drop-shadow(rgba(0,0,0,0.35) 0rem 0rem 6px);
}
name: Weather
icon: >-
${hass.states['sensor.current_weather_mdi_value'].attribute.icon}
The YAML - using getWeatherIcon
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#weather'
margin_top_desktop: 8%
margin_top_mobile: 8%
hide_backdrop: true
bg_color: none
close_on_click: false
width_desktop: 620px
styles: >
.pop-up {
padding: 0px 8px 220px 8px !important;
}
#header-container {
transform: skew(20deg);
}
.close-pop-up {
--mdc-icon-size: 30px !important;
transform: skew(-20deg);
} .bubble-button-card-container, .bubble-pop-up-container,
.bubble-icon-container, .bubble-close-button {
background-color: transparent !important;
grid-gap: 0px !important;
gap: 0px !important;
--grid-gap: 0px !important;
--vertical-stack-card-gap: 0px !important;
}
.bubble-icon {
transform: skew(-20deg);
opacity: 1;
--mdc-icon-size: 30px !important;
}
.bubble-name {
font-size: 20px;
transform: skew(-20deg);
}
#header-container {
background: rgba(0, 0, 0, 0.32) !important;
transform: skew(20deg);
width: 98% !important;
margin: 0px 12px 0px 6px !important;
filter: drop-shadow(rgba(0,0,0,0.35) 0rem 0rem 6px);
}
#root {
border-radius: 0px!important;
background: transparent !important;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
font-size: 15px !important;
font-family: Ubuntu !important;
font-smooth: always !important;
-webkit-font-smoothing: antialiased !important;
font-weight: 700 !important;
--grid-gap: 0px !important;
--vertical-stack-card-gap: 0px !important;
}
bubble-card::after {
/* Hide the gradient in the top of the pop-up */
display: none !important;
border-radius: 0px!important;
}
ha-chart-base {
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
padding: 0px !important;
font-family: Ubuntu !important;
font-smooth: always !important;
-webkit-font-smoothing: antialiased !important;
}
:host {
--mush-icon-symbol-size: 1em !important;
}
::slotted(ha-icon), ::slotted(ha-state-icon), ha-state-icon.active{
--chip-icon-size: 0.85em !important;
--mdc-icon-size: 0.85em !important;
font-family: Ubuntu !important;
--chip-font-size: 15px !important;
}
::slotted(span) {
font-size: 13px !important;
font-family: Ubuntu !important;
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
font-smooth: always !important;
-webkit-font-smoothing: antialiased !important;
}
${icon.setAttribute("icon", getWeatherIcon(hass.states['sensor.tomorrow_io_hourly_this_hour'].attributes.forecast[0]?.condition))}
name: Weather
Thanks in advance!
I finally figured out why my dashboards were slowing down on Fire devices. If I mix bubble and mushroom cards, everything grinds to a halt. With just bubble cards it’s super fast.
Also, is there any plan to do a bubble door lock? Or is there some way to do this already?
Hi @Cloos ,
Found it, I was searching on “Styling” and found it on “Templates”.
This is the correct way:
.bubble-button-card-container {
background-color: ${state < 0 ? 'rgba(153,188,133,0.5)' : 'rgba(210,60,0,0.5)'} !important;
}
.bubble-icon {
color: ${state < 0 ? 'rgba(153,188,133,0.5)' : 'rgba(210,60,0,0.5)'} !important;
}
Thank you
2 Likes
Hi,
I had the same issue and solved by changing the value of the “Horizontal button stack styling - Optional width” from an old value to 100%
Hi @Cloos
How can I change the ha_card style alongside with other styles from bubble_card?
If you noticed on my code below, the ha_card is not reflecting the changes:
This is my code:
type: vertical-stack
cards:
- type: custom:button-card
entity: light.interruptor_1_quarto_thomas_light_3
icon: hue:ceiling-square
show_state: false
show_name: true
name: Plafon
aspect_ratio: 3/1
show_last_changed: false
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
show_icon: true
styles:
card:
- border-radius: 15px
- border-bottom-left-radius: 0px
- border-bottom-right-radius: 0px
- background-color: '#111F32'
icon:
- color: '#59F1FF'
name:
- color: '#FFFFFF'
state:
- value: 'on'
styles:
icon:
- color: '#FFE500'
- type: entities
entities:
- type: custom:bubble-card
entity: light.interruptor_1_quarto_thomas_light_3
card_type: button
button_type: slider
show_name: false
icon: hue:scene-bright
styles: |
ha-card {
background: #111F32;
border-top-right-radius: 0px !important;
}
.bubble-icon {
color: ${state === 'on' ? '#FFE500' : '#59F1FF'} !important;
--mdc-icon-size: 30px !important;
}
.bubble-range-fill {
background: linear-gradient(to right, #FFFFFF, #FFE500) !important;
opacity: 0.5 !important;
}
.bubble-icon-container {
background: #111F32;
}
Bubble Card 2
v2.0.2
Hi everyone!
When I released the first Bubble Card 2 stable version a few days ago, it (unfortunately) coincided with the release of the new Home Assistant 2024.6.0 version. This new release ended up breaking some functionalities, the most notable of which was the creation of an empty space by the pop-ups.
However, I’m glad to announce that these issues have now been resolved to ensure a full compatibility!
I also worked on the slider button, it now supports fan, climate, and number entities! I don’t have any of these entities to test it, but it should work. I can’t wait for your feedback on these new possibilities!
Important: I would also like to acknowledge that there was an error in the documentation and in the note in the GUI editor regarding where to place the pop-ups. In fact, they should be placed at the very end in your view. However, if you are using the section view, their positions are not important.
Here is the full list of the new features and bug fixes.
New features
- Experimental support: Added experimental support for fan, climate and number entities for the sliders.
- Step attribute support: Sliders now support the step attribute if there is one.
Bug fixes and optimizations
- Section view pop-up gap fix: Fixed the gap created by the pop-ups on a section view introduced after the Home Assistant 2024.6.0 update (For section view users please update Home Assistant to the last release for full compatibility).
- Masonry view fix: Fixed an issue with the pop-up messing with the masonry view after the 2024.6.0 update.
- Horizontal buttons stack fix: Fixed the missing horizontal buttons stack gap after the 2024.6.0 update.
- Internal rounding for sliders: Sliders now round values internally for lights (WLED fix?).
And thank you to everyone for the incredibly motivating feedback on this new version!!! 
4 Likes
i just tested the new update and I can confirm the climate and number input option for the slider works! Well done.
1 Like
Hey all, thanks for such a supportive and collaborative thread@ @Cloos , what a great project and friendly developer. I’ve had two posts where I thought something was broken and each time an upgrade or the docs led me correctly 
Would anyone be willing to share their color scheme/theme examples? My dashboard is nearly complete structurally but I’m struggling to recreate the colors used in the github docs or other examples in the thread. Using only the Bubble theme as an example, a normal switch/button bubble card will turn blue-ish if the switch is on and I can’t figure out how to edit that globally. Inspecting via browser I can see ha-card class=“type-custom-bubble-card is-on”, and accordingly color is set to the accent-color: ‘rgb(80, 110, 172)’ in the default Bubble theme.
- How could I change the default for cards that are “on” as above?
- More interestingly, does anyone have some coloring examples they’re proud of and don’t mind to share? If you take a look at Cloos’ screenshots under “Card layouts”, there’s a nice mix of buttons with no active color and some with icons colored. I’d love to replicate this.
Note I’m not asking for help in conditionally coloring icons etc as that works wonderfully as per the docs. Just looking to borrow someone’s creativity in how they’ve defined their colors. Thanks!
I’ve been enjoying tinkering with this, i think it has incredible promise for my dashboards!
I noticed that the empty column card configuration GUI doesn’t support sections layout, but the yaml side does. Is this planned for a future release?
I’m running the latest of HA and bubble-card.
Thanks!
Also, is there any chance you might implement a gauge in the future? I would be keen for this with sub-button support!
Am I missing how to make this work on IOS device such as an Iphone in the app? Desktop version works great with pop up and buttons/sensors/media but I get you need to define an entity on my Iphone.
Bubble Card 2
v2.0.3
Hi again! Here is a fast release to fix the slider behavior after the v2.0.2 update, it was terrible and erratic! I can also confirm that the new supported entities by the slider are perfectly working!
Bug fixes and optimizations
- Slow slider fix: Reverted to the previous slider behavior to makes it faster.
- Slider editor note update: Added the new supported entities in the slider editor note.
1 Like
I forgot that indeed!
1 Like
This looks like a cache issue, have you tried to clear it?
1 Like
This is not my priority but why not 
1 Like