Hi everyone
How can I remove the border around the horizontal stack buttons. I’ve tried a lot and failed.
Since the latest version, I can’t do that anymore.
I got it. 
Have you tried this in your pop up icon container? By that I mean, when you click the Weather button in your horizontal button stack, are you able to get the dynamic Weather icon in your pop up header?
I ask because I’m using the same workaround in my horizontal button stack, which works as you’ve noted with card mod, yet cannot achieve the same in my Weather popup itself - the icon to the left of the .bubble-name is just a space where an icon should be.
Unfortunately I have not been able to template a header icon inside a popup yet. I’ll let you know if I manage to do it eventually.
Meanwhile, do you by any chance know how to template the actual text inside a horizontal button stack? I want my button inside horizontal stack for a weather popup to display a state of an entity.
Thanks for the quick reply! I was having trouble using the example from the documentation “change the background of a button…” using .button-buble-card-container only, as the color “mixed” with the background of the card itself when the entity is ‘on’. I noticed in the HTML that when the entity is using an “is-on” class, the background is set to --accent-color, which means to use a customized color I would need to also set .button-bubble-background-color to 0,0,0,0 to avoid blending. Does that sound right?
Hi, could you show an example how you implemented this code into the YAML code of a horizontal button stack? Don’t quite get it… thanks in advance!
Sure. Here is an example of a button inside horizontal stack that changes icon based on weather conditions:
type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#weather'
1_name: Weather
1_icon: mdi:weather-partly-cloudy
width_desktop: 1000px
card_mod:
style: |
.weather {
--card-mod-icon: {{ 'mdi:weather-' + states['weather.forecast_home'].state }} !important;
You may have to change your weather provider entity (weather.forecast_home) to something else though. I have not fully tested it yet but it works for current conditions.
1 Like
When I color the icon against a white background, it’s washed out, as if the white is a layer above the icon. In the example shown, the icon color is the same as the button background but clearly doesn’t appear that way. Is this something I can adjust via CSS or is the result of how the buttons are constructed?
* {
font-size: 12px !important;
color: white;
}
.bubble-button-card-container {
background: rgba(0,0,204,1) !important;
}
.bubble-icon-container {
background: rgb(255,255,255,1);
}
.bubble-icon {
--mdc-icon-size: 20px !important;
}
.bubble-icon {
color: rgb(0,0,204,1) !important;
}
Sorry to reply to my own - hope that’s not bad form? I realize my question does reference the Bubble theme, but I think the real question deals with how to implement the problem statement via the Bubble cards and CSS. Let me know if it’s too much off-topic!
Problem statement is simple: I want to ignore --accent-color for buttons that are ‘on’. They use the is-on style defines in styles.ts, which sets the card background to --accent-color. This hides the new background I want to conditionally set based on the entity state. I don’t want to delete --accent-color because it has a nice effect on other areas of the dashboard.
The only way I got this to work is:
.bubble-button-card-container {
background-color: ${state === 'on' ? 'var(--tech_active)' : 'var(--tech_inactive)' } !important;
}
.bubble-button-background {
opacity: 0 !important;
}
This seems a little funky, so could someone tell me if this is correct? If I use to use background-color: or color: under the .bubble-button-background, it has no effect.
Thanks!
Hi there, I have an issue that just popped up after installing the latest version. I have kiosk mode on, and now when I put ?edit=1 at the end of the string to edit my dashboard the entire screen goes black and I can’t see anything. Please help.
HI there,
is something like the one below possible with “Horizontal buttons stack”? Buttons with multiple batches…
2 Likes
Hi,
I have a whole load of dashboards with heavy use of bubble card pop ups and buttons. I’m trying to implement a feature where I overlay a full screen with customisable opacity to further ‘dim’ the screen at night. It partly works but all of the cards including the vertical stack pop up cards are over the overlay element. That element is set with a z-index of 9999 so in theory should appear over the top of everything. The possible issue is if something has broken the z-index layers? Any idea if bubble card should support that?
This is the snippet of the code I’m using for the overlay:
cards:
- type: custom:mod-card
style: |
ha-card {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, {{ states('input_number.bedside_table_device_overlay_brightness') }}); # Use the variable here
z-index: 9999;
pointer-events: none; # Make overlay non-interactive
display: flex;
justify-content: center;
align-items: center;
}
ha-card > div {
pointer-events: auto; # Make the inner elements interactive
}
Of course it could be my code or something else on the page.
Thanks.
type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: false
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: false
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: false
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: false
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
background: none;
}
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
}
.bubble-sub-button-container {
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
I want to use your code but fixed on bottom how can i do that?
I have a similar overlay feature (for dimming the screen if a dropdown is opened) which broke a few updates ago, I think it was because of some changes to the z-index. I’m not totally sure how I fixed it, but it was some of the following:
- add ‘!important;’ to the z-index (always worth a try)
- add ‘transform: none !important;’ to the bubble popup container (stops changes to the z-index of cards if your overlay is within a popup)
- make sure your applying the z-index to the topmost container if the overlay is not inside a popup (you can check this in the dev console of your browser)
1 Like
Have you tried placing this card at the last position on your view?
1 Like
Thanks for taking the time and effort to reply - much appreciated. I’ll try those items out.
Thanks - I’ll try that too.
Hi,
Would like to know how to change color by using conditioning state like :
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 {
display: ${hass.states['sensor._wifi_connection'].state === 'connected' ? '{hass.states['sensor._wifi_connection'].state' : ${hass.states['sensor._wifi_connection'].state === 'not connected' ? 'none'} !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._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._battery_level
icon: mdi:battery
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor._next_alarm
icon: mdi:alarm
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor.home__distance
icon: mdi:map-marker-distance
show_background: false
show_state: true
tap_action:
action: more-info
Hi Cloos,
what theme are you using. Can you share it with us?
looks fantastic 
I tried all the options suggested - putting the card at the very bottom of the dashboard yaml worked apart from the horizontal button stack which still appears on top and not under the overlay. I did try this but no idea if the z-index is supported in the horizontal button stack? - it didn’t work and I tried various z-indicies.
- type: custom:bubble-card
transform: none !important
z-index: 999 !important
card_type: horizontal-buttons-stack
1_link: '#lights'
1_name: ''
1_icon: hue:bulb-classic
1_entity: null
hide_gradient: true
is_sidebar_hidden: false
2_name: ''
2_icon: mdi:cctv
2_link: '#cameras'
3_link: '#weather'
3_name: ''
3_icon: mdi:weather-hail
5_link: '#alarm'
5_icon: mdi:alarm
rise_animation: true
4_name: ''
4_icon: mdi:music
4_link: '#music'
card_mod:
style: |
.bubble-background {
background-color: transparent;
}
many thanks.
Hi, this my own theme, it is available on GitHub here:
2 Likes