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

[Surfingjelly]

How can I make the icon container ‘active’ background transparent, same as when the light is off. Here’s when it’s off:

And on:

And the style section:

.bubble-button-card-container {
  background: rgba(12,120,50,0) !important; 
  }
.bubble-icon {
  --mdc-icon-size: 46px !important;
  }
.bubble-icon-container {
  background: rgba(0,0,0,0);
  }
 ${card.querySelector('.bubble-state').innerText =
hass.states['sensor.bath_water_sensor_device_temperature'].state + "°C"}

[DrChops]

Another feature that I would find helpful would be able to assign more that one entity to the optional light/light group for background color in the horizontal button stack.

[LiQuid_cOOled]

I wasn’t able to recreate your issue, but try:

  background: none !important;
    }

or

  background: transparent !important;
    }

[Faecon (Jo)]

@Faecon

Is it possible to make the name “dynamic” ? I want to use input.text to give the name, but that is not working

      - type: custom:bubble-card
        card_type: separator
        name: '{{ states(''input_text.ruimte_1'')}}'

this is the answer

      - type: custom:bubble-card
        card_type: separator
        styles: >
          ${card.querySelector('.bubble-name').innerText = hass.formatEntityState(hass.states['input_text.ruimte_7'])}

thanks to @Cloos for helping me

[DaveP317 (Dave P)]

Thanks for the link, I checked all of those items and it seems to be configured correctly. The trackpad behaves normally in other scenarios. I’ll have to dig in further to see if I can figure out what’s going on. This isn’t a typical use-case for me, so not an urgent problem to resolve…just an odd behavior.

[d.ominik]

Hi all, I am loving this card. Isit possible to change the “stop” icon of the cover card by using styles?

[Cloos]

Hi, you can use this custom style to change the “stop” icon:

${card.querySelector('.bubble-icon-stop').setAttribute('icon', 'mdi:star')}

[Surfingjelly]

No such luck unfortunately.

Full card code:

type: custom:bubble-card
card_type: button
entity: light.master_bedroom_lights
name: Master Bedroom
icon: mdi:bed
tap_action:
  action: toggle
double_tap_action:
  action: more-info
button_action:
  double_tap_action:
    action: more-info
card_layout: large
button_type: state
styles: |-
  .bubble-icon-container {
    background: none !important;
    }
  .bubble-button-card-container {
    background: rgba(12,120,50,0) !important; 
    }
  .bubble-icon {
    --mdc-icon-size: 46px !important;
    }
   ${card.querySelector('.bubble-state').innerText =
  hass.states['sensor.bath_water_sensor_device_temperature'].state + "°C"}
show_attribute: true

[amstermk]

Just tried on a button card. For me this works:

  .bubble-icon-container {
    background: none;
  }

[Surfingjelly]

How odd - I tried with a new button and a different light. The icon container does disappear when the light is off. But it becomes coloured once turned on, rather than having no background. Not quite sure what’s happening in that case!

EDIT: Found this in the inspector but not really sure what to do with this info/if it’s even relevant, but it’s definitely for the icon container I’m trying to make transparent when the light is on

EDIT 2: Changing the icon container conditionally from default to ‘none’ shows a slight change in colour. So I think there’s something else at play. Here are the 2 cards, though not sure if the difference will really show, but it’s definitely there!

[Cloos]

You were close, indeed you needed to add the .bubble-icon-container::after in your custom style, I guess that what you want is this:

type: custom:bubble-card
card_type: button
entity: light.master_bedroom_lights
name: Master Bedroom
icon: mdi:bed
tap_action:
  action: toggle
double_tap_action:
  action: more-info
button_action:
  double_tap_action:
    action: more-info
card_layout: large
button_type: state
styles: |-
  .bubble-icon-container {
    background: none !important;
    border-radius: 0;
  }
  .bubble-icon-container::after {
    background: none !important;
  }
  .bubble-button-card-container {
    background: rgba(12,120,50,0) !important; 
    }
  .bubble-icon {
    --mdc-icon-size: 46px !important;
    }
  ${card.querySelector('.bubble-state').innerText =
  hass.states['sensor.bath_water_sensor_device_temperature'].state + "°C"}
