example???:
"&{hass.states['media_player.spotify_mattia_ticconi'].attributes.entity_picture}"
It’s a $ and not a &. Like this it should works:
styles: |
.pop-up {
background: url('${hass.states['media_player.spotify_mattia_ticconi'].attributes.entity_picture}') center no-repeat;
}
Okay great, everything works perfectly!
But what if I now wanted to set the cover as wallpaper only when the player is playing?
Thanks for the tips @Cloos and @bowhunt24.
Changing to “square: false” helped a bit but the column_fix didnt seem to do much.
What ended up fixing it is quite strange.
If I comment out only the “- type: vertical-stack” line, I get an error in my yaml (as you would expect) but the layout is now perfect again 
Here is a simplified version of the bottom of my view. Note the commented line below ######VACUUM
############### POPUPS ####################
############## WEATHER
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#weather'
auto_close : 100000
bg_blur: 0
bg_opacity: 0
width_desktop: 1024px
close_on_click: true
- type: horizontal-stack
cards:
- type: custom:bom-radar-card
[...]
- type: custom:platinum-weather-card
[ ...]
################## CALENDAR
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#calendar'
name: Calendar
icon: mdi:calendar
auto_close : 100000
close_on_click: true
bg_blur: 0
bg_opacity: 0
- type: custom:swipe-card
parameters:
spaceBetween: 8
pagination:
type: bullets
cards:
- type: calendar
[...]
- type: calendar
[...]
################ VACUUM
# - type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#vacuum'
auto_close : 100000
bg_blur: 100
bg_opacity: 100
- type: vertical-stack
cards:
- type: custom:xiaomi-vacuum-map-card
[...]
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
[...]
- type: custom:button-card
not related to the topic in this thread, sorry, but related to the sticky menu:
what’s surprising to me is the creator does not mention that the sticky menu at the bottom covers a final card one might have there…
adding an extra empty card with the same height as the sticky menu + some margin would probably solve that
It could still be the render as square issue - if you are using a card nested inside of a grid or stack, BOTH the stack/grid AND the nested card(s) have to be unchecked for rendering as square. If you only changed one, one of the cards could still be messing up your layout.
1 Like
Getting tons of errors like these on my log:
2024-04-07 00:21:16.697 ERROR (MainThread) [frontend.js.latest.202404041] Uncaught error from Chrome WebView 124.0.6367.18 on Android 14
TypeError: Cannot read properties of null (reading ‘classList’)
/hacsfiles/Bubble-Card/bubble-card.js:520:1627
What is causing this? And how to fix?
Good afternoon everybody.
How do I increase the size of icons.
Thank you
Here is the code
type: custom:bubble-card
card_type: pop-up
hash: '#server'
icon: phu:intel-nuc
bg_blur: '20'
shadow_opacity: '20'
bg_opacity: '88'
name: Server DLC
styles: |
.icon-container {
color: #2196f3 !important;
border: solid 2px #2196f3;
}
ha-icon {
color: #2196f3 !important;
}
* {
font-size: 16px !important;
}
margin: 7px
is_sidebar_hidden: false
hide_backdrop: false
I am getting the same errors on my Chrome as you can see in my post two days ago…
Did you find a solution?
Good morning, I wanted to ask you if it is possible to recall the popup of a bubble card that is in another tab of the Dashboard.
I’ll explain.
I have buttons in the Home Dashboard of my Tablet that recall a Bubble Card popup. Is it possible that the buttons recall a bubble card that is not in the Home but in another label on the Dashboard!?
Is there a way to style the separator card to remove the line and just have the icon and name/title?
I have this button to navigate to the pop-up card:
- type: custom:bubble-card
card_type: button
button_type: custom
entity: media_player.camera
name: Camera
icon: phu:sonos-play-3
tap_action:
action: navigate
navigation_path: '/dashboard-bubble/media#sonos_camera'
show_state: false
When i press it i am lead to the dashboard with the pop-up correct, but, if the media player is playing i don’t have the pop-up opened, but only the horizontal-button-stack. How to have the chosen pop-up opened when choosing it?
I believe your navigation path should just be ‘#sonos_camera’ and you dont need all the rest.
My button is in another dashboard, so i think i must use the complete path to the other dashboard, but the problem is that the pop-up of that media player do not open automatically. I am forced to click on the horizontal-button-stack to open it.
Is it possible to have 2 horizontal-button-stack one over the other?
I am asking this as in a desktop environment i can only see the first 2 or 3 button, the other are invisible.
Or there is another mode to view more than one horizontal-button-stack?
Sorry if the question is stupid, but i am at first steps in this card…
How do you change the icon size in the popup to make it larger? Thanks!
I also can’t get the entity picture to work, would love to know if anyone was able to get it working successfully 
Great job, congratulations!
I’ve replaced the light buttons with your theme and they look really good.
It would be fantastic if the cover type had a slider; something similar can be achieved with the button/slider, but the icon doesn’t update.
Thank you!
This is possible in the new v2 beta, I forgot to announce it here! This feature is one of new possibilities of the new release.
Here is the link to the full changelog:
1 Like
can you share you code or this ?