problem on background

[platini76]

Goal

my goal is to have no yellow background on my lock card

Source Yaml

type: custom:bubble-card
card_type: button
button_type: switch
entity: lock.nuki_porta_fronte_bocchio
name: Porta Ingresso
card_layout: large
sub_button:
  - entity: sensor.nuki_porta_fronte_bocchio_batteria
    show_state: true
    show_attribute: true
    show_icon: true
    show_background: true
    state_background: true
styles: >

  .bubble-icon {
    color: ${hass.states['lock.nuki_porta_fronte_bocchio'].state === 'locked' ? 'red' : 'green'} !important;
  }  

  .bubble-icon-container {
    background-color: ${hass.states['lock.nuki_porta_fronte_bocchio'].state === 'locked' ? 'rgba(255, 0, 0, 0.2)' : 'rgba(0, 255, 0, 0.2)'} !important;
  } 

  .bubble-sub-button-1 > ha-icon {
    color: 
      ${hass.states['sensor.nuki_porta_fronte_bocchio_batteria'].state < 10 ? 'red' :
       hass.states['sensor.nuki_porta_fronte_bocchio_batteria'].state <= 20 ? 'yellow' :
       'green'} !important;
  } 

  .bubble-sub-button-1 {
    background-color: rgba(86, 86, 85, 0.6) !important;
  }

  ${icon.setAttribute("icon",
  hass.states['lock.nuki_porta_fronte_bocchio'].state === 'locked' ? 'mdi:lock'
  : 'mdi:lock-open')}
show_state: true
force_icon: false
show_last_changed: false
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true

Which step did you already try?

No response

Problem

how I must correct the code?

Read the documentation

• I have read the documentation

[Menelao147]

Something like this?

.bubble-button-background { background: transparent !important; }

type: custom:bubble-card
card_type: button
button_type: switch
entity: lock.nuki_porta_fronte_bocchio
name: Porta Ingresso
card_layout: large
sub_button:
  - entity: sensor.nuki_porta_fronte_bocchio_batteria
    show_state: true
    show_attribute: true
    show_icon: true
    show_background: true
    state_background: true
styles: |
  .bubble-button-background { background: transparent !important; }

  .bubble-icon {
    color: ${hass.states['lock.nuki_porta_fronte_bocchio'].state === 'locked' ? 'red' : 'green'} !important;
  }  

  .bubble-icon-container {
    background-color: ${hass.states['lock.nuki_porta_fronte_bocchio'].state === 'locked' ? 'rgba(255, 0, 0, 0.2)' : 'rgba(0, 255, 0, 0.2)'} !important;
  } 

  .bubble-sub-button-1 > ha-icon {
    color: 
      ${hass.states['sensor.nuki_porta_fronte_bocchio_batteria'].state < 10 ? 'red' :
       hass.states['sensor.nuki_porta_fronte_bocchio_batteria'].state <= 20 ? 'yellow' :
       'green'} !important;
  } 

  .bubble-sub-button-1 {
    background-color: rgba(86, 86, 85, 0.6) !important;
  }

  ${icon.setAttribute("icon",
  hass.states['lock.nuki_porta_fronte_bocchio'].state === 'locked' ? 'mdi:lock'
  : 'mdi:lock-open')}
show_state: true
force_icon: false
show_last_changed: false
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true

[platini76]

oh yessss! I see that the problem was the slider button

[Menelao147]

Hi there! If your issue is resolved, could you please mark my answer as the solution and close the issue? Thanks so much!