Do you actually read the documentation, instead of first asking here?
Please use the documentation on GitHub, search on Google, read and understand this threat, have a look at reddit and after everything fails: Post the code you actually tried to let things work, so we see what you already tried yourself. Then we can try to help you solve you problems…
Not ment offensive in any way, but the amount of easy-to-solve questions by your hand do not tell me you search/try yourself or you do any investigation to solve any of your questions yourself.
Hev a look at the source CSS inside the respective directory of the Bubble-card source-code.
The source -CSS is all gathered in the style.ts files, underneath the card name you are using.
There you could see which CSS you want to alter, reset or why certain things are displayed the way they are.
Also use the developers tools on your browser which give you also a pretty good idea of how things are displayed and what styles are applied.
The sub-buttons CSS is a bit more hidden, it can find it at the end of that file. I’ve specified it in the documentation but it is important to add !important; at the end of a custom style that is already defined in the code.
And thank you @stefan1982 for the clarification on that topic.
Does anyone have a config with styles similar to the ones in this example? Just starting out with styling dashboards and completely overwhelmed. Would love that as a starting template and then start tweaking to my own.
@Cloos
Is it possible to change the color of the name by changing the state (light on/off)?
Because when i have a white background off the card i can`t read the name.
I really like the aesthetics of the Bubble card. I have some comprehensive views using mostly custom button cards and mushroom cards. I thought I’d look into replacing some of the less-appealing ones with Bubble cards. I’d like to show sensor information (battery levels, etc.) using a Bubble button card with a state button type… but it doesn’t appear to support a horizontal bar representing a sensor value (1-100%, for example)? Is that true, or do I have that wrong?
Here’s a current (ugly) display I’d like to replace:
I thought it might show a horizontal bar with the %, much like the light controls do with the slider (e.g., kitchen light below). Is this not possible with the Bubble card?
You just have to change the entity, afterwards it should work.
I haven’t used the colors although that should be possible.
When the battery is low (below 26%) it adds an small circle with an “!”
This is the code responsible for this:
I would advise not to use it with that kind of gradient. For this effect to work properly the first 2 colors should be the same. The last 2 colors should be something neutral and simple. I chose to not change colors for readability, having always the same color that is compatible with both the dark and light theme is what I prefer.
But if you still want to change colors do it in pairs.
This example has a ‘normal’ color and an alarm color based on a external value .
I have a problem with the button card type set to slider button type, all set to control a cover entity. Due to the cover open/close definition of the HA, the HA cover shows 62% open with the slider <50% while the button card shows 62% open with slider > 50%. is there a way to fix this in the bubble card. I want to use bubble card instead of HA card. Thanks in advance.