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

Share your Projects! Dashboards & Frontend
,
1989

I have now installed card-mod for this and got it working with that.
Adding the following to the personal theme gives a nice shadow to all bubble cards (only added the standard card and media player, other types would need to be added in a similar way):

Classic:
.....
  ha-card-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px
#Card-Mod
  card-mod-theme: Classic #needs name of the theme
  card-mod-card: |
    .bubble-button-card-container {
      box-shadow: var(--ha-card-box-shadow) !important;
    }    
    .bubble-media-player-container {
      box-shadow: var(--ha-card-box-shadow) !important;
    }

grafik

1990

Adding sub_button as suggested by @MrBearPresident solved it for me

1991

Great that you solved this. But IMO there is absolutely no need for card-mod here.
What is the exact problem and why doesn’t it work for you?

You can just define the CSS-variable in your theme and refer to it in the Styling block of the bubble cards.

(The styling-block I absolutely love by the way… If such a thing would be part of core, there is no need anymore for card-mod, and styling things would be so much easier around HA.)

1992

Love these cards. Is it possible to use image backgrounds in each button? Not the small button but the whole row so to say.

1993

Well that is what I did initially, but then I manually need to put this in EVERY SINGLE card. That is what I want to prevent with the theme, having as much general layout, which should be applied to every single card, only once in the theme.
Less rounded corners, box shadow, different standard colors, it just got more and more that I copy and pasted into every single card.

But as far as I understand, the box shadow example could not be applied to a theme without card-mod, as bubble card does not offer a direct style element for that.

1994

Hello,
I am using a dark-mode theme, and i change the icon background color with: bubble-icon-background-color=#555 in the theme file, and it works well. But the color of climate icon seems not changed depends on state?

IMG_8270
IMG_82701242×180 82.6 KB

1995

Hey @Cloos ,

I love your integration, I use it a lot. But i woundered, is it possible to disable that the whole bar turns to a color when “on”? I really want to turn only the Icon to a different color when “on”.

I have looked at GitHub, but I can not find it as a possibility.

Switch card:
bilde

Kind Regaards,
Marius

1996

Not very elegant but it works.
Use this in the custom-style section:

.bubble-button-background {
    --bubble-button-background-color: ;
}
1 Like
1997

The color from the icon in the climate card follows the --icon-primary-color. In active/heating state it changes to --bubble-state-climate-heat-color

beware that if you would add this in your theme, all icons in button cards will follow this color.

If you only want to adjust this for the climate card, add following to your custom-style section:

.bubble-icon{
  --icon-primary-color: yellow;
}
1998

@cpo thank you so much!!!

1999

I’ve been working on this for 2 days and can’t seem to get this styling to work. I’m trying to change the sub button background color based on the battery sensor entity on my person card. I feel like this code should work but it just stays the green color (#75AD6F) regardless of the battery level being reported. Any suggestions?

type: horizontal-stack
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: person.joey_wheeler
    name: Joey
    show_last_changed: false
    show_attribute: false
    sub_button:
      - entity: sensor.joey_fold_6_battery_level
        show_state: true
    card_layout: normal
    styles: |
      .bubble-sub-button {
        background-color: ${hass.states['sensor.joey_fold_6_battery_level'].state < 20 ? '#C91414' : state < 50 ? '#FF7E01' : '#75AD6F'} !important;
      }

image
image1510×776 62.6 KB

1 Like
2000

Sure the color of icon will change in active/heating state. My problem is the background color of icon is black when i used this dark-mode theme, so i changed it in the theme file with bubble-icon-background-color. In that situation,the icon color will not changed in active/heating state.

2001

In the second compare you forget to point to the correct entity.

Make I like so:

background-color: ${hass.states['sensor.joey_fold_6_battery_level'].state < 20 ? '#C91414' : hass.states['sensor.joey_fold_6_battery_level'].state < 50 ? '#FF7E01' : '#75AD6F'} !important;
1 Like
2002

Is there an option to create a light card with the brightness control similar to the volume in a media player? So instead of having the brightness in the background of the card you press a separate button which exposes a slider for brightness?
Thanks!

2003

Hi! A slider sub-button that act like the media player volume button is in my to-do list! But this is not possible currently, or with a complex custom template.

2 Likes
2004

I’ll be patiently watching the updates :slight_smile:

Amazing work with these cards by the way!!!

2005

With a helper and an automation this should be doable.
But not directly in bubble-card.

Don’t let your creativity be stopped by the limits of one system.

2006

Thank you!! I knew it was something simple I was missing. Thought it would retain the referenced entity. Much appreciated!

2007

a little different but it worked

.bubble-sub-button-1 {
    color: ${hass.states['light.salon_l1'].state == 'on' ? 'orange' : 'dark-gray'} !important;
  }
2008

Upgraded to 12.1 HA today, and now the bubble card will not load. Previously, if I got that error, I just had to refresh. I have, restarted, redownloaded, etc.

Help?

IMG_0769
IMG_07691290×631 76.8 KB