This is only working for me, if all sub buttons are at the same position because of the text length. If some status are in another state, than it looks still bad.
1 Like
Is it possible to have a gaps for pop-ups be the same as for a section dashboard?
Yes I was thinking this too, but it seems like a messy solution. I thought the Universal Media player would let me add all the children and it would behave like a media player for the current playing media player?
hi all,
hi @Cloos
is something like this possibel?
i want to show my active Harmony scene Name, but only the active.
{% if not is_state('select.elite_activities', 'power_off') %}
${card.querySelector('.bubble-name').innerText = " " + hass.states['select.elite_activities'].state}
{% else %}
{% endif %}
all is working, but i need the if statement.
if the harmony is switched off - it shows “power_off’” as Name, would like to display something like
“Media are off”
Thanks in advance for support
This is nice
This is my issue
Bubble Card 2
v2.2.3
Hi everyone!
Here is a new release mainly focused on the pop-ups (again), I’ve fixed a lot more issues and everything should now be truly stable! 
I’m also glad to say that Bubble Card now supports the Google Cast service. This means that you can finally use it on the Google Nest Hub for example!
I really hope that everything is working now so that I can start working on some new features!
Here is the full changelog:
Bug fixes and optimizations
- Pop-up fixes:
- Pop-ups are (finally) changing color accordingly when a theme changes (e.g., from dark to light). #627
- Vertical stack titles are now hidden if set for a pop-up. #647
- Heavy pop-ups are now closing faster on some setups.
- Pop-up transitions are now smoother and more reliable on some setups.
- Pop-up backdrop transitions are now smoother on some setups (if not, disable it, this feature can slow down transitions).
- Pop-up auto-close timeout is now removing the hash from the URL correctly.
- Added the missing haptic feedback on the pop-up close button.
- Refactored the pop-up code even more to ensure stability.
- Haptic feedback issue: Some haptic feedback was fired multiple times, this should now be fixed.
- Google Cast support: Finally fixed the
Custom element doesn't existerror on Google Nest Hub! #345 and maybe #257
I can’t wait for your feedback!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
1 Like
So readability in the Bubble theme is rough for me. How can I change the color of the links/text to improve readability?
edit: Or am I doing something wrong? This is super hard to read.
1 Like
Also, I guess I misunderstood how popups work. I was hoping to be able to link them to a subview, but that’s seemingly not how they work. Is there a tutorial that explains how to use popups?
I figured it out. 
1 Like
@Cloos great work on this. It really adds a nice shiny finish to my dashboard. I have a formatting question I was wondering if you could answer. First picture below is a snap of one entire pop up I use for when wife wants to change the color/pattern/brightness of the kitchen light strips. If possible, I would like to reduce the space between the entities for each section.
So for example, between WHITE and RED, and between RED and ORANGE, I would like the spacing to be smaller so that the 3 sections stand out as separate, if that makes sense.
The second picture is a comparison of the spacing between each entity card when comparing how it looks on my dashboard page, versus how it looks on a pop up. You can see the original dashboard as thinner margins. I would like to get to this, or even thinner if possible.
I cant post the code because its too long, but below the pictures is a snippet of just the COLORS section if it helps.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#lightstrips'
width_desktop: 1300px
button_type: name
name: Kitchen Lightstrips
card_layout: large-2-rows
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Color
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: White
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: White
target:
entity_id: input_select.light_strip_color
icon_color: grey
badge_icon: >-
{% if is_state("input_select.light_strip_color", "White")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Red
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Red
target:
entity_id: input_select.light_strip_color
icon_color: red
badge_icon: |-
{% if is_state("input_select.light_strip_color", "Red") %}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: orange
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Orange
target:
entity_id: input_select.light_strip_color
icon_color: orange
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Orange")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Yellow
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Yellow
target:
entity_id: input_select.light_strip_color
icon_color: yellow
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Yellow")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Yellow green
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Yellow_green
target:
entity_id: input_select.light_strip_color
icon_color: light-green
badge_icon: >-
{% if is_state("input_select.light_strip_color",
"Yellow_green") %}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Green
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Green
target:
entity_id: input_select.light_strip_color
icon_color: green
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Green")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Spring green
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Spring_green
target:
entity_id: input_select.light_strip_color
icon_color: cyan
badge_icon: >-
{% if is_state("input_select.light_strip_color",
"Spring_green") %}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Cyan
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Cyan
target:
entity_id: input_select.light_strip_color
icon_color: light-blue
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Cyan")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Azure
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Azure
target:
entity_id: input_select.light_strip_color
icon_color: indigo
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Azure")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Blue
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Blue
target:
entity_id: input_select.light_strip_color
icon_color: blue
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Blue")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Violet
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Violet
target:
entity_id: input_select.light_strip_color
icon_color: purple
badge_icon: >-
{% if is_state("input_select.light_strip_color", "Violet")
%}
mdi:star
{% else %}
{% endif %}
badge_color: orange
- type: custom:mushroom-template-card
primary: Magneta
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: Magneta
target:
entity_id: input_select.light_strip_color
icon_color: pink
badge_icon: >-
{% if is_state("input_select.light_strip_color",
"Magneta") %}
mdi:star
{% else %}
{% endif %}
badge_color: orange
Hi @Cloos , appreciate your work. Just wondering, would it be possible to reduce the background padding behind the sub-buttons? It’s quite large and makes text trunacte on smaller devices, thanks.
3 Likes
Hi!
Does anyone know of a way to use the bubble card on a pictures entity card?
I use floorplans for my dashboard and would like to use popups to display additional information.
I also want to use the bubble card on my mobile dashboard but I don’t like the fact that the pop up button is always at the bottom of the screen. Is there a way to place a button in a specific spot like a grid. I can do this with mushroom buttons but I would like to use the pop up whenever I want to see more info for a specific room. Then I just have bunch of pop up buttons in a grid on my home screen.
Any exampled would also be appreciated!
Thanks!
Bubble cards are amazing. I used it to set up something like this:
Note the radius that I managed to set to 12 of most elements with this css codes:
styles: >-
.bubble-button-card-container, .bubble-button-background,
.bubble-range-slider {border-radius:12px !important; }
.buble-sub-button, .bubble-icon-container {border-radius:11px
!important;}
(slider)
styles: >-
.bubble-button-card-container, .bubble-button-background
{border-radius:12px !important;} .buble-sub-button,
.bubble-icon-container {border-radius:11px !important;}
.bubble-button-background { background-color: ${state === 'on' ?
'#948278' : 'var(--bubble-button-background-color) !important'}; }
.bubble-icon-container { background-color: ${state === 'on' ?
'#49423e' : 'var(--card-background-color,
var(--ha-card-background)) !important'}; } .bubble-icon { color:
green; } .bubble-icon { color: ${state === 'on' ?
'rgb(255,220,200)' : 'var(--card-icon-color)'}!important; }
(switch)
styles: >
.bubble-button-card-container, .bubble-button-background,
.bubble-range-slider {border-radius:12px !important;}
.buble-sub-button, {border-radius:11px !important;}
.bubble-button-background {background-color:
var(--ha-background-color);} .bubble-range-fill
{background-color:#49423e !important;}
(Input number)
However, I get stuck with the input select. This is what I tried now:
.bubble-select-card-container, .bubble-icon-container {border-radius:12px; !important}
.mdc-deprecated-list, .mdc-menu, .mdc-menu-surface {border-radius:10px; !important}
.mwc-list-item {border-radius:12px; !important}
mwc-list { background-color:gray !important;}
Resulting in this:
Anyone an idea how to change the radius and background color of the drop down menu and menu selector?
1 Like
I‘m using the dropdown with bubble seperator. Howewer I think the css style is the same or similar. You can try this:
styles: |-
* {
border-radius: 4px !important;
}
.bubble-sub-button {
background-color: var(--ha-card-background);
}
So I previously implemented a dashboard based on @Cloos Mobile First Dashboard. I’m trying to figure out how to take the header code used in that for the animated weather icons, and animate the weather icons in a Bubble card.
Can anyone else? Is there a way to point the card to the animated icons folder?
1 Like
Can you share the theme ? 
(i love the background blur )
Can’t get ${hass.states[entity].attributes to work.
This does not work:
.bubble-sub-button-1 > ha-icon {
color: ${hass.states['fan.fan_fan'].attributes.percentage === '83' ? 'green' : 'red'} !important;
}
But using the same preferences on another card I am able to use the percentage attribute without any issues:
icon_color: |
{% if states('fan.fan_fan') == 'on' %}
{% if state_attr('fan.fan_fan', 'percentage') == 83 %}
blue
{% else %}
grey
{% endif %}
{% else %}
grey
{% endif %}
Hi,
i have 1 question and i think one bug.
Question:
Is there a way to change the round the numbers in the innerText?
${card.querySelector('.bubble-state').innerText =
hass.states["sensor.wohnzimmer_raumthermostat_temperature"].state + "°C"}
currently give me 22.22°C and i want only one decimal value (22.2°C).
Bug?:
If i use the card.querySelector before the styling of the subbuttons the first subbutton will not style but if i after the styling if the subbutton it is working fine:
Before Subbuttons:
Styling
styles: |-
.bubble-icon-container {
background: var(--orange-color) !important;
}
${card.querySelector('.bubble-state').innerText =
hass.states["sensor.wohnzimmer_raumthermostat_temperature"].state + "°C • " +
hass.states["sensor.wohnzimmer_raumthermostat_humidity"].state + "%"}
.bubble-sub-button-1 {
justify-self: right;
background-color: ${hass.states['media_player.wohnzimmer_2'].state === 'playing' ? 'lightgreen' : 'red'} !important;
}
.bubble-sub-button-2 {
justify-self: right;
background-color: ${hass.states['binary_sensor.wohnzimmer_balkontur'].state === 'on' ? 'lightblue' : ''} !important;
${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.wohnzimmer_balkontur'].state === 'on' ? 'mdi:window-open-variant' : 'mdi:window-closed-variant')}
}
.bubble-sub-button-3 {
justify-self: right;
background-color: ${hass.states['sensor.wohnzimmer_ultimatesensor_mini_scd41_co2'].state < 1000 ? 'var(--success-color)' : hass.states['sensor.wohnzimmer_ultimatesensor_mini_scd41_co2'].state < 1500 ? 'var(--warning-color)' : 'var(--error-color)'} !important;
}
After Subbuttons:
Styling
type: custom:bubble-card
name: Wohnzimmer
icon: mdi:sofa
entity: climate.wohnzimmer_thermostat
card_type: button
button_type: state
show_name: true
show_state: false
tap_action:
action: navigate
navigation_path: '#livingroom'
button_action:
tap_action:
action: navigate
navigation_path: '#livingroom'
sub_button:
- entity: media_player.wohnzimmer_2
show_state: true
show_attribute: false
show_last_changed: false
show_name: false
- entity: binary_sensor.wohnzimmer_balkontur
show_state: true
show_attribute: false
show_last_changed: false
show_name: false
- entity: sensor.wohnzimmer_ultimatesensor_mini_scd41_co2
show_state: true
show_attribute: false
show_last_changed: false
show_name: false
card_layout: large-2-rows
styles: |-
.bubble-icon-container {
background: var(--orange-color) !important;
}
.bubble-sub-button-1 {
justify-self: right;
background-color: ${hass.states['media_player.wohnzimmer_2'].state === 'playing' ? 'lightgreen' : 'red'} !important;
}
.bubble-sub-button-2 {
justify-self: right;
background-color: ${hass.states['binary_sensor.wohnzimmer_balkontur'].state === 'on' ? 'lightblue' : ''} !important;
${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.wohnzimmer_balkontur'].state === 'on' ? 'mdi:window-open-variant' : 'mdi:window-closed-variant')}
}
.bubble-sub-button-3 {
justify-self: right;
background-color: ${hass.states['sensor.wohnzimmer_ultimatesensor_mini_scd41_co2'].state < 1000 ? 'var(--success-color)' : hass.states['sensor.wohnzimmer_ultimatesensor_mini_scd41_co2'].state < 1500 ? 'var(--warning-color)' : 'var(--error-color)'} !important;
}
${card.querySelector('.bubble-state').innerText =
hass.states["sensor.wohnzimmer_raumthermostat_temperature"].state + "°C • " +
hass.states["sensor.wohnzimmer_raumthermostat_humidity"].state + "%"}
Bubble Card 2
v2.2.4
Hi everyone!
This new release fixes some more issues related to the pop-ups (again!), but also some others.
I also want to mention that I have been promising many new features to you all, sometimes saying they would be coming soon. I now realize that I may have overestimated myself but also my time, and my to-do list has become quite extensive 
I apologize for this, but I believe it is crucial to focus on stability before moving on to new things. I know you don’t hold it against me, but I wanted to let you know.
Thank you for your understanding and support!
Here is the full changelog:
Bug fixes and optimizations
- Pop-up fixes:
- Fixed some issues with the pop-ups hash system when called from some cards. Should fix #742.
- Opening Home Assistant pop-ups (like the more info panel) from a pop-up is not closing this one anymore. #731
- Some more minor pop-up optimizations.
- Select card large layout: The select card large layout was not correct, this is now fixed. #743
- Horizontal buttons stack navigation: The horizontal buttons stack was not able to navigate to other views anymore after the v2.2.3 release, this is now fixed. #733
I can’t wait for your feedback as always!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
4 Likes
Thanks, great update as always!
I have a minor tweak I want to make, when using the Bubble card media player, all buttons and information gets hidden when you pause music. This means I cannot start playing again from the card?
Same thing happens for a second when pressing next. The card becomes empty for a second. Is it possible to have the buttons showing in states like playing, buffering, idle, paused… etc?