Use border-style instead of border?
Is there a way to change the name of a sub-button based on state? I can do it with the buttons, with
${card.querySelector('.bubble-name').innerText =
but I cannot find a way with sub-buttons.
thnx
Do you mind sharing your yaml please?
Try with this
styles: |
.bubble-sub-button-1 ${card.querySelector('.bubble-sub-button-name-container').innerText = "Ciao"}
also this should work
${card.querySelector('.bubble-sub-button-1').innerText = state + "€"}
The sub-button icon disappeared. With the first version was ok.
Good evening, I’m trying to adapt my old card
I have started various tests, but nothing is working.
Code: Mushroom OK
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:weather-windy
entity: sensor.60_weather_alert
icon_color: |-
{% if is_state_attr(entity, 'Vent violent', "Vert") %}
green
{% elif is_state_attr(entity, 'Vent violent', "Jaune") %}
yellow
{% elif is_state_attr(entity, 'Vent violent', "Orange") %}
orange
{% elif is_state_attr(entity, 'Vent violent', "Rouge") %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: ""
layout: vertical
secondary: Vent
- type: custom:mushroom-template-card
entity: sensor.60_weather_alert
icon: mdi:weather-rainy
icon_color: |-
{% if is_state_attr(entity, 'Pluie-inondation', "Vert") %}
green
{% elif is_state_attr(entity, 'Pluie-inondation', "Jaune") %}
yellow
{% elif is_state_attr(entity, 'Pluie-inondation', "Orange") %}
orange
{% elif is_state_attr(entity, 'Pluie-inondation', "Rouge") %}
red
{% else %}
grey
{% endif %}
primary: ""
badge_color: ""
tap_action:
action: more-info
layout: vertical
secondary: Pluie
- type: custom:mushroom-template-card
entity: sensor.60_weather_alert
icon: mdi:weather-partly-lightning
icon_color: |-
{% if is_state_attr(entity, 'Orages', "Vert") %}
green
{% elif is_state_attr(entity, 'Orages', "Jaune") %}
yellow
{% elif is_state_attr(entity, 'Orages', "Orange") %}
orange
{% elif is_state_attr(entity, 'Orages', "Rouge") %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
primary: ""
layout: vertical
secondary: Orages
- type: custom:mushroom-template-card
icon: mdi:home-flood
entity: sensor.60_weather_alert
icon_color: |-
{% if is_state_attr(entity, 'Inondation', "Vert") %}
green
{% elif is_state_attr(entity, 'Inondation', "Jaune") %}
yellow
{% elif is_state_attr(entity, 'Inondation', "Orange") %}
orange
{% elif is_state_attr(entity, 'Inondation', "Rouge") %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
primary: ""
layout: vertical
secondary: Inondation
- type: custom:mushroom-template-card
icon: mdi:weather-snowy
entity: sensor.60_weather_alert
icon_color: |-
{% if is_state_attr(entity, 'Neige-verglas', "Vert") %}
green
{% elif is_state_attr(entity, 'Neige-verglas', "Jaune") %}
yellow
{% elif is_state_attr(entity, 'Neige-verglas', "Orange") %}
orange
{% elif is_state_attr(entity, 'Neige-verglas', "Rouge") %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
primary: ""
layout: vertical
secondary: Neige/verglas
layout_options:
grid_columns: full
Start of my bubble code : does not work
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.60_weather_alert
sub_button:
- entity: sensor.60_weather_alert
show_attribute: false
show_last_changed: false
show_state: false
show_name: false
show_icon: true
state_background: false
show_background: false
icon: mdi:weather-windy
- entity: sensor.60_weather_alert
icon: mdi:home-flood
show_background: false
show_icon: true
show_name: false
show_state: false
show_last_changed: false
show_attribute: false
styles: |+
.bubble-sub-button-1 > ha-icon {
color: ${
hass.states['sensor.60_weather_alert'].state === 'Vert' ? 'green' :
hass.states['sensor.60_weather_alert'].state === 'Jaune' ? 'yellow' :
hass.states['sensor.60_weather_alert'].state === 'Orange' ? 'orange' :
hass.states['sensor.60_weather_alert'].state === 'Rouge' ? 'red' :
'grey'} !important;
}
.bubble-icon {
color: ${
hass.states['sensor.60_weather_alert'].state === 'Vent violent' && hass.states['sensor.60_weather_alert'].state === 'Vert' ? 'green' :
hass.states['sensor.60_weather_alert'].state === 'Vent violent' && hass.states['sensor.60_weather_alert'].state === 'Jaune' ? 'yellow' :
hass.states['sensor.60_weather_alert'].state === 'Vent violent' && hass.states['sensor.60_weather_alert'].state === 'Orange' ? 'orange' :
hass.states['sensor.60_weather_alert'].state === 'Vent violent' && hass.states['sensor.60_weather_alert'].state === 'Rouge' ? 'red' : 'green'} !important;
color: ${
hass.states['sensor.60_weather_alert'].state === 'Inondation' && hass.states['sensor.60_weather_alert'].state === 'Vert' ? 'green' :
hass.states['sensor.60_weather_alert'].state === 'Inondation' && hass.states['sensor.60_weather_alert'].state === 'Jaune' ? 'yellow' :
hass.states['sensor.60_weather_alert'].state === 'Inondation' && hass.states['sensor.60_weather_alert'].state === 'Orange' ? 'orange' :
hass.states['sensor.60_weather_alert'].state === 'Inondation' && hass.states['sensor.60_weather_alert'].state === 'Rouge' ? 'red' : 'green'} !important;
}
.bubble-sub-button-2 > ha-icon {
color: ${
hass.states['sensor.60_weather_alert'].state === 'Vert' ? 'green' :
hass.states['sensor.60_weather_alert'].state === 'Jaune' ? 'yellow' :
hass.states['sensor.60_weather_alert'].state === 'Orange' ? 'orange' :
hass.states['sensor.60_weather_alert'].state === 'Rouge' ? 'red' :
'grey'} !important;
}
scrolling_effect: true
show_icon: true
force_icon: false
show_name: false
show_state: true
show_last_changed: false
I will need help, thank you
I need some help with rounding sensor values.
I’ve got a helper, which contains an air quality value as integer. If I’m using “show state” in a bubble card state card, it is displayed as integer (e.g. 50).
If I modify the state.innertext value, the value is converted into float (e.g. 50.0) - which i don’t want:
${(() => {
const aqi = hass.states['sensor.aqi_bkk'].state;
card.querySelector('.bubble-state').innerText =
aqi <= 50 ? "AQI " + aqi + " - Good" :
aqi <=100 ? "AQI " + aqi + " - Moderate" :
aqi <= 150 ? "AQI " + aqi + " - Unhealthy for sensitive groups" :
aqi <= 200 ? "AQI " + aqi + " - Unhealthy" :
aqi <= 300 ? "AQI " + aqi + " - Very Unhealthy" : " - Hazardous";
})()}
Any ideas?
use
Math.round(aqi)
Perfect, thanks 
I think this is a good example to share in Clooos/Bubble-Card Share Your Custom Styles Templates And Dashboards · Discussions · GitHub, do you want to put it there?
You made some error in the attributes usage
Try like this:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.60_weather_alert
sub_button:
- entity: sensor.60_weather_alert
show_attribute: false
show_last_changed: false
show_state: false
show_name: false
show_icon: true
state_background: false
show_background: false
icon: mdi:weather-windy
- entity: sensor.60_weather_alert
icon: mdi:home-flood
show_background: false
show_icon: true
show_name: false
show_state: false
show_last_changed: false
show_attribute: false
styles: |+
.bubble-icon {
color: ${
state === 'Vert' ? 'green' :
state === 'Jaune' ? 'yellow' :
state === 'Orange' ? 'orange' :
state === 'Rouge' ? 'red' :
'green'} !important;
}
.bubble-sub-button-1 {
color: ${
hass.states['sensor.60_weather_alert'].attributes.vent_violent === 'Vert' ? 'green' :
hass.states['sensor.60_weather_alert'].attributes.vent_violent === 'Jaune' ? 'yellow' :
hass.states['sensor.60_weather_alert'].attributes.vent_violent === 'Orange' ? 'orange' :
hass.states['sensor.60_weather_alert'].attributes.vent_violent === 'Rouge' ? 'red' :
'grey'} !important;
}
.bubble-sub-button-2 {
color: ${
hass.states['sensor.60_weather_alert'].attributes.inondation === 'Vert' ? 'green' :
hass.states['sensor.60_weather_alert'].attributes.inondation === 'Jaune' ? 'yellow' :
hass.states['sensor.60_weather_alert'].attributes.inondation === 'Orange' ? 'orange' :
hass.states['sensor.60_weather_alert'].attributes.inondation === 'Rouge' ? 'red' :
'grey'} !important;
}
scrolling_effect: true
show_icon: true
force_icon: false
show_name: false
show_state: true
show_last_changed: false
1 Like
Solved! Took your suggestion and combined it with the following and the background is gone! Thanks!
styles: |
.bubble-pop-up {
background-color: transparent;
}
Hello, I need your kindly help 
I have this climate cards, but I need them to not change the background color to orange when they are on, I have an red icon to let me know that the boiler is on, that you can barely see with that orange background.
Here is my styling code, I know that it could be better but you know what they say, if it works… 
Now more serious, if you want to correct the existing code you can because I’m trying things until they eventually work.
.bubble-sub-button-1 {
display: ${hass.states['climate.bt_quarto_francisca'].attributes.call_for_heat === false ? '' : 'none'} !important;
}
.bubble-sub-button-2 > ha-icon {
color: ${hass.states['climate.bt_quarto_francisca'].attributes.window_open === false ? 'aqua' : ''} !important;
}
.bubble-sub-button-2 {
display: ${hass.states['climate.bt_quarto_francisca'].attributes.window_open === true ? '' : 'none'} !important;
}
.bubble-sub-button-3 > ha-icon {
color: ${hass.states['climate.bt_quarto_francisca'].attributes['hvac_action'] === 'heating' ? 'red' : ''} !important;
}
.bubble-sub-button-3 {
display: ${hass.states['climate.bt_quarto_francisca'].attributes.hvac_action === 'heating' ? '' : 'none'} !important;
}
.bubble-sub-button-4 > ha-icon {
color: ${hass.states['climate.bt_quarto_francisca'].state === 'heat' ? 'orange' : ''} !important;
}
${subButtonIcon[1].setAttribute("icon", hass.states['climate.bt_quarto_francisca'].attributes['window_open'] === false ? 'mdi:window-closed-variant' : 'mdi:window-open-variant')}
What do I need to add to remove the background color based on state? Because this is a climate card and I don’t have that option on Climate Settings Options.
Thanks!
Can somebody help me please to center the texts and icons? I tried but I was not able to do.
Here is my code.
styles: |
card-content {
width: 100%;
}
.large .bubble-button-card-container {
height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
overflow: hidden !important;
}
.bubble-button-card-container {
border-radius: 0% !important;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'a'
'b'
'c';
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr;
}
.bubble-button-background {
background: linear-gradient(137deg, rgba(248,213,191,0.7) 0%, rgba(245,191,229,0.7) 50%, rgba(198,170,235,0.7) 100%) !important;
opacity: 1 !important;
border-radius: 20px 20px 20px 20px
}
.bubble-icon-container {
grid-area: a;
border-radius: 100% !important;
background: none;
}
.bubble-icon-container:hover {
grid-area: a;
border-radius: 100% !important;
background: linear-gradient(137deg, rgba(248,213,191,1) 0%, rgba(245,191,229,1) 50%, rgba(198,170,235,1) 100%) !important;
}
.bubble-icon {
width: 40%;
--mdc-icon-size: 100px !important;
opacity: 1 !important;
}
.bubble-name {
font-weight: 500;
margin: auto;
font-size: 16px;
}
.bubble-state {
font-weight: 300;
padding-left: 30%;
font-size: 14px;
}
.rows-2 .bubble-sub-button-container {
grid-area: c;
display: flex !important;
width:100%;
height:100%;
position:relative;
}
.rows-2 .bubble-sub-button {
height: 30px !important;
width: 100% !important;
position:absolute;
background: none;
}
.rows-2 .bubble-sub-button-icon {
--mdc-icon-size: 40px !important;
color: rgba(var(${hass.states['light.all_lights_livingroom'].state === 'on' ? '--color-white' : ''}), 1) !important;
}
${subButtonIcon[0].setAttribute("icon",
hass.states['light.all_lights_livingroom'].state === 'off' ?
'mdi:toggle-switch' : 'mdi:toggle-switch-off')}
hello,
I’d like to make a bubble-card with 2 selects and have the 2nd one displayed when a choice has been made in the first one.
is this possible?
thanks
@Cloos Can you please add ability to have hue_scenes: in addition to effect_list: for selector bubble card, this would work for all Hue lights, when using the Hue Hub in addition to HA.
ill be more then happy to be alpha tester if you need that.
Is there a way to conditionally show full cards easily like you can with the sub buttons, without embedding them in a conditional card? Would be great to have a visibility option for the full card as a UI element 
I want to hide the whole card so there are no gaps like you can see in the image below.
