Hello Community i am new to this pop up bubble card and im trying things out… i made a button pop up with a PIN code display for door access security, but the pop seems to be too small to be readable in a wall tablet… how can i make this button pop up bigger? big enough so it can be read on a wall tablet.
or there other ways to display the PIN code bigger aside from a button.
Insert the following code in the custom styles section:
* {
font-size: 16px !important;
}
Maybe even better is the following example:
type: custom: bubble-card
card_type: button
card_layout: large
styles: |
.large .bubble-button-card-container {
height: 120px;
}
.bubble-name-container {
height: 40px;
}
* {
font-size: 35px !important;
}
button_type: switch
rows: auto
entity: “your.entity”
i already tried this code but the text become crop inside the button card.
If you use the exact code as posted above (the example I posted) it should look like this:
Of course depending on what entity and text you choose…
Is there any way to disable haptic feedback on tap actions? It seems kinda buggy for me on my Android phone through the companion app, especially on sub buttons. Sometimes it happens to vibrate repeatedly for a couple of seconds before making an action, other times doesn’t vibrate at all.
Aside from that I’d just rather keep it disabled for the sake of consistency with the other cards that I’m using.
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;
}