Thanks its bigger now just like on your picture… can i make the icon bigger too? I used the code on github to make icon larger but its not affecting anything…
styles: |
.bubble-icon {
--mdc-icon-size: 26px !important;
}
Hi the following code-snippet should work:
.large .bubble-icon-container {
--mdc-icon-size: 36px;
min-width: 58px !important;
min-height: 58px !important;
margin-left: 8px;
Would it possible to show a blurred media background for the media_player card, something like this? thanks
Hello Cloos, admirer of your project from the beginning, and French like you 
ahahha, I have a little question in version 1.0 we couldn’t make a separate view to just put the popup windows (because that loads the main view) I haven’t tested with V2 but can we do it now? Once again great respect for all of this work.
Hi! This is still not possible and I’m not sure that it will be possible at all with the way Bubble Card and Home Assistant works together. But in v2 the pop-ups don’t use any memory when they are closed and they take less space in the editor to make everything easier to manage.
Give it a test, this version is definitely better than v1!
1 Like
Hi, something like this?
Here is the custom styles YAML:
styles: |-
.bubble-media-player-container {
background: none;
}
ha-card {
overflow: hidden;
border-radius: 50px !important;
}
.card-content {
background: var(--background-color-2,var(--secondary-background-color));
}
.card-content::before {
content: '';
display: flex;
width: 100%;
height: 100%;
background-image: url(${hass.states['media_player.salon']?.attributes.entity_picture_local});
background-size: cover;
background-position: 50%;
filter: blur(20px);
top: 0;
position: absolute;
opacity: 0.5;
}
8 Likes
Awesome, thank you!
Hi.
I’ve two issue, don’t know how to solve them.
As we can see on the picture, the bubble card isn’t center on the screen (computer). On smartphone it’s ok.
Also I can scroll down more on laptop (on smartphone it’s ok).
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.WwW
forecast_type: daily
tap_action:
action: navigate
navigation_path: /lovelace/Meteo_detail
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
card_layout: large-2-rows
name: LilP
entity: person.XXX
icon: mdi:human-male
show_state: true
styles: |
.bubble-name-container {
margin-right: 0px !important;
}
.bubble-button-card-container {
background-color: ${state === 'home' ? 'green' : (hass.states['person.XXX'].state === 'Work' ? 'red' : (hass.states['person.XXX'].state === 'not_home' ? 'blue' : 'rgba(221,221,221,1'))} !important;
}
.bubble-sub-button-1 {
display: ${hass.states['sensor.oneplus_wifi_connection'].state === 'not connected' ? '' : ''} !important;
}
.bubble-sub-button-2 {
${icon.setAttribute("icon", hass.states['sensor.oneplus_battery_state'].state === 'charging' ? 'mdi:battery-charging' : 'mdi:battery')}
.bubble-sub-button-3 {
background-color: ${hass.states['person.XXX'].state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-4 {
background-color: ${hass.states['person.XXX'].state === 'home' ? 'green' : 'red'} !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
card_layout: large-2-rows
name: YyY
entity: person.YyY
icon: mdi:human-male
show_state: true
styles: |
.bubble-name-container {
margin-right: 0px !important;
}
.bubble-button-card-container {
background-color: ${state === 'home' ? 'green' : (hass.states['person.YyY'].state === 'Work' ? 'red' : (hass.states['person.YyY'].state === 'not_home' ? 'blue' : 'rgba(221,221,221,1'))} !important;
}
.bubble-sub-button-1 {
display: ${hass.states['sensor.iphone_de_YyY_ssid'].state === 'not connected' ? '' : ''} !important;
}
.bubble-sub-button-2 {
${icon.setAttribute("icon", hass.states['sensor.iphone_de_YyY_battery_state'].state === 'charging' ? 'mdi:battery-charging' : 'mdi:battery')}
.bubble-sub-button-3 {
background-color: ${hass.states['person.YyY'].state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-4 {
background-color: ${hass.states['person.YyY'].state === 'home' ? 'green' : 'red'} !important;
}
attributes:
label: YyY
attributes:
label: Présence
- type: custom:bubble-card
card_type: separator
name: Lumières
icon: mdi:lightbulb-multiple
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.nous_p2_light_salon_1
name: Salon 1
icon: mdi:lightbulb
show_state: true
show_last_changed: true
scrolling_effect: true
button_action:
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.nous_p3_light_salon_2
name: Salon 2
icon: mdi:lightbulb
show_state: true
show_last_changed: true
scrolling_effect: true
button_action:
tap_action:
action: toggle
attributes:
label: Salon
icon: mdi:sofa
- card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.ampoule_chambre_tbo
name: Tibo
icon: mdi:lightbulb
show_state: true
show_last_changed: true
scrolling_effect: true
button_action:
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.ampoule_chambre_YyY
name: YyY
icon: mdi:lightbulb
show_state: true
show_last_changed: true
scrolling_effect: true
button_action:
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.nous_p3_light_chambre
name: Chambre
icon: mdi:lightbulb
show_state: true
show_last_changed: true
scrolling_effect: true
button_action:
tap_action:
action: toggle
attributes:
label: Masterbedroom
icon: mdi:bed-king
- card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.ampoule_entree
name: Entrée
icon: mdi:lightbulb
show_state: true
show_last_changed: true
scrolling_effect: true
button_action:
tap_action:
action: toggle
attributes:
label: Entrée
icon: mdi:door
- type: custom:bubble-card
card_type: separator
name: Poubelles
icon: mdi:trash-can
- type: horizontal-stack
cards:
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: custom:button-card
entity: sensor.poubelle_grise_jour
name: Poubelles
icon: mdi:trash-can
layout: icon_name_state2nd
show_state: true
size: 20%
custom_fields:
date: |
[[[
return 'Le ' + states['sensor.poubelle_grise_jour'].attributes.date;
]]]
state:
- value: Dans 7 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 6 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 5 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 4 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 3 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 2 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Demain
operator: '=='
color: orange
icon: mdi:delete-restore
styles:
state:
- color: orange
- value: Aujourd'hui
operator: '=='
color: red
icon: mdi:delete-restore
styles:
state:
- color: red
styles:
icon:
- margin-left: 32px
name:
- margin-left: 6px
- justify-self: start
- font-size: 15px
state:
- font-weight: bold
- margin-left: 6px
- justify-self: start
- font-size: 12px
custom_fields:
date:
- top: 73%
- left: 43%
- position: absolute
- color: white
- font-size: 12px
attributes:
label: Poubelles
- card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.poubelle_grise_jour
name: Poubelle grise
icon: mdi:trash-can
layout: icon_name_state2nd
show_state: true
size: 30%
custom_fields:
date: |
[[[
return 'Le ' + states['sensor.poubelle_grise_jour'].attributes.date;
]]]
state:
- value: Dans 7 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 6 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 5 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 4 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 3 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Dans 2 Jours
operator: '=='
color: green
styles:
state:
- color: green
- value: Demain
operator: '=='
color: orange
icon: mdi:delete-restore
styles:
state:
- color: orange
- value: Aujourd'hui
operator: '=='
color: red
icon: mdi:delete-restore
styles:
state:
- color: red
styles:
icon:
- margin-left: 32px
name:
- margin-left: 6px
- justify-self: start
- font-size: 15px
state:
- font-weight: bold
- margin-left: 6px
- justify-self: start
- font-size: 12px
custom_fields:
date:
- top: 73%
- left: 43%
- position: absolute
- color: white
- font-size: 12px
- type: custom:button-card
entity: sensor.poubelle_jaune_jour
name: Poubelle Jaune
icon: mdi:trash-can
layout: icon_name_state2nd
show_state: true
size: 30%
custom_fields:
date: |
[[[
return 'Le ' + states['sensor.poubelle_jaune_jour'].attributes.date;
]]]
state:
- value: Dans 7 Jours
operator: '=='
color: yellow
styles:
state:
- color: yellow
- value: Dans 6 Jours
operator: '=='
color: yellow
styles:
state:
- color: yellow
- value: Dans 5 Jours
operator: '=='
color: yellow
styles:
state:
- color: yellow
- value: Dans 4 Jours
operator: '=='
color: yellow
styles:
state:
- color: yellow
- value: Dans 3 Jours
operator: '=='
color: yellow
styles:
state:
- color: yellow
- value: Dans 2 Jours
operator: '=='
color: yellow
styles:
state:
- color: yellow
- value: Demain
operator: '=='
color: orange
icon: mdi:delete-restore
styles:
state:
- color: orange
- value: Aujourd'hui
operator: '=='
color: red
icon: mdi:delete-restore
styles:
state:
- color: red
styles:
icon:
- margin-left: 32px
name:
- margin-left: 6px
- justify-self: start
- font-size: 15px
state:
- font-weight: bold
- margin-left: 6px
- justify-self: start
- font-size: 12px
custom_fields:
date:
- top: 73%
- left: 43%
- position: absolute
- color: white
- font-size: 12px
attributes:
label: Détails
I’m looking for some help to change the font color to black in dark mode please. In light mode the font is hard to see.
Hi guys!
Short question: What’s the best way to build a beautiful dashboard with Bubble-Card.
UI-Mode or YAML mode?
Thanks
Dominik
hello everyone, I’m looking to make my buttons less rounded on the edges, I looked in the themes I only see notions of colors, is it possible to change this directly or use the card mod?
You have to use the following code on the specific container:
border-radius: 20px !important;
Just play around with the px
I added this in custom style of the button:
.bubble-button-background {
background: rgb(138,153,119) !important;
border-radius: 30px !important;
}
I have no change in the rounding of the button,
You have to use it at the following place:
.bubble-button-card-container {
border-radius: 30px !important;
}
merci beaucoup
Bubble Card 2
v2.1.0-beta.1
Hi everyone!
I’m back! The past few weeks have been quite busy for me and I haven’t slept much because… I’m now a dad! And I’m so proud of this new achievement! 
Despite the new and joyous responsibilities, I’ve managed to take some time to address some of the recently submitted issues.
I also have a good news for some users. By fixing an issue with the haptic feedback feature, I found a massive memory leak in the sub-buttons actions. This was consuming the RAM and the CPU over time and was mainly noticeable on low-end devices. This issue was slowing down/breaking the pop-ups on some setups. I can say that everything is A LOT faster and everything is working perfectly now!
But that’s not all! I also wanted to introduce a new card to the collection. Here are all the details:
Select card
You now have the possibility to add a dropdown menu for your input_select entities! This new card also supports the sub-buttons and all the common Bubble Card features.
And here is the list of all other new features and bug fixes:
New features
- Select card: More details above, in YAML you can add it with
card_type: select, the YAML is basically the same as the buttons. - Deep attributes: @brunosabot added the ability to get deeper values in the attributes, like
forecast[0].templow. PR #577 - Assist action: You can now add the Assist action in the editor. #595
Bug fixes and optimizations
- Sub-button tap action none: Setting a sub-button tap action to none is not blocking a slider anymore.
- Sub-button state: Fixed an issue where the sub-button state was not always updated.
- Pop-up CSS issues: Some pop-up CSS issues have been fixed.
- Sub-buttons settings: Options in state button disabled have been fixed. #606
- Memory leak: A massive memory leak in the sub-buttons has been fixed. More info above. #612
- Haptic loop issue: The haptic loop issue has been resolved. #601
- Input_select options: The inaccessible
input_selectoptions in a pop-up have been fixed. #565 - HA 2024.7 compatibility: Fixed the pop-up preview in the HA 2024.7 editor.
- Icon resizing: The issue with not being able to resize the icon with a custom style in the separator has been fixed. #593
I’m planning to fix more issues and I still have a lot of new features in my head!
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:
14 Likes
Congrats on becoming a dad! New update looks awesome.
I went to try the new dropdown card immediately, but it only seems to accept input_select and not select as an entity. Any reason for that?
To be honest I didn’t even know that there was a select entity 
I will add it in the next beta!
Edit: Can you try to add one manually in YAML to see if it works?
2 Likes
Edit: Can you try to add one manually in YAML to see if it works?
That kinda works - the list is displayed correctly, but selecting options does nothing. I think it’s because there’s a different service name for that (input_select.select_option vs select.select_option).
1 Like
That makes sense indeed! It will be easy to fix then 