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

[Thyraz]

Is it possible to add the current weekday to a displayed string?
For example in a Seperator text?

I know the examples from Github to use Javascript inside the CSS section for using computed text.
But I guess it won’t update when the next day start …

edit:
Ok, I also don’t get how the icon and weather state is updated on the example “Advanced example: Templating a separator name based on a state translated to your language” here:

Is the whole card updated because of the temperature-subicon and the idea behind this example is, that the icon and condition won’t change as long as the temperature hasn’t changed?

In this case, I could add a time-based helper that switches on at midnight and off a minute later (and then hide the sub-button using CSS).
The weekday string can then be generated in Javascript in the style/css section.

edit2:
I tried to set it up that way, let’s see it the date is updated tomorrow morning

- type: custom:bubble-card
    card_type: separator
    name: Name
    sub_button:
      - entity: binary_sensor.midnighthelper
        name: Midnight-Helper
        show_name: true
        show_icon: false
    styles: >-
      .bubble-name:before {
        color: red;
        content: attr(data-before);
        padding-right: 0.5em
      }
      .bubble-sub-button-container {
        display: none;
      }
      ${card.querySelector('.bubble-name').setAttribute('data-before', new
      Date().toLocaleDateString('de-DE', {weekday: 'long'}).toUpperCase())};
      ${card.querySelector('.bubble-name').innerText = new
      Date().toLocaleDateString('de-DE', {day: 'numeric', month:
      'long'}).toUpperCase()};

[Morcegolas]

Hello! How can I remove the decimals in a sub-button? This is the Custom Style/Template code I’m using:

.bubble-sub-button-1 > ha-icon {
    color: ${
      hass.states['sensor.quarto_p_temperature'].state > 20 ? 'green' :
      hass.states['sensor.quarto_p_temperature'].state > 25 ? 'red' :
      'blue'} !important;
}
.bubble-sub-button-2 > ha-icon {
    color: #4c4cff !important;
}
  
${subButtonIcon[0].setAttribute("icon", hass.states['sensor.quarto_p_temperature'].state >= '20' ? 'fas:temperature-half' : hass.states['sensor.sonoff_snzb_02d_quarto_kika_temperatura'].state >= '25' ? 'fas:temperature-full' : 'fas:temperature-empty') } !important;

EDIT:

Another question I have, how can I remove the background of a state button. I’m trying to just leave the pictures of the persons at home, when someone is at home, it shows the image, that part I know how to do, but I want to show only the round pictures and not the rectangle button, is it possible?

Hope anyone can help me!
Thanks.!

[Quokka1979 (Timmy)]

Check the entity, it should allow you to remove the extra decimal.

[gcor71]

I am using the pop-up card to display a map, however the map in the pop-up doesn’t apply any of the intended attributes (focus etc). It works fine when not included within the pop-up vertical stack.

Any suggestions please?

my card:

type: vertical-stack
cards:
  - hash: "#findmy"
    type: custom:bubble-card
    card_type: pop-up
    button_type: name
    name: FindMy
    icon: mdi:radar
    auto_close: "45000"
    scrolling_effect: false
    width_desktop: 75%
    close_on_click: false
    styles: |-
      .bubble-button-card-container {
              background: rgba(12,120,50,0.5) !important;
            }
  - type: map
    entities:
      - device_tracker.r_iphone
      - device_tracker.g_iphone
      - device_tracker.m_iphone
      - device_tracker.i_iphone
      - device_tracker.k_location
      - entity: zone.home
        focus: true
    theme_mode: auto
    default_zoom: 14
    auto_fit: false
    fit_zones: false
view_layout:
  grid-area: F7

This is the pop-up it creates. The map attributes SHOULD focus the map on the home zone - but that doesn’t work in the pop-up.

[Cloos]

Hi! I’ve never tried, but you can try to put that card in another container like a vertical or horizontal stack, this will maybe fix your issue

[Seagull01 (Andy)]

Having a senior moment, and hoping one of you kind people would help me out, I’m trying to change the background colour of the dropdown container on a select card, but can’t just can’t figure it out, even with looking at the styles.ts on git hub

Many thanks

[hovsang (Sang Ho)]

Can we see your code?

[daffyduck42]

