Thanks. You’re right it is now working since the updated version. Your efforts are hugely appreciated, I’ve just bought you a beer to say thanks.
1 Like
addendum - although it’s working for input_number entities on my HA instance, it’s still not working for number entities. For number entities, when I change the state of the slider from the bubble interface it doesn’t change the actual entity state, and reverts back to the previous state 1s after I move the slider… Again, if I adjust the slider from elsewhere in HA then the bubble slider does move to reflect the updated state.
I can’t seem to get the media button to change styles/colors. Trying to replicate the “yellow” look you did in your example ages ago, but no matter what i change the style to it stays default…
Note, it it only when thee card type is selected as Media Player. If I make it a button, the styles applies.
I’m a noob so please be patient with me. I have switched to the latest version of bubble card. Why does this background color no longer work?
- type: custom:bubble-card
card_type: button
entity: switch.relay_switch_1x3kw_3
name: Switch
styles: |-
.switch-button {
background-color: ${state === 'on' ? 'rgba(103, 114,209,1)' : 'rgba(103, 114, 209,0.1)'} !important;
}
Have you put all your pop-up at the first position? I’ve explained it in the documentation and in the editor but I understand that some users are not reading these after each updates.
Hi, some custom styles have changed in the v2, I’ve added new examples in the documentation, this case is covered in the Styling section.
Here is the raw code of my media player card, I’ve forgot to had some examples for that card indeed.
type: custom:bubble-card
card_type: media-player
card_layout: large
entity: media_player.salon
hide:
power_button: true
previous_button: true
show_state: true
show_last_changed: true
show_attribute: true
attribute: volume_level
sub_button:
- entity: media_player.salon
show_background: false
icon: mdi:power
show_name: false
tap_action:
action: call-service
service: homeassistant.toggle
target:
entity_id: media_player.salon_2
styles: |-
.bubble-media-player-container {
background: rgb(242,168,59);
color: var(--primary-background-color);
}
.bubble-sub-button {
color: var(--primary-background-color) !important;
}
.bubble-play-pause-button {
color: rgb(242,168,59);
background: var(--ha-card-background);
}
.bubble-volume-slider {
border: solid 8px rgb(242,168,59);
border-radius: 32px !important;
margin-left: -8px;
color: rgb(242,168,59);
}
.bubble-mute-button {
color: rgb(242,168,59);
}
.bubble-range-fill {
background: rgb(222,148,0) !important;
}
2 Likes
Like I said in the editor note and in the documentation, the sliders currently supports only lights, covers, media players and input numbers. But I will work on more cases soon.
Apologies!
1 Like
I really like the card and the hard work with your development 
already spent you a beer 
As i would like to switch my complete dashboard to bubble cards incl. sub buttons i would need support with the style options.
Does anybody of you know how i would achive the same styling like in the right card?
Here is the yaml:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
icon: mdi:room-service-outline
name: Räume
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
name: Büro
icon: mdi:desk-lamp-on
entity: sensor.gw2000a_v2_1_8_indoor_temperature
show_state: true
show_attribute: false
tap_action:
action: call-service
service: light.toggle
target:
entity_id: light.mi_desk_lamp_pro
button_action:
tap_action:
action: navigate
navigation_path: '#office'
card_layout: large
sub_button:
- name: Raum
icon: mdi:menu
show_background: false
tap_action:
action: navigate
navigation_path: '#office'
styles: |-
.bubble-icon-container {
background-color: ${hass.states['light.mi_desk_lamp_pro'].state === 'on' ? 'orange' : 'red'} !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
name: Büro
icon: mdi:desk-lamp-on
entity: light.mi_desk_lamp_pro
show_state: false
show_attribute: false
tap_action:
service: light.toggle
target:
entity_id: light.mi_desk_lamp_pro
action: toggle
button_action:
tap_action:
action: navigate
navigation_path: '#office'
card_layout: large
sub_button:
- entity: sensor.gw2000a_v2_1_8_indoor_temperature
show_icon: false
show_state: true
show_background: false
- name: Raum
icon: mdi:menu
show_background: false
tap_action:
action: navigate
navigation_path: '#office'
styles: ''
I need to use the sensor entity in the left card as i want to display the temperature below the room name, otherwise it’s not readable on the mobile dashboard when i but more cards like this in a row
Found out the style options:
.bubble-button-background {
background-color: rgb(92, 83, 103) !important;
}
.bubble-icon-container {
background-color: ${hass.states['light.mi_desk_lamp_pro'].state === 'on' ? 'rgb(114, 88, 87)' : 'rgb(79, 69, 87)'} !important;
opacity: 0.8 !important;
}
.bubble-icon {
color: ${hass.states['light.mi_desk_lamp_pro'].state === 'on' ? 'rgb(255, 177, 90)' : 'rgb(158, 153, 162)'} !important;
opacity: 1 !important;
}
If there is a better option, then please 
Hi thanks again for your work and the new version.
I would like to know if it’s possible to have more than one “if” for background color.
I’ve this
type: custom:bubble-card
card_type: button
button_type: state
card_layout: large-2-rows
name: XxX
entity: person.XxX
icon: mdi:human-male
show_state: true
styles: |
.bubble-button-card-container {
background-color: ${state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-1 {
background-color: ${hass.states['person.XxX'].state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['person.XxX'].state === 'home' ? 'green' : 'red'} !important;
}
.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;
}
sub_button:
- entity: sensor.oneplus_wifi_connection
icon: mdi:wifi
show_background: false
show_state: true
tap_action:
action: more-info
show_last_changed: true
show_attribute: false
show_name: false
- entity: sensor.oneplus_battery_level
icon: mdi:battery
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor.oneplus_next_alarm
icon: mdi:alarm
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor.home_oneplus_distance
icon: mdi:map-marker-distance
show_background: false
show_state: true
tap_action:
action: more-info
And I wish color change if state if “home” or “work” or “not_home”.
background-colour: ${hass.states['person.XxX].state === 'home' ? 'rgba(131,41,48,1)' : (hass.states['person.XxX'].state === 'work' ? 'rgba(74,91,107,1)' : (hass.states['Person.XxX'].state === 'not_home' ? 'rgba(130,136,178,1)' : 'rgba(221,221,221,1'))}
2 Likes
Brilliant thank you!
Hello,
is there a way to move the sub buttons all to the left (on the red line) instead of the right.
2 Likes
Hi there,
First of all, great job, love this card.
I need help with style, I want to change the icon color and backgroud color of a button state, based on a sensor value.
I want the color to be red if value of the sensor is higher than 0 and to be green if value is lower than 0.
Tried like this:
{% if states('sensor.energia_geral_channel_1_power') | float > 0 %}
.bubble-icon {
color: red !important;
opacity: 1 !important;
}
.bubble-button-card-container {
background: rgb(210,60,0) !important;
opacity: 1 !important;
}
{% elif states('sensor.energia_geral_channel_1_power') | float < 0 %}
.bubble-icon {
color: green !important;
opacity: 1 !important;
}
.bubble-button-card-container {
background: rgb(153,188,133) !important;
opacity: 1 !important;
}
{% endif %}
but with this it’s always green, doesn’t matter if the value of the sensor is higher ou lower than 0.
Thats something I would like to do aswell. The allignment over several cards below each other is a mess 
Hi, Bubble Card doesn’t supports Jinja templates, only JS templates, I’ve added many examples in the documentation at the Templates section. I will add a note about that to makes it clearer for the new users.
Hi @Cloos , This new version (V2.0/2.0.1) broke my dynamic weather icon implemented via card-mod. I see in the documentation that the dynamic weather icon is now possible without leveraging card-mod; however I cannot figure out how to get it functional.
The expected Icon should show to the left of the “Weather” text - yet there isn’t anything. As stated above, I used card-mod to add a Jinja template as the --card-mod-icon value. I attempted to use the getWeatherIcon function as observed in the documentation, and when I do, the entire pop-up disappears (clicking the button to open the Weather popup does not result in the popup opening/displaying). Can this helpful bunch point me in the right direction??
The YAML - using JS Template
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#weather'
margin_top_desktop: 8%
margin_top_mobile: 8%
hide_backdrop: true
bg_color: none
close_on_click: false
width_desktop: 620px
styles: >
.pop-up {
padding: 0px 8px 220px 8px !important;
}
#header-container {
transform: skew(20deg);
}
.close-pop-up {
--mdc-icon-size: 30px !important;
transform: skew(-20deg);
} .bubble-button-card-container, .bubble-pop-up-container,
.bubble-icon-container, .bubble-close-button {
background-color: transparent !important;
grid-gap: 0px !important;
gap: 0px !important;
--grid-gap: 0px !important;
--vertical-stack-card-gap: 0px !important;
}
.bubble-icon {
transform: skew(-20deg);
opacity: 1;
--mdc-icon-size: 30px !important;
}
.bubble-name {
font-size: 20px;
transform: skew(-20deg);
}
#header-container {
background: rgba(0, 0, 0, 0.32) !important;
transform: skew(20deg);
width: 98% !important;
margin: 0px 12px 0px 6px !important;
filter: drop-shadow(rgba(0,0,0,0.35) 0rem 0rem 6px);
}
name: Weather
icon: >-
${hass.states['sensor.current_weather_mdi_value'].attribute.icon}
The YAML - using getWeatherIcon
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#weather'
margin_top_desktop: 8%
margin_top_mobile: 8%
hide_backdrop: true
bg_color: none
close_on_click: false
width_desktop: 620px
styles: >
.pop-up {
padding: 0px 8px 220px 8px !important;
}
#header-container {
transform: skew(20deg);
}
.close-pop-up {
--mdc-icon-size: 30px !important;
transform: skew(-20deg);
} .bubble-button-card-container, .bubble-pop-up-container,
.bubble-icon-container, .bubble-close-button {
background-color: transparent !important;
grid-gap: 0px !important;
gap: 0px !important;
--grid-gap: 0px !important;
--vertical-stack-card-gap: 0px !important;
}
.bubble-icon {
transform: skew(-20deg);
opacity: 1;
--mdc-icon-size: 30px !important;
}
.bubble-name {
font-size: 20px;
transform: skew(-20deg);
}
#header-container {
background: rgba(0, 0, 0, 0.32) !important;
transform: skew(20deg);
width: 98% !important;
margin: 0px 12px 0px 6px !important;
filter: drop-shadow(rgba(0,0,0,0.35) 0rem 0rem 6px);
}
#root {
border-radius: 0px!important;
background: transparent !important;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
font-size: 15px !important;
font-family: Ubuntu !important;
font-smooth: always !important;
-webkit-font-smoothing: antialiased !important;
font-weight: 700 !important;
--grid-gap: 0px !important;
--vertical-stack-card-gap: 0px !important;
}
bubble-card::after {
/* Hide the gradient in the top of the pop-up */
display: none !important;
border-radius: 0px!important;
}
ha-chart-base {
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
padding: 0px !important;
font-family: Ubuntu !important;
font-smooth: always !important;
-webkit-font-smoothing: antialiased !important;
}
:host {
--mush-icon-symbol-size: 1em !important;
}
::slotted(ha-icon), ::slotted(ha-state-icon), ha-state-icon.active{
--chip-icon-size: 0.85em !important;
--mdc-icon-size: 0.85em !important;
font-family: Ubuntu !important;
--chip-font-size: 15px !important;
}
::slotted(span) {
font-size: 13px !important;
font-family: Ubuntu !important;
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
font-smooth: always !important;
-webkit-font-smoothing: antialiased !important;
}
${icon.setAttribute("icon", getWeatherIcon(hass.states['sensor.tomorrow_io_hourly_this_hour'].attributes.forecast[0]?.condition))}
name: Weather
Thanks in advance!