⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

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.

styles: |
  .bubble-sub-button-container {  
   justify-content: center !important;
   gap: 0px;
   width: 100%
  }

I tried using gap: 0px; but its not working for me. CSS is not my thing. It has always bothered me.

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.

3 Likes

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.

Great !!! THX @ddewar

i start my tests and is cool for the moment

Hello @Cloos

Sorry i insist but can you give me an answer please
Thank you very much sorry I am really bad and a beginner. :innocent:

@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.

Hi, navigate is the default and only action (yet) on the horizontal buttons stack, so you can add any URL and it should works.

In YAML:

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Test
1_icon: mdi:sofa
1_link: '/lovelace/test-2'

Au top Merci @Cloos :grinning:

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:

This is not what I was expecting:

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?

This is possible, worked out a way myself in the recent days:

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.dev_sf_sr_button_battery
styles: |-
  .bubble-button-card-container {
      background: linear-gradient(
    to right, 
    #488fc2 0%, 
    #488fc2 ${Math.round(state)}%, 
    #173847 ${Math.round(state)}%,
    #173847 100%
  ) !important;
  }
  ha-card::after {
    position: absolute;
    top: -10px;
    left: -10px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid black;
    color: #fff;
    content: "${Math.round(state) < 26 ? '!' : ''}";
    background: red;
    display: block;
  }
icon: ""
name: ""
sub_button: []
layout_options:
  grid_columns: 2
  grid_rows: 1

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:

  ha-card::after {
    position: absolute;
    top: -10px;
    left: -10px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid black;
    color: #fff;
    content: "${Math.round(state) < 26 ? '!' : ''}";
    background: red;
    display: block;
  }

The result:
image

3 Likes

Very good, thank you! Still playing with it; I don’t think I want a gradient, but I’ll get there.

I attempted to change icon color based on state, but so far it’s not working:

    styles: |
      .bubble-button-card-container {
          background: linear-gradient(
        to right, 
        Blue 0%, 
        Green ${Math.round(state)}%, 
        Red ${Math.round(state)}%,
        Orange 100%
      ) !important; }
      ha-icon {
        {% set state = states('sensor.battery_level') | int %};
        {% if state <= 25 %} color: red;
        {% elif state <= 50 %} color: orange;
        {% else %} color: green;
        {% endif %}
        !important; }

You’re using jinja2 templates, this is not supported (see documentation).

An example how the icon should be done.

.bubble-button-card-container {
    background: linear-gradient(
  to right, 
  #488fc2 0%, 
  #488fc2 ${Math.round(state)}%, 
  #173847 ${Math.round(state)}%,
  #173847 100%
) !important;
}
ha-icon {
  color: ${ state >50 ? 'green':
            state >25 ? 'orange' : 'red'} 
            !important; }

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 .

image
image

.bubble-button-card-container {
    background: linear-gradient(
  to right, 
  ${hass.states['sensor.volume_3_status'].state === 'normal' ? '#488fc2' : '#ff9800'} 0%, 
  ${hass.states['sensor.volume_3_status'].state === 'normal' ? '#488fc2' : '#ff9800'} ${Math.round(hass.states['sensor.volume_3_volume_used'].state)}%, 
  #173847 ${Math.round(hass.states['sensor.volume_3_volume_used'].state)}%,
  #173847 100%
) !important;
}
2 Likes

Nice. That icon coloring works well.

Agreed on the gradient; I defaulted to that because that’s what you had in your code, and I hadn’t played with it yet. Thanks again!

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.
Cattura