Bubble card background color

Configuration Frontend
1

Hello,

I start in the usage of the bubble card.
In this test page, I implemented different types of bubble cards.

image
image1131×339 21.4 KB

They are all nice, excepting the cover bubble card that has a different background. Is that normal ? What’s your recommendation to harmonize the different backgrounds ?

Thanks for your help.

3

Thanks replying.
But I’m lost with this answer. Sure this is related to my bubble question ?

4

Can you post a portion of your card code?

The cover card is lessening the opacity on the function that is available. So if the blind is open the closed button will appear normal and the open button will be faded.

5

Here is the source code corresponding to my screenshot of the initial post.
I remind that I’m trying to get the same background color for all bubbles.
The dynamic color changes based on opened/closed blind is something else.
Thanks.

  - theme: Backend-selected
    title: Confort
    path: confort
    badges: []
    cards:
      - type: custom:bubble-card
        card_type: climate
        entity: climate.thermostat
        name: Chauffage
        sub_button:
          - entity: binary_sensor.chaudiere_active
            icon: mdi:heating-coil
            show_background: true
      - type: custom:bubble-card
        card_type: button
        button_type: state
        card_layout: large-2-rows
        name: Séjour
        entity: sensor.sensor_temperature_temperature
        show_state: false
        sub_button:
          - entity: sensor.sensor_temperature_temperature
            show_background: false
            show_state: true
          - entity: sensor.sensor_temperature_humidity
            show_background: false
            show_state: true
      - type: custom:bubble-card
        card_type: button
        button_type: state
        card_layout: large-2-rows
        name: Salle de bain
        entity: sensor.sonoff_temperature_2_temperature
        show_state: false
        sub_button:
          - entity: sensor.sonoff_temperature_2_temperature
            show_background: false
            show_state: true
          - entity: sensor.sonoff_temperature_2_humidity
            show_background: false
            show_state: true
      - type: custom:bubble-card
        card_type: cover
        entity: cover.screendroit
        name: Screen droit
        icon_open: mdi:window-shutter-open
        icon_close: mdi:window-shutter
        sub_button:
          - entity: cover.screendroit
            name: ouverture
            show_name: true
            show_attribute: true
            show_background: false
            show_icon: false
            attribute: current_position
        styles: |
          .bubble-card-container {
            background: rgba(12,120,50,0.5)
          }
      - type: custom:bubble-card
        card_type: cover
        entity: cover.screen_gauche
        name: Screen gauche
        icon_open: mdi:window-shutter-open
        icon_close: mdi:window-shutter
        sub_button:
          - entity: cover.screendroit
            name: ouverture
            show_name: true
            show_attribute: true
            show_background: false
            show_icon: false
            attribute: current_position
      - type: custom:bubble-card
        card_type: climate
        entity: climate.clim
        sub_button:
          - name: HVAC modes menu
            select_attribute: hvac_modes
            state_background: false
            show_arrow: false
        name: Airco
6

What is the main card or dashboard type that this code is part of?

- theme: indicates this code is a lower hierarchy.

You can control the backgrounds individually with code per card, but there are other methods as well.

Example with my entities

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: cover
    entity: cover.bed_curtains
    name: test
    icon_open: mdi:window-shutter-open
    icon_close: mdi:window-shutter
    sub_button:
      - entity: cover.bed_curtains
        name: test
        show_name: true
        show_attribute: true
        show_background: false
        show_icon: false
        attribute: current_position
    styles: |
      ha-card {
      --bubble-main-background-color: red !important;
       }     
  - type: custom:bubble-card
    card_type: cover
    entity: cover.bed_curtains
    name: test
    icon_open: mdi:window-shutter-open
    icon_close: mdi:window-shutter
    sub_button:
      - entity: cover.bed_curtains
        name: test
        show_name: true
        show_attribute: true
        show_background: false
        show_icon: false
        attribute: current_position
    styles: |
      ha-card {
      --bubble-main-background-color: blue !important;
       }

image
image814×424 14.3 KB

7 
title: Demi Lune
header_cards:
  cards:
    - type: custom:mushroom-chips-card
      chips:
        - type: conditional
          conditions:
            - entity: input_boolean.flag_absent
              state: 'on'
          chip:
            type: template
            content: ''
            icon_color: orange
            icon: mdi:home-off
        - type: conditional
          conditions:
            - entity: input_boolean.flag_absent
              state: 'on'
            - entity: binary_sensor.sensor_presence_iaszone
              state: 'on'
          chip:
            type: template
            content: ''
            icon_color: red
            icon: mdi:motion-sensor
8

This is Mushroom code?? How is that associated with the bubble cards?

9

Long time ago, the mushroom code has been added manually in the raw editor.
Is there a possible conflict between mushroom and bubble ?
Show I drop mushroom in my project if I introduce bubble card ?