I’m not sure at all but I think that someone already have opened an issue for this.
I’m having the same issue. Did you ever get it resolved?
Looks great. Can you share your code, if you don’t mind
TY
Is it possible to have more than one condition in the templates? The sensor has 3 possible values (1,2,3). I want to have a specific color of the sub-button for each value.
type: custom:bubble-card
card_type: separator
name: 'Wetter '
icon: mdi:weather-cloudy
sub_button:
- entity: sensor.gemeinde_sinntal_aktuelle_warnstufe
name: Warnung
show_icon: false
show_name: true
show_state: true
- name: Vorwarnung
show_state: true
show_name: true
show_last_changed: false
entity: sensor.gemeinde_sinntal_vorwarnstufe
show_icon: false
card_layout: large
styles: |-
.bubble-sub-button-1 {
background-color: ${hass.states['sensor.gemeinde_sinntal_aktuelle_warnstufe'].state === '3' ? 'purple' : '2' ? 'red' : '1' ? 'orange' : 'green'};
}
How would I go about setting the background of the media player to a blurred version of the album cover / artwork?
You have to repeat the hass.states code for each state. Like this:
${hass.states['sensor.gemeinde_sinntal_aktuelle_warnstufe'].state === '3' ? 'purple'
: hass.states['sensor.gemeinde_sinntal_aktuelle_warnstufe'].state === '2' ? 'red'
: … and so on
Is it possible to have a custom icon for a button??
Thanks
Hi, this thread is getting really long but I’ve described how you can achieve this here:
Sure, here is the code for living room (“Wohnzimmer”)
- type: custom:bubble-card
name: Wohnzimmer
icon: mdi:sofa
entity: climate.wohnzimmer
card_type: button
button_type: state
show_name: true
show_state: false
tap_action:
action: navigate
navigation_path: '#wohnzimmer'
button_action:
tap_action:
action: navigate
navigation_path: '#wohnzimmer'
sub_button:
- entity: input_boolean.lueften_wohnzimmer
show_state: true
- entity: media_player.apple_tv
show_state: true
show_attribute: false
show_last_changed: false
show_name: false
- entity: group.alle_wohnzimmerfenster
show_name: false
show_state: true
- entity: group.alle_wohnzimmerrollladen
show_icon: true
show_background: true
show_name: false
show_state: true
card_layout: large-2-rows
styles: |-
.bubble-icon-container {
background: var(--orange-color) !important;
}
${card.querySelector('.bubble-state').innerText =
hass.states["sensor.wohnzimmer_temperatur"].state + "°C • " +
hass.states["sensor.wohnzimmer_luftfeuchtigkeit"].state + "%"}
.bubble-sub-button-1 {
background-color: ${hass.states['input_boolean.lueften_wohnzimmer'].state === 'on' ? 'lightblue' : ''} !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['media_player.apple_tv'].state === 'playing' ? 'lightgreen' : ''} !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['group.alle_wohnzimmerfenster'].state === 'open' ? 'lightblue' : ''} !important;
${subButtonIcon[2].setAttribute("icon", hass.states['group.alle_wohnzimmerfenster'].state === 'open' ? 'mdi:window-open-variant' : 'mdi:window-closed-variant')}
}
.bubble-sub-button-4 {
background-color: ${hass.states['group.alle_wohnzimmerrollladen'].state === 'open' ? 'lightgreen' : ''} !important;
${subButtonIcon[3].setAttribute("icon", hass.states['group.alle_wohnzimmerrollladen'].state === 'open' ? 'mdi:window-shutter-open' : 'mdi:window-shutter')}
}
I just tweaked the card to make it a little bit more colorful.
4 Likes
If anyone is having alignment issues, do a hard refresh. That’s ctrl-F5 on your browser. In the companion app, nuke the cache in the app settings.
Bubble Card 2
v2.2.1
Hi everyone!
First of all, I’m really happy to see that the pop-ups seem to be much faster for everyone! This really made my day!
This new version fixes an issue I couldn’t miss, as four of you reported it on GitHub 
The bug was related to sub-buttons triggering actions below them and was introduced in v2.2.0.
I also fixed an issue with the backdrop of the pop-ups, which wasn’t always showing/hiding correctly.
And while I was at it, I found another issue in the pop-ups code… and guess what? They’re even faster now… Especially when opening a pop-up for the first time. I tested it on my slowest device (Lenovo ThinkSmart View) and the difference is really noticeable compared to the previous version. I don’t think it can get any better now. And I love it!
Well that’s all, see you next time everyone!
Bug fixes and optimizations
- Sub-button actions issue: More info above. And thank you guys. #701 #702 #704 #707
- Pop-up backdrop issue: More info above. #703
- Pop-up optimization (again?!): More info above.
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:
4 Likes
Hmm ok. yeh I can’t get it to work. I’ll play around further.
See this works for me! For some reason the custom CSS from SubJimbo won’t work.
Does this work for changing icons too?
Where is it possible to specify the default colors?
Cheers
Thank you.
Good morning, I’ve been trying to center the text of the bubble card for days. Is that possible somehow?
Greetings, Georg
I am working on the horizontal button stack. I like the ability to highlight the selected icon, but I want to remove the animation and only change the background color for the button when it is pressed. I have found the css for the animation, but changing the background color does nothing, it still pulsates with the same colors as before. How do I edit the color it is pulsating in and disabling the pulsating while keeping the color of the highlight?
.bubble-button.highlight {
animation: pulse 1.4s infinite alternate!important;
background-color: red!important;
}
Also, how do I conditionally change the icon on the horizontal button stack? I can only find the option to change the background color conditionally?
Hi @Cloos fantastic card, I am converting my dashboard to mainly use them, thanks for the hard work!
I have a question that hopefully has not been answered before, the threat is pretty long now and is hard to find things. I am trying to change the icon on a bubble button of type state to a local SVG based on the dynamic state, basically replacing the icon with an animated svg of the current weather.
As a test I have this:
.bubble-icon {
background-image: url("/local/weather-icons/sunny.svg");
background-size: cover;
}
However with Show icon toggle off the icon wont show, and with it toggle on, both the icon and the image show, the weather icons are transparent SVGs
any help would be appreciated.
Hi, you can remove the icon by adding this in your YAML:
icon: none
I haven’t tried so tell me if it works for you.
is it possible to change the size, color and position of the title of a separator?
I’ve tried styles | .bubble-name {
color: red !important} not working