show_attribute: true

[Surfingjelly]

@Cloos

  .bubble-icon-container::after {
    background: none !important;
  }

Amazing, that’s done the trick! Huge thanks

[Cloos]

You’re welcome!

[Bandy325]

First of all, like so many others, thank you very much for this card and the effort you put into it!. Now my question/comment: I would really like to use bubble card as a room card. I’m just not technically skilled enough to make a nice card out of this. I now have “a kind of room card”, this is a card with subbuttons. It would be nicer if it became a 3x3 card. Has anyone already achieved this?

[amstermk]

Hi,

I set up a bubble-button-card with a jpg as background. Working all fine so far. Now I’d like to change the sub-button based on the state of an entity (actually five different states).

Started with the following code:

      ${subButtonIcon[1].setAttribute("icon",
      hass.states['cover.sonnenrollo'].state === 'open' ?  'mdi:window-shutter-open'
      : 'mdi:window-shutter')}

which is working fine in another card.

But as soon as I start fiddling with that in the “custom-styles-section” of my new card all the previous changes are not working anymore, i.e. no jpg as background…

YAML code of the card is below. Thanks for any help in advance!

type: custom:bubble-card
card_type: button
card_layout: large
styles: |-
  .bubble-button-card-container {
    background: rgba(25, 25, 25, 0.4);
    background-image: url("/local/pictures/R2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px !important;
  }

  .large .bubble-button-card-container {
    height: 179px;
  }

  .bubble-sub-button-1 {  
    background: rgba(25, 25, 25, 0.4);    
  }

    
      
name: Choose activity
force_icon: false
show_icon: false
button_action:
  tap_action:
    action: navigate
    navigation_path: '#remote'
button_type: state
entity: media_player.remote_two_player
sub_button:
  - entity: select.remote_two_multimedia
    show_state: true
    show_background: true
    show_icon: false
    show_attribute: false
    show_last_changed: false
    show_name: false
    tap_action:
      action: toggle
show_state: false
rows: auto

[Cloos]

@amstermk Take a look at you browser console, this means that you have some errors in your custom templates.

[Cloos]

Something like this?

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

Hi, I just finish my first bubble-card dashboard Some captures : [Screenshot_20240520_211557_Home Assistant] Home page with some shortcuts and global view 1 page per flour. We can even do 3 rows of sub buttons ! [Screenshot_20240520_211754_Home Assistant] [Screenshot_20240520_211744_Home Assistant] View on the light and shutter views [Screenshot_20240520_212015_Home Assistant] [Screenshot_20240520_211856_Home Assistant] Many thanks ! Evolutions that could be nice : …

[Bandy325]

Yes, that looks very nice. My dashboard currently looks like this… The only thing that would make it “finish” for me personally would be more card space. Maybe a card that is a bit more square.

[edcoppen]

Hi, I have previously mentioned that there is no relevant service call to change thermostat temperature, so I am using custom button cards as they support JS. I’m keeping my fingers crossed for a thermostat bubble card.

Until then, can anyone please tell me how to modify the following code to add °C after the temperature. In other words, I currently get 21 but I would like 21°C.

type: custom:button-card
entity: climate.living_room
state_display: |
  [[[ return entity.attributes.temperature ]]]

Thank you

[Cloos]

You can take a look at this, it’s probably possible to do what you want directly with Bubble Card.

I don’t have any climate entity so I can’t help you more but I hope that this will help.

Raising temperature by one degree - Climate device

You can get the current temperature with the template {{ state_attr('climate.your_thermostat', 'current_temperature') }} You could then use the following in an automation to increase that by one: - service: climate.set_temperature data_template: entity_id: climate.your_thermostat target_temp_low: {{ (state_attr('climate.your_thermostat', 'current_temperature')|round(0)) + 1 }} Here we take the current temperature, round it to the nearest whole number, then add one.

Edit: It’s possible that the template for the service will not work directly in Bubble Card, so if it’s the case just create a script for that.