My system is up-to-date and running on a Mini PC with an Intel N100.
I’ve done some testing, and it seems the issue lies with using custom:hui-element. When I add the bubble-card for the popup, it stops working.
To put it simply I am not icon does not change, even though I think it should.
${subButtonIcon[0].setAttribute("icon", hass.states['media_player.optiplex_snapcast_client'].attributes.is_volume_muted ? 'mdi:volume-off' : 'mdi:volume-high')}
here is the code for the card:
type: custom:bubble-card
card_type: button
entity: media_player.optiplex_snapcast_client
button_type: slider
force_icon: false
show_state: true
slider_live_update: true
show_attribute: false
card_layout: large
tap_action:
service: ""
styles: >-
.bubble-range-fill {
background: rgba(79, 69, 87, 1) !important;
opacity: 1 !important;
}
${subButtonIcon[0].setAttribute("icon",
hass.states['media_player.optiplex_snapcast_client'].attributes.is_volume_muted
? 'mdi:volume-off' : 'mdi:volume-high')}
sub_button:
- entity: media_player.optiplex_snapcast_client
show_attribute: false
show_last_changed: false
show_state: false
show_name: false
show_icon: true
state_background: false
show_background: true
tap_action:
action: call-service
service: script.toggle_media_player_mute
data:
entity_id: media_player.optiplex_snapcast_client
target: {}
Thanks in advance
First I want to thank you. Really love the media player!
But I got a little issue. If I press the volume button and close it again the music info disappears and the volume button stays an X. Did I do anything wrong?
type: custom:bubble-card
card_type: media-player
entity: media_player.ray_wohnzimmer
show_last_changed: true
cover_background: true
styles: |-
.bubble-media-player-container {
background: transparent;
}
.bubble-play-pause-button {
background-color: transparent;
}
show_icon: true
hide:
power_button: true
Thanks in advance for any help.
My vertical stack does not look like that:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#POP-GF-HW-LAMP"
button_type: slider
entity: light.dev_ff_hw_lamp
show_attribute: true
attribute: brightness
sub_button:
- entity: light.dev_ff_hw_switch
show_state: true
state_background: true
show_icon: true
show_attribute: false
name: Switch
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
could you get rid of the custom:hui-element
Apparently it seems that to use the vertical-stack inside a picture-elements the only way is to use custom:hui-element
I’m having a issue regarding the bubble card. The image is shown correctly, but I can’t get the yellow background away. I want this to be not visible. It’s not in my picture itself. Tried everything with css properties, but maybe someone can help me?
I use the following code:
- type: custom:bubble-card
name: Zolder
icon: mdi:home-roof
entity: binary_sensor.sensor_bijschuur_contact
card_type: button
button_type: state
show_name: true
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/zolder
button_action:
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/zolder
sub_button:
- show_background: false
entity: binary_sensor.motion_sensor_extra_beweging
show_name: false
show_state: false
show_attribute: false
show_last_changed: false
show_icon: true
- entity: sensor.power_3
show_name: false
show_last_changed: false
show_attribute: false
attribute: raw_state
show_state: true
card_layout: large-2-rows
styles: |-
.bubble-icon{
--icon-primary-color: red;
}
.bubble-entity-picture{
background-image: url('/local/icons/bed.png') !important;
display: block !important;
background-size: cover !important;
}
Thank you!
You’re doing some exotic thing I guess.
Could you please make a github discussion in the category ‘questons about config’ and then share the whole yaml of the view.
This won’t be solved in 1 go.
Have you tried with a different picture?
I don’t have issues with this one:
[https://png.pngtree.com/png-clipart/20221227/original/pngtree-illustration-of-banyan-tree-with-hanging-roots-png-image_8811134.png]
Sure, the whole yaml is very big, but I can reproduce the problem with a simpler example, like I did here.
Thanks
Same thing 
Do you use a theme?
This variable is used for the background color of the .bubble-icon-container.
background-color: var(--bubble-button-icon-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
Use this to overwrite it.
.bubble-icon-container{
background-color: purple;
}
1 Like
Ah check. This pointed me in the right direction! Thanks!
Still got one problem left. Maybe someone knows this.
I can see the icon, but not completely, see below.
Is there a smart way to do this? Checked all of the below and played with it, but does not make it all visible
.bubble-entity-picture {
background-image: url('/local/icons/chair.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
height: 100% !important;
width: 100% !important;
display: block !important;
border-radius: 0 !important;
}
Do this hack from a week ago:
For the size of the image.
Read-up: background-size - CSS: Cascading Style Sheets | MDN
1 Like
Hi everyone! Love this bubble card, but it looks like I cannot make the background of my buttons same as my other for the theme I am using (btw is ios-dark-mode-blue-red from GitHub - basnijholt/lovelace-ios-themes: ❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds):
Can you help please?
This is what I am seeing as html parsed code for these buttons background:
Thanks!
Did you get this to work? I’ve checked this site and changed different css parameters, but still it does not show all of the picture.
I’ve also used the trick you linked and setted the 3 css parameters with them.
Thanks! 
You are missing a comparison value. Assuming that this attribute exists, you have not defined which value it needs to have for the one icon and otherwise for the other.
Ah I see I tried both ways but now I realize I had
=== `true`
but needed to remove the backticks
I’ve now used your bubble room card and converted it to my dashboard. Can you give me some advice on how I can arrange the subbuttons? I want the subbuttons to always be the same distance from each other. For example, if I only have 3, only the one at the bottom should disappear and the 3 remaining ones should keep their distance.
1 Like
I’ve been testing the room cards that have been designed and really like what i plan to do. but in my testing there is this small issue. when i click on the icon to make the bubble card pop up… the cards in the background shift down a few millimeters. I am not sure why. I can’t make the gif down to 3mb or less to show…
