So now the only - and main issue - is the size / height.
Having it height wise limited would make it so much easier to “tap-out” of the pop-up on my mobile.
hello is it somehow possible to automatically open the pop-up “#heizung” wenn i click on the notification on android?
i want to do it without an additional boolen which would be triggerd when clicking on the notification
data:
title: Warmwasser
data:
clickAction: "#heizung"
notification_icon: mdi:water-thermometer
color: lightblue
message: Heute wurde noch kein Warmwasser gemacht. Aktuell {{states("sensor.hot_water_charging_bt6_30010") }}°C
action: notify.mobile_app_sm_g990b
You can do that with some custom CSS on the popup like that:
.bubble-pop-up {
height: 368px !important;
bottom: calc(50% - (368px / 2)) !important;
}
.bubble-pop-up-background {
border-radius: 42px !important;
}
2 Likes
AWE-SOME 
That really leveled-up my pop-up a lot!
Another question: Is blur disabled in the mobile-app?
Would be great to have it as well. I got a Pixel 8 Pro, which should have enough juice to render this.
you need to specify all the path in the clickAction
data:
title: Warmwasser
data:
clickAction: "/lovelace/main#Pop-Up"
notification_icon: mdi:water-thermometer
color: lightblue
message: Heute wurde noch kein Warmwasser gemacht. Aktuell {{states("sensor.hot_water_charging_bt6_30010") }}°C
action: notify.mobile_app_sm_g990b
1 Like
Where is the problem 
, why does the card not show the name of the network to which the mobile phone is connected?
Code:
${card.querySelector('.bubble-sub-button-1
.bubble-sub-button-name-container').innerText =
hass.states['sensor.rea_nx9_network_type'].state === 'wifi'
? hass.states['sensor.redmi_note_9_pro_wi_fi_connection'].state
: hass.states['sensor.redmi_note_9_pro_sim_1'].state
}
The result
Developer tools gives me good value:
Can I use an entity-picture on a sub-button? Instead of an icon …
RTFM … was just in the examples 
NO!!!
Here is the complete code of my card
type: custom:bubble-card
card_type: button
button_type: state
card_layout: large-2-rows
sub_button:
- entity: sensor.redmi_note_9_pro_network_type
show_state: true
state_background: false
name: Net
show_background: false
show_name: false
show_attribute: true
- entity: sensor.redmi_note_9_pro_battery_level
show_state: true
state_background: false
name: Baterija
show_background: false
show_name: false
show_attribute: true
entity: person.branislav
styles: >-
.bubble-sub-button-1 > ha-icon {
justify-self: right;
color: ${hass.states['sensor.redmi_note_9_pro_network_type'].state === 'wifi' ? 'var(--light-green-color)' : 'var(--light-blue-color)'} !important;
}
.bubble-sub-button-2 > ha-icon {
animation: ${hass.states['sensor.redmi_note_9_pro_battery_level'].state <= 15 ? 'blink 2s linear infinite' : ''};
color: ${
hass.states['sensor.redmi_note_9_pro_battery_level'].state >= 90
? "#008000" // Green
: hass.states['sensor.redmi_note_9_pro_battery_level'].state >= 60
? "#35f235" // Light Green
: hass.states['sensor.redmi_note_9_pro_battery_level'].state >= 50
? "#4abd4a" // Lime
: hass.states['sensor.redmi_note_9_pro_battery_level'].state >= 40
? "#FFFF00" // Yellow
: hass.states['sensor.redmi_note_9_pro_battery_level'].state >= 30
? "#FFBF00" // Amber
: hass.states['sensor.redmi_note_9_pro_battery_level'].state >= 20
? "#FFA500" // Orange
: hass.states["sensor.redmi_note_9_pro_battery_level"].state >= 10
? "#FF8C00" // Deep Orange
: "#FF0000" // Red
} !important;
}
@keyframes blink {
50% {opacity: 0; }
}
${card.querySelector('.bubble-sub-button-1
.bubble-sub-button-name-container').innerText =
hass.states['sensor.rea_nx9_network_type'].state === 'wifi'
? hass.states['sensor.redmi_note_9_pro_wi_fi_connection'].state
: hass.states['sensor.redmi_note_9_pro_sim_1'].state
}
${subButtonIcon[0].setAttribute("icon",
hass.states['sensor.redmi_note_9_pro_network_type'].state == 'wifi'
? 'mdi:wifi'
: 'mdi:signal-cellular-2')}
One thing that bothers me, as a beginner in using Bubble-card…When I enter the wrong syntax, it literally disappears, that is, it becomes unavailable!!!
I’ve a fan that gets signal from Bond Bridge while the actual power button is a zigbee controlled switch. I want to send service call based on state change -on [from fan slider or when icon is tapped then if the fan is not ON then it should be turned ON first]. This is to save the two step manual process.
- type: custom:bubble-card
card_type: button
button_type: slider
entity: fan.media_room_ceiling_fan
slider_live_update: false
show_state: false
show_attribute: true
attribute: percentage
icon: mdi:fan
sub_button:
- entity: light.media_room_light_1_2
tap_action:
action: toggle
tap_action:
action: call-service
service: script.fan_and_power_sync
target:
entity_id: script.fan_and_light_sync
data:
fan_entity: fan.media_room_ceiling_fan
light_entity: light.media_room_light_1_2
So far I’m achieving this through script.
alias: Fan and Power Sync
mode: single
fields:
fan_entity:
description: The fan entity to monitor.
example: fan.media_room_ceiling_fan
light_entity:
description: The light entity to control.
example: light.media_room_light_1_2
sequence:
- condition: template
value_template: "{{ is_state(fan_entity, 'on') }}"
- condition: template
value_template: "{{ is_state(light_entity, 'off') }}"
- target:
entity_id: "{{ light_entity }}"
action: light.turn_on
description: ""
But then I lose the standard behaviour of the button icon toggling.
Also the fan and power switches can be on and off manually as well so this is just to make sure the control through app still work.
I want this process to be generic so that I can apply to any fan in any room.
Hi! I’m new to Bubble-Card. Many thanks to Cloos for this great work!
What I unfortunately couldn’t find, but have seen on many images:
How can I remove the borders on the horizontal buttons? They are already colored according to the status, at least…
Thank you!
Here is another way to achieve it:
I used the EventListener code from an answer by @MrBearPresident in this discussion on GitHub: Is there a way to close a pop up from an action of a user defined button? · Clooos/Bubble-Card · Discussion #1101 · GitHub
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#pop-up"
name: Test
button_type: state
show_header: false
- type: custom:bubble-card
card_type: button
button_type: name
scrolling_effect: false
show_icon: true
show_name: false
name: Header
sub_button:
- name: ""
icon: mdi:close-thick
show_name: false
state_background: false
show_icon: true
show_background: true
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
background-color: rgba(0,0,0,0) !important;
}
.bubble-button-background{
background-color: rgba(229,229,229,0.5) !important;
width: 90% !important;
}
.bubble-sub-button-1 {
background-color: rgb(244, 84, 80) !important;
color: rgb(122, 5, 8) !important;
--mdc-icon-size: 15px !important;
height: 20px !important;
width: 20px !important;
min-width: 20px !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-sub-button-1-action{
cursor: pointer !important;
}
${(() => {
if(!card.extraListenerAdded){
card.querySelector('.bubble-sub-button-1').addEventListener('click', () => {
if (!location.hash) return;
setTimeout(() => {
const newURL = window.location.href.split('#')[0];
history.replaceState(null, "", newURL);
window.dispatchEvent(new Event('location-changed'));
}, 50);
})
card.extraListenerAdded = true;
}
})()}
icon: mdi:finance
In this way, you can avoid using the input_boolean as the trigger.
1 Like
Struggling with styles guys. I’m adding the piece of code you see at the end. First image is showing the visual editor rendering the change but in the second one the reality. What happens is that the color of the background of the button phase out to a lighter color due to some animation.
type: custom:bubble-card
card_type: button
entity: light.led_living
styles: |
.bubble-button-card-container {
background: ${state === 'on' ? '#A66844' : ''} !important;
}
.bubble-icon {
color: ${state === 'on' ? '#F28729' : ''} !important;
}
I tried with your code and I didn’t see the difference like your screenshot.
Could it be some particular theme?
If you try to specify the color for state off do you see the same problem?
Can someone tell me if I’m doing it wrong, or isn’t a gradient supported:
Not working with gradient:
styles: >-
ha-card {
--bubble-main-background-color: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to bottom, rgba(20,20,20,0.9), rgba(120,120,120,0.9))'
: 'linear-gradient(to bottom, rgba(20,20,20,0.6), rgba(120,120,120,0.6))'} !important;
}
.bubble-button-card-container { border: 4px solid
${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to right, rgba(255,255,0,0.8), rgba(255,165,0,0.8)) 1'
: 'linear-gradient(to right, rgba(100,100,100,0.6), rgba(150,150,150,0.6)) 1'} !important; box-sizing:
border-box;
}
Single colour is working:
styles: >-
ha-card {
--bubble-main-background-color: ${hass.states['light.lights_first_floor'].state === 'on'
? 'rgba(20,20,20,0.9)'
: 'rgba(20,20,20,0.6)'} !important;
}
.bubble-button-card-container { border: 4px solid
${hass.states['light.lights_first_floor'].state === 'on' ?
'rgba(255,255,20,0.8)' : 'rgba(100,100,100,0.6)'} !important; box-sizing:
border-box; }
Update 1: Got the background working:
.bubble-button-card-container {
background: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to right, rgba(99,96,7,0.8), rgba(99,70,7,0.8))'
: 'linear-gradient(to right, rgba(100,100,100,0.6), rgba(150,150,150,0.6))'} !important;
}
.bubble-button-card-container { border: 4px solid
${hass.states['light.lights_first_floor'].state === 'on' ?
'rgba(255,255,20,0.8)' : 'rgba(100,100,100,0.6)'} !important; box-sizing:
border-box; }
Update 2: the border is now coloured with a gradient, however the border is square:
.bubble-button-card-container {
background: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to right, rgba(20,20,20,0.8), rgba(99,70,7,0.8))'
: 'linear-gradient(to right, rgba(20,20,20,0.6), rgba(150,150,150,0.6))'} !important;
border: 4px solid transparent !important;
box-sizing: border-box;
border-radius: 25px !important;
border-image: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to right, rgba(255,255,0,0.8), rgba(225,165,0,0.8))'
: 'linear-gradient(to right, rgba(100,100,100,0.6), rgba(150,150,150,0.6))'} 1 !important;
}
Thank you very much in advance
Could you try this?
.bubble-button-card-container {
padding: 4px;
background: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to right, rgba(255,255,0,0.8), rgba(255,165,0,0.8))'
: 'linear-gradient(to right, rgba(100,100,100,0.6), rgba(150,150,150,0.6))'} !important;
z-index: 1;
}
.bubble-button-card {
position: relative;
border-radius: 32px;
background: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to right, rgba(20,20,20,0.8), rgba(99,70,7,0.8))'
: 'linear-gradient(to right, rgba(20,20,20,0.6), rgba(150,150,150,0.6))'} !important;
z-index: 2;
}
Hi Menalao,
thank you very much!
It gives me a round border, but messes up the transparency.
I guess this is because the buttons are rendered over each other.
I use a very bright border with a much darker inlay.
Switched off with the above code (changed the colours)
I played a bit with this, it does give me a border, but I run into problems with the bright border colouring.
I’m still tinkering with the colours.
It doesn’t really show, but the top buttons are all semi transparent, the border shows the state or in case of the TV shows multiple states.
The idea is that the gradient gives a sense of depth.
my latest code:
.bubble-button-card-container {
background: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to top, rgba(80,60,0,0.8), rgba(20,20,20,0.8), rgba(80,80,0,0.8))'
: 'linear-gradient(to bottom, rgba(10,10,10,0.8), rgba(50,50,50,0.8), rgba(0,0,0,0.8))'} !important;
border: 4px solid transparent !important;
box-sizing: border-box;
border-image: ${hass.states['light.lights_first_floor'].state === 'on'
? 'linear-gradient(to top, rgba(255,100,0,0.8), rgba(225,555,20,0.8))'
: 'linear-gradient(to bottom, rgba(140,140,140,0.8), rgba(90,90,90,0.8), rgba(0,0,0,0.8))'} 1 !important;
}
I’ll reply to myself: This is how the frame is removed:
.pop-up-kamera > .bubble-background-color {
border: 0;
}
Greettings!
1 Like
Lol. Welcome
Hi together,
I want to color the icon in sync with battery state:
Standard color: white
< 20 %: orange
< 10 % red
I have the following code:
color: ${state < '10' ? 'red' : state < '20' ? 'orange' : 'white'} !important;
But this doesn’t style the icon as wished.
E.g. if a battery is at 100%, the icon is orange. Under 10 % the battery, is also orange.
Can anyone help?
Thanks
Dominik