This worked! Thank you, thank you, thank you!!!
1 Like
any help please? thanks
Probably but I’m not using card_mod anymore, I have shared how to do an horizontal row of sub-buttons in the Styling section, this is how I use it.
Your custom style is only working to resize an icon, what you want is to resize the icon container, you can do that this way:
.bubble-icon-container {
min-height: 28px !important;
min-width: 28px !important;
}
1 Like
Ah okay, working great thanks!
1 Like
Did you figure this out?
Here’s how I achieved this using styling:
${card.querySelector('.bubble-state').innerText = hass.states['sensor.master_bedroom_temperature'].state + "°F"}
1 Like
@Cloos Any chance you can provide guidance in getting this JS template to work? Even after updating to v2.0.4, I still can’t get the icon to display in the popup container - it is still blank as pictured in the linked post.
I tried using your example, but I am not able to make it work?
styles:
background: |
${window.addEventListener('location-changed', () => {
this.location.href.includes('#belysning') ? 'blue' : '';
})}
Only if i haven more than 90% of battery. It’s looks like it only work with 1 conditional operator.
.bubble-sub-button-1 > ha-icon {
color: ${hass.states['sensor.oneplus_battery_level'].state >= '90' ? 'green' : hass.states['sensor.oneplus_battery_level'].state >= '60' ? 'light-green' : hass.states['sensor.oneplus_battery_level'].state >= '50' ? 'lime' : hass.states['sensor.oneplus_battery_level'].state <= '40' ? 'yellow' : hass.states['sensor.oneplus_battery_level'].state >= '30' ? 'amber' : hass.states['sensor.oneplus_battery_level'].state >= '20' ? 'orange' : hass.states['sensor.oneplus_battery_level'].state >= '10' ? 'deep-orange' : 'red'} !important;
}
Maybe some1 could help me figure it out. I have weak JS skills
@edit
Figured it out, there was problem with name of color, not all working. So I need it to translate. Here working result if some1 is interested:
.bubble-sub-button-1 > ha-icon {
animation: ${hass.states['sensor.oneplus_battery_level'].state <= 15 ? 'blink 2s linear infinite' : ''};
color: ${
hass.states["sensor.oneplus_battery_level"].state >= 90
? "#008000" // Green
: hass.states["sensor.oneplus_battery_level"].state >= 60
? "#35f235" // Light Green
: hass.states["sensor.oneplus_battery_level"].state >= 50
? "#4abd4a" // Lime
: hass.states["sensor.oneplus_battery_level"].state >= 40
? "#FFFF00" // Yellow
: hass.states["sensor.oneplus_battery_level"].state >= 30
? "#FFBF00" // Amber
: hass.states["sensor.oneplus_battery_level"].state >= 20
? "#FFA500" // Orange
: hass.states["sensor.oneplus_battery_level"].state >= 10
? "#FF8C00" // Deep Orange
: "#FF0000" // Red
} !important;
}
@keyframes blink {
50% {opacity: 0; }
}
5 Likes
Hi, have you checked your browser console to see if there is any error message?
Took me a while to realise I needed to toggle to show the attribute on the card 
. But working like a dream now!
I’ve redesigned my whole dashboard now, but can’t find a way to get the below vacuum card. Who can help me?.
Is it possible to make the name “dynamic” ? I want to use input.text to give the name, but that is not working 
- type: custom:bubble-card
card_type: separator
name: '{{ states(''input_text.ruimte_1'')}}'
same with the color of the slider
card_mod:
style: |
ha-card > div > div > div > div.range-fill {
background: rgb({{ states("input_text.kleur_iconen")}});
}
does not work for me either
Here is the code for my lawn mower, in the end it should be the same only the services i guess you need to change:
- type: custom:bubble-card
card_type: separator
name: Mähroboter
icon: mdi:robot-mower-outline
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: lawn_mower.mower
name: Wall-E
icon: mdi:robot-mower-outline
tap_action:
action: call-service
service: lawn_mower.start_mowing
service_data:
entity_id: lawn_mower.mower
target: {}
show_state: true
show_last_changed: true
sub_button:
- entity: sensor.mower_battery_2
name: Akku
icon: mdi:battery-90
show_background: false
show_state: true
- entity: lawn_mower.mower
name: Dock
icon: mdi:home
show_background: false
tap_action:
action: call-service
service: lawn_mower.dock
target:
entity_id: lawn_mower.mower
- entity: lawn_mower.mower
name: Pause
icon: mdi:pause
show_background: false
tap_action:
action: call-service
service: lawn_mower.pause
target:
entity_id: lawn_mower.mower
- entity: lawn_mower.mower
name: Start
icon: mdi:play
show_background: false
tap_action:
action: call-service
service: lawn_mower.start_mowing
target:
entity_id: lawn_mower.mower
card_layout: normal
Does this work for you
card_mod:
style: |
ha-card {
--bubble-button-background-color: rgb({{ states('input_text.kleur_iconen')}}) !important;
}
with this in your text field?
1 Like
haha, I rember a chat 
edit: it does work. thanks !
And can I have the slider ( not the background) in another color ?
Can you post your card code? It will help me.
- type: custom:bubble-card
card_type: separator
name: Aline #'{{ states(''input_text.ruimte_1'')}}'
card_mod:
style: |
.bubble-line {
background: rgb({{ states('input_text.kleur_iconen')}}) !important;
opacity: 0.3;
height: 2px
}
- type: custom:bubble-card
card_type: button
button_type: slider
entity: media_player.oefenzaal_tv
icon: mdi:power
name: ' '
card_mod:
style: |
ha-card {
--bubble-button-background-color: rgb({{ states('input_text.kleur_iconen')}}) !important;
}