would be nice… 
@Cloos I see that we can set the button_type of the popup to different things. Would it be possible to set it to a media_player? I think that would look nice and i have a use case for it. I could build out all the sub buttons myself but was curious if we could get that added as an update?
The documentation illustrates how to use a picture instead of an icon with a sub-button. Is it possible to do this with the main button icon? I tried via css but didn’t know what to replace the .bubble-sub-button with.
Any plans to add support for picture/background as header for the pop-up card? thanks
Could you share your code for this
This is currently possible. Create a vertical stack and place the pop-up card as the first card in the stack, with the media card or components as subsequent elements in the stack.
I went ahead and added it to my original post for you.
Hi, I’ve just tried and the only way to makes it fixed (sticky) is by adding this in your custom styles:
styles: |-
${card.parentNode.host.parentElement.parentElement.style.position = "sticky"}
${card.parentNode.host.parentElement.parentElement.style.bottom = "14px"}
If I understand you correctly, you’re seeking to use Jinja to dynamically show the Weather condition/value as the button text in the horizontal-button-stack, right? If so, yes it’s doable with card-mod. My Bubble Card setup is all messed up after this recent update so I don’t know how to do this from the Bubble Card styles object.
type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#weather'
1_name: ' '
card_mod:
style: |
ha-card .weather {
--card-mod-icon: {{ states('sensor.current_weather_mdi_value') }}; // dynamically pull icon
.name:before {
content: "{{ states('sensor.current_weather_condition') }}" // dynamically pull your weather condition sensor state
}
}
Cloos
Do you know if it would even be possible to get something similar to this effect using a bubble-button card?
I have the relevant API to get the static map as a background image but wasn’t sure if it is people to change the background in this way?
I’ve tried using these custom styles within the Button Card pop up styles object and it seems to break the pop up functionality - clicking the button that should open the popup using these custom styles only changes the location path; the popup itself doesn’t actually display.
There are some issues with the pop-up header templates in v2.0.3, but I’m on it! For example it is also impossible to template the icons at the moment.
I have also fixed many other issues and I will try to release a new version today 
4 Likes
Hmm. I have a big header for my popup card already.
without but name portion:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#gretas-music'
width_desktop: 100%
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: media-player
entity: media_player.gretas_room
card_layout: large
- square: true
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: mass.play_media
target:
entity_id: media_player.gretas_room
data:
media_type: artist
media_id: Taylor Swift
artist: Taylor Swift
enqueue: replace
entity: media_player.gretas_room
name: Taylor Swift
icon: mdi:music-circle-outline
theme: Mushroom Square
hold_action:
action: none
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: mass.play_media
target:
entity_id: media_player.gretas_room
data:
media_type: album
media_id: The Greatest Showman
enqueue: replace
album: The Greatest Showman
entity: media_player.gretas_room
icon: mdi:music-circle-outline
hold_action:
action: none
name: Greatest Showman
theme: Mushroom Square
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: mass.play_media
target:
entity_id: media_player.gretas_room
data:
media_type: playlist
media_id: Disney Hits
enqueue: replace
entity: media_player.gretas_room
icon: mdi:music-circle-outline
theme: Mushroom Square
hold_action:
action: none
name: Disney Hits
columns: 3
Is it cuz i have a nested vertical stack?
Edit: i removed the nested vertical stack with the same results.
I misunderstood. Media-player isn’t a supported type of bubble card, but a media card can be nested in the pop-up.
What card did you use for this? Looks amazing with the map as a background
Would love to say it is all my own work but here is the link.
1 Like
Bubble Card 2
v2.0.4
Hi everyone! Here is a new release that includes many fixes for users who use custom JS templates. It is now much easier to work on them as they no longer break your cards when you modify them!
And there’s more:
Bug fixes and optimizations
- Added the missing
cardvariable for the custom templates in some cards. - JS custom templates no longer break your cards while you are working on them.
- Fixed the inability to template some pop-up header elements (like the icons).
- Fixed an issue that forced a weather icon instead of the user icon.
- Added the missing column/row forms in the empty column editor.
- Fixed some issues with the text scrolling effect that was not working/switching correctly in some cases.
- Fixed the horizontal buttons stack “Highlight current hash / view” feature, it was not working anymore. #569
- Fixed an issue with custom services in the cover card editor. #550
- Changed the
margin_top_mobileexample in the editor. In v2, you must use50vhinstead of50%to have a half-sized pop-up. - Prevented the feedback element from being clicked. PR #578 (from @brunosabot, addressing #533)
7 Likes
Hi Cloos,
I tried with the last 3 versions, including V2.0.4
Everything works on a PC, but not on the phone
tried emptying cache, remove all data but no luck.
The device is a Samsung S20, so not THAT old
Any other suggestions?
Hi, the only possible reason is that you don’t have correctly cleared your cache on your phone, take a look at this (if you use the HA companion app):
that’s exactly what I did (10 times by now)