Here is the result of your code tested on three bulbs with different attributes:
Shelly Corridoio - luce: No supported functions (does not have rgb_color)Cameretta: Supports rgb_colorPranzo: Does not support rgb_color but has other featuresWhat exactly is incorrect in this behavior?
Hi Menelao,
you are a life safer, and I’m well, let’s not talk about that.
This was my problem.
I forgot to add the fallback to my border, after updating that code it worked.
But don’t tell anyone I wasted hours on a non-existent problem.
.bubble-button-card-container {
border: 4px solid ${
hass.states['light.sofa'].state === 'on'
? hass.states['light.sofa'].attributes.rgb_color
? `rgba(${hass.states['light.sofa'].attributes.rgb_color[0]},
${hass.states['light.sofa'].attributes.rgb_color[1]},
${hass.states['light.sofa'].attributes.rgb_color[2]},
0.8)`
: 'rgba(200, 150, 50, 0.8)' /* Fallback color when rgb_color is unavailable */
: 'rgba(100,100,100,0.6)' /* Default when light is off */
} !important;
box-sizing: border-box;
}
Thank you very much for helping out.
Is there a way to put CSS in my own theme.yaml to override Bubble card CSS. Instead of changing in every single card put CSS in my own file?
Yes, supported since 2.3.0, but still not clearly documented unfortunately.
See here in the release notes: Release Bubble Card v2.3.0 · Clooos/Bubble-Card · GitHub
Since a couple of weeks it is documented very well on the readme on GitHub.
As example the button documentation
Look for the CSS variables?
See this link here, create colour sensors to replace the whole line of code. Senors configured in configuration.yaml, insert line of code via template.
See this post confirmed to work on picture elements cards, in css and many other places.
and here for full details
will there soon be a fix so that the page with several bubble cards doesn’t load sooo slowly if you have several on one dashboard?
Hi,
I’m currently working with the wonderful bubble cards again.
So far I’m getting everything I want.
I have a question about how to use them:
Now I have created several bubble cards (for each room) and the pop-up cards are created at the bottom, which are then listed one below the other. This is then a separate popup card for each bubble card. This is a very long list and becomes very confusing.
Is this correct?
Is there a way to outsource the PopUp Cards?
If I want to add a new bubble card, I have to move it from the bottom to the top. I find that very cumbersome.
Or is there a trick?
Thank you.
Greetings
Herbert.
Use the sections view, then you do not need to move something from the bottom to top. You can put the pop-ups in one or multiple sections in the end, and when you want to add a normal bubble card, you do that directly in the section you want to have it.
But yes, everything in only one dashboard makes it cluttered and slow. That is why I do not use pop-ups that extensively, but rather let it jump to a dedicated sub-view.
That also sounds like a good option.
I’ll give it a try.
Thank you very much.
anyone have a solution please?
I would like to have a card like this. Can you explain how you made it? I have bubble cards. It appears your horizontal color is a brightness slider for the lights in the room?
You can try the following (insert it in the styles-section):
${(() => {
const timestamp = hass.states["sensor.tv_padel_endtime"].state;
if (timestamp) {
const date = new Date(timestamp);
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
card.querySelector('.bubble-state').innerText = `${hours}:${minutes}`;
}
})()}
I want to change slider color via theme for entity type ‘fan’ only. Here is my card:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: fan.media_room_ceiling_fan
sub_button:
- entity: light.media_room_light_1_2
show_name: false
show_state: true
show_icon: true
tap_action:
action: toggle
slider_live_update: false
show_state: false
show_attribute: true
attribute: percentage
icon: mdi:fan
In my theme file called ‘light’, I have tried this but not working:
card-mod-theme: light
card-mod-card: |
.bubble-button-card-container.button-container .bubble-button-card.switch-button .bubble-icon-container[data-entity^="fan."] ~ .bubble-range-slider .bubble-range-fill {
background-color: rgba(0, 255, 0, 1) !important; # Custom color for fan slider
opacity: 1 !important; # Ensure it's visible
}
and we know the following would work but it effects all sliders, where I want to target specific entity types such as fans.
.is-on .bubble-range-fill {
opacity: 1;
background-color: rgba(255 , 0, 255, 1) !important; #FOR SLIDER COLOR
}
@Cloos , desperately seeking color manipulation via themes based on domain and entity types 
Is it possible to create a bubble for the menu command? It works with the Mushroom Chips, but I haven’t found it yet with Bubble.
Hi, is there a way to display a progress bar using Bubble Card? For example, to show battery percentage?
Search this thread, answered above.
Hey, I wanted to rearrange the slider card and lost the transition of the slider when turning on and off the card.
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.test_lights
use_accent_color: false
force_icon: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action:
tap_action:
action: toggle
styles: |
* {
border-radius: 16px !important;
}
.bubble-name-container{
border-radius: 0px !important;
}
.bubble-button-card-container{
height: 120px !important;
border-radius: 20px !important;
}
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'. i'
'n .';
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
justify-items: center;
}
.bubble-icon-container {
grid-area: i;
border-radius: 50% !important;
max-width: none !important;
max-height: none !important;
justify-self: right !important;
margin: 10px 0px 0px 0px !important;
background: none
}
.bubble-icon {
width: 40%;
--mdc-icon-size: 100px !important;
--mdc-icon-color: white !important;
opacity: 1 !important;
}
.bubble-name-container {
grid-area: n;
justify-self: start;
margin-left: 20px;
}
.bubble-name {
font-weight: 500;
font-size: 16px;
}
.bubble-state {
font-size: 14px;
}
grid_options:
rows: 2
columns: 6
card_layout: large
sub_button: []
show_icon: true
show_name: true
show_state: true
show_last_changed: true
show_attribute: true
slider_live_update: true
attribute: brightness
Can I easily restore it?
Think the slider being brightness is automatic for a slider with a light entity.
This is the base part of it, though obviously I’ve added sub buttons.
- type: custom:bubble-card
card_type: button
button_type: slider
scrolling_effect: false
show_last_changed: true
show_attribute: false
show_state: false
show_name: false
columns: 1
card_layout: large-2-rows
entity: light.lounge
tap_action:
action: toggle
hold_action:
action: more-info