that make also no change, this i have tried before too 
But thanks for assist, maybe @Cloos knows that
It must be background, not background-color:
.bubble-button-background {
background: ${state === 'on' ? 'darkorange' : '#333333'} !important;
}
1 Like
That it, thank you 
On GitHub the Button CSS Styling was --bubble-button-main-background-color
You can use it, too, but your code was missing !important;
Btw: all of this is explained by cloos on github: Klick, third bullet point.
Nope !important doesnt make changes, i read that GitHub Styling Code and it does not work right.
But no worry noe it works
Does anyone know if it is possibly to set a sub button to navigate directly to a color wheel and light temperature? I am trying to set up a (slider) bubble card controlling hue lights where I can quickly also adjust the light color and temps.
EDIT. So I “think” a potential solution is to use the hue light card with the API function there to open the Hue Screen? I hope to experiment and learn some more, but it may be beyond my limited coding skills to figure out. I’m a trial and error guy in testing and learning.
Doesn’t look like its an issue with Bubble card but HA core issue.
The same error was coming up in console everywhere when ever any entity or name is selected so I installed 2025.4.1 functionality restored but error still there. Installed 2025.5.x error came back and same issue with the functionality. Now installed 2025.6.0b3 functionality restored but error still there. So not sure which bug has partially resolved this issue. I hope will be fully fixed for 6.0 release.
Similar to No device listed (device page, dropdowns...) · Issue #25163 · home-assistant/frontend · GitHub
Hello guys, @Cloos,
Can you please help me to identify the code for assigning of the colour/transparency of the “Climate-sub-button”. I’ve tried everything I was able to find, but nothing works.
Since 2.3.0 “–bubble-secondary-background-color: rgba(0, 0, 0, 0.2)” was working, but it doesn’t work with 3.0.x.
:host {
--bubble-main-background-color: rgba(0,0,0,0.3) !important;
--bubble-icon-background-color: rgba(0,0,0,0.2) !important;
--bubble-icon-color: rgba(255,255,255;
--bubble-secondary-background-color: rgba(0, 0, 0, 0.2) !important;
--bubble-background: rgba(0,0,0,0.3) !important;
--bubble-sub-button-container: rgba(0,0,0,0.3) !important;
--bubble-climate-button-background-color: rgba(0,0,0,0.3) !important;
}
hi @Cloos just wondering when are you planning to release a stable build (not beta)? also, what is the current stable build for the beta? thank you
Pretty sure the latest beta is the most likely to be the most ‘stable’ - but it’s a beta for the very point is it’s to test & provide feedback if any issues uncovered.
I’m quite happy with my bubble buttons. However, I’d like them to be a bit more compact, not quite so tall. Can someone help me? If I switch back to the normal format, the text is no longer legible because there isn’t enough space.
Hey Guys,
is there a way to make the sub-buttons right-aligned?
type: custom:bubble-card
card_type: button
button_type: state
name: Feiertage
sub_button:
- show_state: true
show_name: false
show_attribute: true
entity: sensor.feiertage
show_icon: false
icon: ""
name: ""
- entity: calendar.feiertage
attribut: message
show_state: false
show_name: false
show_attribute: true
name: Calendar
show_icon: false
attribute: message
icon: mdi:calendar
show_icon: true
show_name: true
card_layout: large-2-rows
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entities: []
show_end: false
show_progress: false
modules: []
entity: calendar.feiertage
show_state: false
force_icon: false
show_attribute: false
attribute: message
scrolling_effect: false
rows: ""
card_mod:
style: |
.bubble-sub-button {
color: white;
background: var(--primary-background-color);
}
.bubble-button-card-container {
border: none;
padding: 0px;
font-family: Arial;
}
You can try:
.bubble-sub-button {
width: 110px !important;
justify-content: right;
}
Adjust the width to your sub-button text
1 Like
Thats it, thank you
After updating to the latest beta my standard light became blue although the selection for accent color is on. Any way to fix that globally?
You should be able to fix that with this module:
I have not tried it myself, but I trust it should work.
1 Like
I am sure the answer to this is right in front of me but I m not finding an example. All I want to do is put the close button on the same line as the separator card in a pop up. Thanks for your help.
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#lights'
show_header: false
- type: grid
square: false
columns: 1
cards:
- type: custom:bubble-card
card_type: separator
name: Lights/Switches
icon: ''
show_header: true
sub_button: []
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.lamp_mbr_switch
name: Master Bedroom Lamp
icon: mdi:lightbulb
Hi! I’ve modified the code to monitor docker containers but I can’t make it appears as yours, any help?
How you can put the code in a bubble card?
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.docker_jellyfin_jellyfin1_cpu
icon: mdi:jellyfish
entity_picture: /local/images/jellyfin.png
show_entity_picture: true
name: Jellyfin
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: "-3%"
icon:
- width: 25px
- color: auto
- margin-right: 10px
- margin-top: 5px
name:
- font-size: 90%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 20px
- margin-left: 10px
- margin-bottom: 10px
- opacity: 0.65
- text-align: center
grid:
- grid-template-areas: "\"n i\" \"temp temp\" \"graph graph\""
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.docker_jellyfin_jellyfin1_cpu'].state}%</span>
<ha-icon
icon="mdi:memory"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.docker_jellyfin_jellyfin1_memory'].state}MiB</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 100px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.docker_jellyfin_jellyfin1_cpu
name: CPU
color: "#ff8c00"
- entity: sensor.docker_jellyfin_jellyfin1_memory
name: Memory
color: "#3399ff"
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
name: Sensor
icon: mdi:motion-sensor
state: null
hash: "#motions"
is_sidebar_hidden: true
styles: >-
.bubble-pop-up {
background: transparent);
}
.close-pop-up {
background-color: transparent;
}
.bubble-button-card-container {
background: transparent !important;
}
.icon-container {background-color:var(--red)!important;}
.icon-container > ha-icon
{color:var(--black)!important;opacity:1!important;}
.bubble-icon {
--mdc-icon-size: 22px !important;
}
bg_blur: "20"
shadow_opacity: "20"
bg_opacity: "88"
margin_top_mobile: 10px
margin_top_desktop: 10px
card_layout: large
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.10063d1e68bfa731_distance
icon: mdi:jellyfish
show_entity_picture: true
name: Jellyfin
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: "-3%"
icon:
- width: 25px
- color: auto
- margin-right: 10px
- margin-top: 5px
name:
- font-size: 90%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 20px
- margin-left: 10px
- margin-bottom: 10px
- opacity: 0.65
- text-align: center
grid:
- grid-template-areas: "\"n i\" \"temp temp\" \"graph graph\""
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.10063d1e68bfa731_distance'].state}%</span>
<ha-icon
icon="mdi:memory"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.10063d1e68bfa731_distance'].state}MiB</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 100px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.10063d1e68bfa731_distance
name: CPU
color: "#ff8c00"
- entity: sensor.10063d1e68bfa731_distance
name: Memory
color: "#3399ff"
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
3 Likes
