How to have different colors for light and switches. The code helps to apply color to light.x domain. Is there a way to apply the changes to swithc.x domain as well
at theme level.
ha-card {
--bubble-light-color: var(--accent-color);
--bubble-icon-background-color: var(--ha-card-background);
}
.bubble-range-fill {
opacity: 1 !important;
}
Can we please apply colors based on domain, switches, lights as well as sub button background?
Thank you very much. I have watched the video. Wile I like the effect, the setup is actually very fiddly, with way more yaml and card stacking than I expected. Therefore I am still hesitating on building that in.
Somehow this also has to work simpler with less copy and paste of code and manual adjustments everywhere.
Here is a standard way with using the visibility option and a helper, just a drop-down instead of tabs, but therefore all via UI.
https://smarthomescene.com/guides/how-to-setup-tabbed-card-for-home-assistant/
Here is another HASS integration for tabbed cards, but also purely yaml based, less overhead for the actual tabs but therefore even the cards need to be all in yaml.
Maybe my first thought of having multiple helpers is really the most standard way to achieve this, here someone seems to have also done it:
https://www.reddit.com/r/homeassistant/comments/11q69u7/home_assistant_tabbed_dashboard/
I’ll continue having a look and trying out. This is obviously not anymore about bubble card, while it would be a gread feature to be added to it 
Hi,
Can someone explain to me where I can make the global CSS entries so that they are used for the entire dashboard?
I can make the CSS changes in the individual cards via the style options. But if it can be done globally, then that would be the better way. Unfortunately I don’t know where to enter them.
Thank you.
@herbert1910 hey mate, you need to add those variables to your theme. If you haven’t set up a theme yet, follow the instructions here:
Dear all,
Does anyone know how to make fan ON/OFF correct transition?
I tried to make it, but it doesn’t look correct as it fades through white colour and it doesn’t look like it was implemented in Mushroom cards.
My code below:
type: custom:bubble-card
card_type: button
entity: sensor.bedroom_air_filter_fan_speed
icon: mdi:fan
show_icon: true
scrolling_effect: true
show_name: true
force_icon: false
show_state: true
name: Fan Speed
styles: |-
.bubble-icon {
animation: ${hass.states['fan.bedroom_air_filter'].state === 'on' ? 'slow-rotate 2s linear infinite' : ''};
color: ${hass.states['fan.bedroom_air_filter'].state === 'on' ? 'rgba(50, 185, 50,0.8)' : 'rgba(255,255,255,1)' } !important;
transition: color 0.3s ease-in-out;
}
@keyframes slow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.bubble-icon-container {
background: ${hass.states['fan.bedroom_air_filter'].state === 'on' ? 'rgba(0,128,0,0.2)' : 'rgba(0,0,0,0.2)' } !important;
transition: background 0.3s ease-in-out;
}
.bubble-button-card-container {
background: rgba(0,0,0,0.3) !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['switch.bedroom_air_filter_led_enable'].state === 'on' ? 'rgba(255,165,0,0.6)' : 'rgba(0,0,0,0.0)'} !important;
}
.bubble-sub-button-4 {
background-color: ${hass.states['binary_sensor.bedroom_air_filter_replace_filter'].state === 'on' ? 'rgba(255,0,0,0.6)' : 'rgba(0,0,0,0.0)'} !important;
}
card_layout: large-2-rows
sub_button:
- entity: sensor.bedroom_air_filter_pm25
show_state: true
show_icon: true
show_background: false
show_name: false
icon: mdi:alpha-p
name: PM2.5
show_attribute: false
attribute: state_class
- entity: sensor.bedroom_air_filter_air_quality
name: Air Quality
icon: mdi:cloud-outline
show_background: false
show_name: false
show_state: true
- entity: switch.bedroom_air_filter_led_enable
icon: ""
show_name: false
show_state: true
show_last_changed: false
show_attribute: false
tap_action:
action: toggle
- entity: binary_sensor.bedroom_air_filter_replace_filter
name: Filter
icon: mdi:air-filter
show_background: false
show_name: false
show_state: true
show_last_changed: false
button_type: state
Hello dear fellow bubblers
I was wondering if there’s a way to change the style of a button in the moment it’s being clicked?
What style do I need to change?
I was hoping to add:
- border-width: 1px
- border-color: var(--text-color)
@ciddi89, I am very sorry for disturbing, but I think that I have some sort of a bug.
Touch screen:
When I use the phone (touchscreen), all the items in all bubble cards are being activated by the press of the finger (not by the release).
Basically, when I want to scroll and touch an active area of any bubble card, it gets activated. It’s very annoying as I need to carefully press where nothing could be activated. With other cards (Mushroom, standard HA cards etc.) activation is only on the release of the finger.
Slider:
Due to similar issue as mentioned above, when I use finger to change slider position, it sends many commands and gets the device hanged up. I don’t see anything like that with Mushroom sliders as the command is sent once I release finger at certain position of the slider.
Please advise if it is the way the card should work or it’s a bug. I am presently using v2.3.0-beta.2.
Thanks in advance!
Hey @DBunevich No problem, but I think it’s better to ask @Cloos what’s the matter, because he’s the developer of this awesome card
One question, or suggestion. I am currently using the horizontal card as navigation on mobile. Every bubble points to a page in my dashboard. Is there any chance, that we can hide the bubble, on which page i am currently. Like, when I am on the Main Page, the bubble should be hidden or leave out. Best would be dynamiclly
Hello,
Does anyone know how to set a custom text to a sub button without it removing the icon?
This code:
${card.querySelector('.bubble-sub-button-3').innerText = hass.states['sensor.kitchen_temperature'].state + " °C"}
Replaces the icon with the text as shown in this image:
How can I change sub button colors directly?
.bubble-sub-button-4 > ha-icon {
color: “#03A9F4” !important;
}
Trye appendText instead of innerText. Not sure if that does what you want, or is the proper way to go though…
Unfortunately, that does nothing
Asumming that you’re expecting that the rest of the sub button, not the icon gets colored, you can do this:
.bubble-sub-button-4 {
background-color: "#03A9F4" !important;
}
Hi,
I have a question: is it possible to integrate Bubble Card with Home Assistant LCARS?
I tried with just a small card in a new dashboard and it doesn’t seem to work, but maybe I did something wrong.
Here’s the code I used:
type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.sofa1
card_mod:
class: middle-left
Hello, I want to remove the white border from my horizontal button stack. And is it possible to adjust the gradient color instead of gray? Does anyone have any more examples of custom styling for the horizontal button stack?
Question solved, it worked all of a sudden!
Is it possible to use entity picture?
I tried this with no luck:
type: custom:bubble-card
card_type: button
entity: light.taklampe_kontor
entity_picture: /local/icons/taklampe.png
show_icon: false
show_entity_picture: true
force icon: false
Use the styles-property and plain CSS for styling instead of the entity_picture, which isn’t incorporated inside the bubble-cards.