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)
What version do you see in the Bubble Card editor when you are on your phone? (You can see it in the footer)
Edit: Have you installed it with HACS?
Hi,
Is it possible to change the colour of a sub-button icon based on state of an entity?
If the climate state is cool, the icon will change to snowflake with this code:
${subButtonIcon[0].setAttribute("icon", hass.states['climate.a_c_quarto'].state === 'off' ? 'mdi:fan-off' : hass.states['climate.a_c_quarto'].state === 'cool' ? 'mdi:snowflake' : hass.states['climate.a_c_quarto'].state === 'heat' ? 'mdi:fire' : 'mdi:fan' )}
But I also want to change the icon color to blue. Is it possible?
Thank you
You can add this in your custom styles, I will add this example in the documentation:
.bubble-sub-button-1 > ha-icon {
color: ${hass.states['climate.a_c_quarto'].state === 'on' ? 'green' : 'black'} !important;
}
Thank you!
Awesome!
Thanks
I am loving this card and using it in my dashboard. One question I have though is how do you change the 1 day to go and 0 days to tomorrow and today?
I use the Waste Collection Service Integration which then means I have some sensors set up that get the information directly from my local council.
I’m currently hiding the icon for the seperator card using icon:none, but how do I remove the space where the icon was so the title aligns left?
Alternatively, I could use a Title card as a workaround.
So im using the bubble card pop-up as a pop-up menu for my views which looks really good, but is there a way to get rid of the button up to the right which is unnecessary since i use the pop-up button to close the menu?
I also wonder if its possible to change the opacity of the buttons in the menu, and the background of it.
To get rid of the “X” use the following code in the custom styles section of the popup:
.pop-up > :first-child
{ display: none !important; }
1 Like