Help with bubble-card templating

Configuration Frontend
1

Hello everyone
I have a problem with templating a bubble card.
I wanted to make the card less round, and it works; the only problem is that there persists a “background” that I cannot change:

the code:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    card_layout: large-2-rows
    name: Vtherm Salle de Bain
    entity: climate.vtherm_salle_de_bain
    icon: mdi:home-lightning-bolt-outline
    show_state: true
    button_action: more-info
    sub_button:
      - entity: climate.vtherm_salle_de_bain
        show_state: false
        show_background: false
        name: Actuelle
        icon: mdi:thermometer
        show_name: true
        show_attribute: true
        attribute: current_temperature
      - entity: climate.vtherm_salle_de_bain
        icon: mdi:thermometer
        show_background: false
        show_attribute: true
        attribute: temperature
        name: Consigne
        show_state: false
        show_name: true
      - entity: climate.vtherm_salle_de_bain
        show_attribute: true
        attribute: preset_mode
        show_icon: false
        show_background: true
        show_state: false
    show_attribute: true
    attribute: preset_mode
    styles: >
      ha-card > div > div {
          box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
          border-radius: 12px !important;
         } 
         .bubble-button-card-container {
           border-radius: 12px !important;
         }

The result:
image

Thanks for your help!

2

I copied your code and changed to:

.bubble-button-card-container {
  border-radius: 28px !important;
}

Changing from 12px to 28px radius worked for me. But also your screenshot doesn’t seem to match the code - for example, there’s nothing in the code to make the background red, so where is this coming from?

3

the card code is very long I did not put it in full; but I can do it if necessary.

.bubble-button-card-container {
border-radius: 28px !important;
}

this code also works for me but that’s not what I’m trying to do : I don’t want the black part to disappear but for the red part to have the same shape as the black part, that is to say less round

4

Maybe post everything because I was confused about what you wanted, and with a 12px radius I got a “less round” version like you wanted, so clearly I don’t understand what you’re after. And are you using a theme with the blue background? That may be relevant too.

5

ok i did it
thanks
image

     .bubble-button-card-container {
       border-radius: 12px !important;
     }
     .bubble-button-background {
       background-color: ${hass.states['climate.vtherm_salle_de_bain'].attributes.hvac_action === 'heating' ? 'rgba(255, 0, 0, 0.3)' : 'red'} !important;
       border-radius: 12px !important;
     }
1 Like