Here’s mine, not sure if it is possible to make the back transparent. Maybe someone else can chime in on transparency?

.bubble-icon-container {
    background: #5A738B; /* Slightly darker blue-gray for subtle contrast */
}

  .bubble-sub-button-icon {
    --mdc-icon-size: 13px !important;
  }
  .bubble-dropdown-arrow {
  background: rgba(84, 110, 122) !important;
  }
  mwc-list-item  {
  background: rgba(84, 110, 122) !important;
  border-radius: var(--bubble-select-list-border-radius,
  var(--bubble-border-radius, 55px));
  margin: 5px;
  }
  mwc-list-item[selected] {
  background: rgba(40, 60, 70, 1) !important;
  }

[Colhados (Lluis Collados)]

Hey all!
Im migrating from Mushroom to Bubble Card and I dont know how to add the “entity state icon” to the person card:

[Cloos]

Hi! This is possible with complex custom templates/styles. I’ve shared how on my Patreon page, and yes, this is not free But it helps me dedicate time and effort to maintaining and improving this project for everyone. This template is really advanced and also allows to add badges to sub-buttons if needed.

https://www.patreon.com/posts/adding-home-like-116764324

[Seagull01 (Andy)]

Many thanks Daffy, I’ll have a look when the wife falls asleep on the sofa later

[amstermk]

Just use the rgba color code and instead of the 1 at the end use for example 0,5. Then you get transparency. So for example:

background: rgba(84, 110, 122, 0,5);

[Thyraz]

You can get a badge like this, but I haven’t looked into icons in it so far:

.bubble-icon-container {
  overflow: visible;
}

.bubble-icon-container::after {
  background-color: red;
  color: white;
  font-size: 10px;
  line-height: 1.5em;
  border-radius: 30px;
  margin-top: -5px;
  margin-left: 30px;
  min-width: 15px;
  padding: 2px;
  position: absolute;
  text-align: center;
  content: "1";
}

[fastender]

@Cloos Your idea with the popups in the design was amazing. I wish you all the best. I like your kind and friendly way. You did a great job, and we look forward to more from you next year. My work was also influenced by you and @LE0N (Rounded). Thank you for everything!

[Adec (Adrian)]

Wow, that’s an amazing dashboard. I really love the colour and clear layout as well as the animations. Would it be possible to share the yaml?

[Cloos]

OMG… This is incredible! I’m totally impressed by this design! (And a bit jealous too )

[fastender]

Of course I will. I might not share everything, but I’ll definitely share the essentials with you all. Check out my GitHub; you’ll also find the plugin for the animation there: fastender (fastender) · GitHub

White Design: Imgur: The magic of the Internet

[fastender]

The goal is not the dashboard itself, but rather a system that genuinely makes life easier. That is my persona opinion. Believe me, dashboards take time - a lot of time and that’s unfortunate because it can distract from the real purpose of a smart home. The perfect smart home is, in reality, an illusion. As much as we might try, humans can never control everything.

The focus should be on creating automations and systems that work seamlessly in the background, reducing the need for constant interaction. A beautiful dashboard might look impressive, but it’s ultimately just a tool, not the solution. True convenience comes from systems that anticipate and adapt without requiring us to micromanage. In the end, smart home technology should free us from unnecessary effort, not add to it.

[NoobABC]

Hi Bubble Cards users

Im doing simple color card but dont have idea haw to made color blinking when status is changed to open door. I whould like to have all sensor standard grey color but when its activated “open” it change and blinks color until status change to closed. Any one can help ??

type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.drzwi_wejsciowe_zigbee_contact
name: Drzwi Główne
show_last_changed: true
force_icon: false
show_attribute: true
attribute: battery_low
card_layout: normal
styles: |
ha-card {
–bubble-main-background-color: rgba(0,212,255,1) !important;
}

[schuko80]

Hope someone can help me with a little Problem.

I like to use the bubble card as a state card for my heating Thermostat. With a Push on it, it has to Show more info, where i want to Change the temperature

When i use a Slider, the Bubble Card use the temperature Attribute. (Yellow color in the left)

But if i use the state or the climate Card, the bubble Card use the wrong Attribute (hvac-modes) and there is No color state in the left

How can i change this?

Any Idea?