I don’t have this issue, can you provide more details? Like the YAML of a not working button?
These cards are fantastic! This is the first time in a long time that I’ve wanted to spend time in HA to design a proper dashboard - the cards are great and the flexibility in the styling makes this one of the best UI cards I’ve seen!
A quick question, is it possible / are you able to provide an example of changing the bubble state inner text conditionally?
I can see how I can target the inner text for the bubble state, but I want to change the text based on the state of different entities.
${card.querySelector('.bubble-state').innerText = "It's currently " }
For example, if I am generating more solar than I’m using, I could say ‘Generating Excess Solar’ in the state text, but if I’m using more power than solar I could say ‘Using Grid Power’.
Much appreciated!
Hi and thank you for the kind words!
For your template something like this should works:
${card.querySelector('.bubble-state').innerText =
hass.states['sensor.solar_generation'].state >
hass.states['sensor.power_usage'].state
? "Generating Excess Solar"
: "Using Grid Power"}
Have you checked your browser console? You should have see some templates errors.
Is there a way to simply see what CSS ID’s and classes are used for the different bubble-cards, and which to use to override the styling? I am really struggling with that…
I’ve explained where to find them in the styling section of the documentation, give it a look 
1 Like
Did you figure this out? I tried with card_mod, but couldn’t get the exact dimensions unfortunately.
This works pretty good, thanks! It would be good to see if there was also scenarios where we could use if / then / else (I’m sure many people would have this scenario) for multiple different logic scenarios.
Also, I found a small potential bug / issue:
${card.querySelector('.bubble-state').innerText =
hass.states['sensor.solarnet_power_grid'].state <
hass.states['sensor.solarnet_power_photovoltaics'].state
? "Generating " + hass.states['sensor.solarnet_power_grid_export'].state + "kW of Excess Solar"
: "Using Grid Power"}
I am playing around with some dynamic text for the entity solarnet_power_grid_export. In the developer tools, the state of the entity shows a number such as 0.83219.
In the UI, I have set the unit to kW and the precision to 2 decimal places, however when using the entity in the styling for text, it shows the state to 4 decimal places (the raw state not the state of the entity with precision set in the UI).
Doing some research, I believe that entity_friendlystate needs to be implemented?
It’s not gamebreaking, but just nicer to have that available. Keep up the great work (and get some sleep!!)
Hello, is there anyway to change the default color of each type of button? Instead of changing it on each button.
Thanks in advanced!
1 Like
Congrats for you beeing dad!
It seams to happen only on my cars with some custom style to change background color of icons
type: custom:bubble-card
card_type: button
entity: light.cellier_lumiere
tap_action:
action: none
double_tap_action:
action: none
name: 'Cellier '
show_last_changed: true
show_state: true
sub_button:
- entity: light.cellier_lumiere
icon: ''
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: binary_sensor.cellier_fenetre
styles: >
.bubble-button-card-container {
border-radius: 10px !important;
background: rgba(70, 240, 70, 0.4);
}
.bubble-icon {
opacity: 1;
color: white !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_FRENCH' ? 'red' : hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_HOPPER' ? 'rgba(87, 160, 238, 1)' : 'green'} !important;
}
${subButtonIcon[1].setAttribute("icon",
hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_FRENCH' ?
'kuf:fts_window_2w_open' :
hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_HOPPER' ?
'kuf:fts_window_2w_tilt' :'kuf:fts_window_2w')}
icon: hue:room-closet
button_type: state
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
No, I don’t know how to use console to debug. I’m not developer. But yes, on your advice, I see errors.
1 Like
Have you checked for any errors in your browser console?
Hi, using the sub-buttons (see example from Cloos on Github: „Advanced example: Creating an horizontal row of sub-buttons“) should work:
type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Light WZ
icon: mdi:power
show_background: true
tap_action:
action: toggle
entity: light.wohnzimmer
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
background: none;
}
.bubble-sub-button {
height: 60px !important;
width: 60px !important;
}
.bubble-sub-button-1 {
background-color: ${hass.states['light.wohnzimmer'].state === 'on' ? 'rgba(255, 165, 0, 0.8)' : 'rgba(25, 25, 25, 0.4)'} !important;
}
.bubble-sub-button-container {
width: 100%;
justify-content: center !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 40px !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
columns: 1
layout_options:
grid_columns: 1
grid_rows: 1
1 Like
hello everyone, how to reduce the spacing between a separator and a bubble card. I use view section from HA. Merci
I’m playing around with the new layout feature in 2024.7, which is awesome as it should allow me to ditch the laborious grid card and just drag n’ drop everything.
The base functionality works, but Bubble Cards have a huge gap between the rows that I can’t fix. I actually went to a non-minimum amount of effort before posting here about it, and tried changing the CSS in the theme myself as below, but even setting it to negative pixels doesn’t shrink the space between rows of Bubble Cards.
ha-section-grid-row-gap: -8px # 8 is default
Is there any way to shrink that space down? It feels like it’s roughly double what it should be. Attached screenshots of the old grid view and the new sections/layouts view to show what I mean.
I also tried the “large optimized for sections” option which totally fixes this problem but then all my bubble cards are chunksters, which doesn’t look great.
Grid card layout. Looks great, but pain in the butt.
New sections layout. Ignore that some cards are only 1 column, just messing around with 2024.7 options. Check out the gap between rows, the old grid card was 10px and sections view is 20px. IMO this looks quite bad. This is not using the “large optimized for sections” view as I don’t like the way it looks either, although it does fix the gap.
I don’t know how to read and use consol to debug.
background-color: ${hass.states['climate.radiateur_salon'].state == "off" ? 'gray' : hass.states['climate.radiateur_salon'].state = "comfort" ? 'red' : hass.states['climate.radiateur_salon'].state = "eco" ? 'green' : 'blue' } !important;
You put = there instead of ==. Replacing these with == should fix the color issue.
As for changing the icons conditionally, there’s an example of doing this on GitHub:
This one is changing the first sub-button icon only when a vacuum is stuck.
styles: |
${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}
2 Likes
and here a possible solution with the button:
type: custom:bubble-card
card_type: button
entity: switch.remote_two_radio
name: Radio
rows: auto
show_name: false
styles: |-
.bubble-icon-container {
width: 100%;
height: 40px;
margin: 25% !important;
}
.bubble-icon {
--mdc-icon-size: 30px;
}
.bubble-name-container {
margin-left: 0px !important;
margin-right: 0px !important;
}
show_state: false
show_last_changed: false
card_layout: normal
columns: 1
You can change the layout of the separator to “large” to fit the section view.
