How do I set the color of a class/element to be the color of a RGB light?
For example, if I have a RGB light set to a blue, and want the icon of a button, set to a slider typer, to be the same color blue.
I didn’t see info on that anywhere in the documentation.
Hello everyone 
How can I adjust the colors of a template that has three states? 3 different colors per state.
I closed, tilted and opened a window with the status.
Thank you!
Try this:
styles: |
.bubble-range-fill {
background: ${hass.states['entity'].state <= 20 ? 'red'
: hass.states['entity'].state <= 80 ? 'yellow'
: 'green'} !important;
opacity: 1 !important;
}
I got similar working for my curtains, only difference was using theme variable colours and an attribute instead of the entity state.
thank you very much!
That helped me alot. For anyone who has a similar problem, here is my solution:
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'geschlossen' ? 'lightgrey'
: state === 'gekippt' ? 'orange'
: 'red'} !important;
}
I’m struggling to change specific horizontal button stack buttons depending on conditions.
I have one for notifications which I want the icon to turn red when an sensor becomes on. I can’t figure out how to addess the specific button though?
Thus far I’ve tried a number of things, including the below but I don’t think the horizontal button stack buttons act like normal sub buttons:
.bubble-sub-button-1 > ha-icon {
color: ${hass.states['binary_sensor.bubble_dash_notifications'].state === 'detected' ? 'red' : 'red'} !important;
}
Is anyone able to help?
Have a look at the following topic within this thread:
Might give you some ideas how to go on
Would be really interested in seeing the yaml or more setup instructions for the timer card - that looks exactly what i’ve been looking for!
Hi guys,
Anyone know how to write AND condition on styling? So I’ve got this working however I need to do a test if climate.main_climate_controller = “heat” AND climate.living.room = “heat_cool”, then give me that red background
My code is currently as follows:
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['climate.main_climate_controller'].state === 'heat' ? '#ff2400'
: ''} !important;
This gives me this result:
The working code for the other entity that I need to combine is as follows:
.bubble-button-background {
background-color: ${state == 'heat_cool' ? '#abc32f' : ''} !important;
}
How do I combine these two statements using AND to validate both condition to color them red?
Thanks again!
hi Pod, do you happen to know how to use if AND statement to return the desired color? I’ve used your solution and it’s working with if A = x, B = y. However I need to have it if A = x and B = y, then Z
My original question is just above this post.
Appreciate your time
Use brackets and the two conditions with && to join them. Just did a very quick test using random sensors of my own to see if it works, and it seems to.
.bubble-button-background {
opacity: 1 !important;
background-color: ${(hass.states['climate.main_climate_controller'].state === 'heat' && hass.states['climate.living.room'].state === 'heat_cool' )? '#ff2400'
: ''} !important;
many thanks for the reply. I’ve tried the solution and it doesn’t seem to work at my end. have cleared my cache just in case
Update:this code seems to fix it
.bubble-button-background {
opacity: 1 !important;
background-color: ${(hass.states['climate.main_climate_controller'].state === 'heat' && state === 'heat_cool') ? '#ff2400'
: ''} !important;
edit: Just saw your update. Glad its working now.
Odd. This is the exact version I tried. With aircon ‘on’ & blanket ‘off’, the button is red. Turn the blanket on and the button becomes yellow.
.bubble-button-background {
background-color: ${(hass.states['switch.aircon'].state === 'on' && hass.states['switch.blanket'].state === 'off') ? 'red'
: hass.states['switch.aircon'].state === 'on' ? 'yellow'
: 'green'} !important;
opacity: 1 !important;
}
thanks for sharing it. I seem to have fixed it somehow. had to remove the hass.states[‘entity’].state and changed it with just state
Hi guys,
I have a bunch of air sensors and I would like to have green, yellow or red depending on the values.
anyone has examples or anything? I’m not sure at all where to start
How did you manage a pop-up inside a pop-up?
I have tried putting this view inside a pop-up:
title: Teknisk
path: teknisk
layout:
margin: "-0.5vh 1vh 0vh"
grid-template-columns: auto
grid-template-rows: 19.5vh 7.5vh 50vh 4vh 10vh 9vh
grid-template-areas: |
"header"
"subheader"
"main"
"footer_title"
"footer"
"menu"
theme: noctis
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#strom"
name: Strøm
back_open: true
margin_top_mobile: 0px
- type: custom:bubble-card
card_type: separator
name: Momentan
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: sensor.power_vardane_214
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Pris
entity: sensor.electricity_price_vardane_214
icon: mdi:cash-100
- type: custom:bubble-card
card_type: separator
name: Dag
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: sensor.accumulated_consumption_vardane_214
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Kostnad
entity: sensor.accumulated_cost_vardane_214
icon: mdi:cash-100
- type: custom:bubble-card
card_type: separator
name: I går
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: input_number.stromforbruk_i_gar
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Kostnad
entity: input_number.stromkostnad_i_gar
icon: mdi:cash-100
- type: custom:bubble-card
card_type: separator
name: Månad
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: sensor.monthly_net_consumption_vardane_214
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Kostnad
entity: sensor.monthly_cost_vardane_214
icon: mdi:cash-100
- type: energy-usage-graph
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#batteri"
name: Batterinivå
back_open: true
margin_top_mobile: 0px
- type: custom:battery-state-card
- type: custom:button-card
name: Teknisk
custom_fields:
badge:
card:
type: custom:button-card
label: "[[[return states[\"sensor.dato\"].state]]]"
show_label: true
show_icon: false
show_name: false
tap_action:
action: toggle
entity: input_boolean.kiosk_mode
styles:
grid:
- grid-template-areas: "\"n gutter l\""
- grid-template-columns: min-content 5px min-content
- grid-template-rows: min-content
card:
- margin-left: 0px
- padding-left: 30px
- padding-right: 30px
- padding-top: 15px
- padding-bottom: 15px
- font-size: 20px
- line-height: 18px
- font-weight: 500
- background: var(--background-color-2)
name:
- color: var(--contrast1)
label:
- color: var(--text-color)
styles:
grid:
- grid-template-areas: "\"n\" \"badge\""
card:
- box-shadow: none
- background-color: transparent
- cursor: none
- background: var(--background-color)
- border-top-left-radius: 0px
- border-top-right-radius: 0px
- padding: 16px 0
- "--mdc-ripple-press-opacity": 0
name:
- color: var(--text-color)
- font-size: 40px
custom_fields:
badge:
- margin: 16px auto 0 auto
- "--mdc-ripple-press-opacity": 0.5
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
height: 70vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
- type: custom:bubble-card
card_type: separator
name: Sikkerhet
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: lock.ytterdor
name: Inngangsdør
show_state: true
icon: mdi:door
styles: |
ha-card {
font-size: 12px;
}
- type: conditional
conditions:
- condition: state
entity: alarm_control_panel.sector_alarmpanel_01232552_none
state: armed_away
card:
type: custom:bubble-card
card_type: button
button_type: custom
entity: alarm_control_panel.sector_alarmpanel_01232552_none
name: Skru av alarm
icon: mdi:shield-off
tap_action:
action: call-service
service: script.alarm_av
show_state: true
styles: |
ha-card {
font-size: 12px;
}
button_action:
tap_action:
action: call-service
service: script.alarm_av
- type: conditional
conditions:
- condition: state
entity: alarm_control_panel.sector_alarmpanel_01232552_none
state: disarmed
card:
type: custom:bubble-card
card_type: button
button_type: custom
entity: alarm_control_panel.sector_alarmpanel_01232552_none
name: Skru på alarm
icon: mdi:shield
tap_action:
action: call-service
service: script.alarm_pa
target: {}
show_state: true
styles: |
ha-card {
font-size: 12px;
}
button_action:
tap_action:
action: call-service
service: script.alarm_pa
- type: custom:bubble-card
card_type: separator
name: Vaskerom
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: input_boolean.vaskemaskin
name: Vaskemaskin
show_state: true
styles: |
ha-card {
font-size: 12px;
}
- type: custom:bubble-card
card_type: button
entity: input_boolean.torketrommel
name: Tørketrommel
show_state: true
styles: |
ha-card {
font-size: 12px;
}
- type: custom:bubble-card
card_type: separator
name: Vanning
icon: mdi:watering-can
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: switch.water_control
icon: mdi:water
name: Vanning
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.sensor_soil_humidity
name: Fuktighet Tre
icon: ""
- type: custom:bubble-card
card_type: separator
name: Tema
- type: custom:bubble-card
card_type: button
button_type: custom
entity: input_select.themes
show_state: true
name: Velg tema farge
tap_action:
action: call-service
service: input_select.select_next
data:
cycle: true
target:
entity_id: input_select.themes
styles: |
ha-card {
font-size: 12px;
}
button_action:
tap_action:
action: call-service
service: input_select.select_next
data:
cycle: true
target:
entity_id: input_select.themes
- type: custom:bubble-card
card_type: separator
name: Batteri
- type: custom:button-card
name: Batterinivå
icon: mdi:battery-60
tap_action:
action: navigate
navigation_path: "#batteri"
show_state: true
show_label: false
styles:
img_cell:
- background: var(--background-color)
- border-radius: 100px
- width: 35px
- height: 35px
grid:
- grid-template-areas: "\"i n s\""
- grid-template-columns: 40px 1fr 40px
card:
- background: var(--background-color-2)
- border-color: var(--background-color)
- margin: 0
- border-radius: 50px
- border-width: none
- border-color: var(--text-color)
- padding: 8px 12px 8px 5px
icon:
- width: 20px
- color: var(--text-color)
- opacity: 50%
name:
- justify-self: start
- font-size: 12px
- padding-left: 10px
- font-weight: bold
state:
- justify-self: start
- font-size: 10px
- padding-right: 20px
- opacity: "0.7"
- type: custom:button-card
name: Strøm
icon: mdi:lightning-bolt
label: >
[[[ return states['sensor.electricity_price_vardane_214'].state + "
kr"]]]
tap_action:
action: navigate
navigation_path: "#strom"
show_state: false
show_label: true
styles:
img_cell:
- background: var(--background-color)
- border-radius: 100px
- width: 35px
- height: 35px
grid:
- grid-template-areas: |
"i n"
"i l"
- grid-template-columns: 40px 1fr 60px
card:
- background: var(--background-color-2)
- border-color: var(--background-color)
- margin: 0
- border-radius: 50px
- border-width: none
- border-color: var(--text-color)
- padding: 8px 12px 8px 5px
icon:
- width: 20px
- color: var(--text-color)
- opacity: 50%
name:
- justify-self: start
- font-size: 12px
- padding-left: 10px
- font-weight: bold
label:
- justify-self: start
- font-size: 10px
- padding-left: 10px
- opacity: "0.7"
- type: custom:button-card
name: Automasjoner
icon: mdi:home-automation
tap_action:
action: navigate
navigation_path: "#automasjon"
show_state: true
show_label: false
styles:
img_cell:
- background: var(--background-color)
- border-radius: 100px
- width: 35px
- height: 35px
grid:
- grid-template-areas: "\"i n s\""
- grid-template-columns: 40px 1fr 40px
card:
- background: var(--background-color-2)
- border-color: var(--background-color)
- margin: 0
- border-radius: 50px
- border-width: none
- border-color: var(--text-color)
- padding: 8px 12px 8px 5px
icon:
- width: 20px
- color: var(--text-color)
- opacity: 50%
name:
- justify-self: start
- font-size: 12px
- padding-left: 10px
- font-weight: bold
state:
- justify-self: start
- font-size: 10px
- padding-right: 20px
- opacity: "0.7"
view_layout:
grid-area: main
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 2;
position: fixed;
bottom: 36px;
left: 10px;
width: calc(100% - 20px);
background: var(--background-color-2) !important;
padding: 10px;
}
card:
type: grid
square: false
columns: 7
cards:
- type: custom:paper-buttons-row
buttons:
- icon: mdi:robot-vacuum
layout: icon
name: Sécurité
style:
button:
width: 42px
height: 42px
name:
margin-top: 20px
styles:
button:
background-color: var(--background-color-2)
border-radius: 34px
icon:
margin-top: 0
color: var(--background-color-2)
- type: custom:paper-buttons-row
buttons:
- icon: mdi:robot-vacuum
layout: icon
name: Sécurité
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
styles:
button:
background-color: var(--background-color-2)
border-radius: 34px
icon:
margin-top: 0
color: var(--background-color-2)
- type: custom:paper-buttons-row
buttons:
- icon: mdi:robot-vacuum
layout: icon
name: Sécurité
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
styles:
button:
background-color: var(--background-color-2)
border-radius: 34px
icon:
margin-top: 0
color: var(--background-color-2)
- type: custom:paper-buttons-row
buttons:
- icon: mdi:home
layout: icon
name: Sécurité
tap_action:
action: navigate
navigation_path: home
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
styles:
button:
background-color: var(--footer-accent-color)
border-radius: 34px
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#automasjon"
name: Automasjoner
back_open: true
margin_top_mobile: 0px
- type: markdown
content: |2-
Tid Automasjon
<br>
{% for state in states.automation
|selectattr('attributes.last_triggered', 'defined')
|selectattr('attributes.last_triggered')
|sort(attribute='attributes.last_triggered', reverse=true) -%}
{% if (now() - state.attributes.last_triggered).total_seconds() < 86400 %}
{%- set t = (as_timestamp(state.attributes.last_triggered) | timestamp_custom('%H:%M', true)) -%}
{{t}} _{{state.name}}_
{% endif -%}
{% endfor %}
Put when I tried putting it inside this pop-up, pop-ups like #strom just closes the popup when I try opening it.
I put the whole view inside a new vertical stack. I can open the first, but none of the pop-ups inside the pop-up
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#teknisk'
name: Teknisk
back_open: true
margin_top_mobile: 0px
bg_opacity: '100'
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#strom'
name: Strøm
back_open: true
margin_top_mobile: 0px
- type: custom:bubble-card
card_type: separator
name: Momentan
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: sensor.power_vardane_214
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Pris
entity: sensor.electricity_price_vardane_214
icon: mdi:cash-100
- type: custom:bubble-card
card_type: separator
name: Dag
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: sensor.accumulated_consumption_vardane_214
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Kostnad
entity: sensor.accumulated_cost_vardane_214
icon: mdi:cash-100
- type: custom:bubble-card
card_type: separator
name: I går
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: input_number.stromforbruk_i_gar
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Kostnad
entity: input_number.stromkostnad_i_gar
icon: mdi:cash-100
- type: custom:bubble-card
card_type: separator
name: Månad
- type: horizontal-stack
cards:
- type: custom:button-card
template: sensor
name: Forbruk
entity: sensor.monthly_net_consumption_vardane_214
icon: mdi:home-lightning-bolt
- type: custom:button-card
template: sensor
name: Kostnad
entity: sensor.monthly_cost_vardane_214
icon: mdi:cash-100
- type: energy-usage-graph
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#batteri'
name: Batterinivå
back_open: true
margin_top_mobile: 0px
- type: custom:battery-state-card
- type: custom:button-card
name: Teknisk
custom_fields:
badge:
card:
type: custom:button-card
label: '[[[return states["sensor.dato"].state]]]'
show_label: true
show_icon: false
show_name: false
tap_action:
action: toggle
entity: input_boolean.kiosk_mode
styles:
grid:
- grid-template-areas: '"n gutter l"'
- grid-template-columns: min-content 5px min-content
- grid-template-rows: min-content
card:
- margin-left: 0px
- padding-left: 30px
- padding-right: 30px
- padding-top: 15px
- padding-bottom: 15px
- font-size: 20px
- line-height: 18px
- font-weight: 500
- background: var(--background-color-2)
name:
- color: var(--contrast1)
label:
- color: var(--text-color)
styles:
grid:
- grid-template-areas: '"n" "badge"'
card:
- box-shadow: none
- background-color: transparent
- cursor: none
- background: var(--background-color)
- border-top-left-radius: 0px
- border-top-right-radius: 0px
- padding: 16px 0
- '--mdc-ripple-press-opacity': 0
name:
- color: var(--text-color)
- font-size: 40px
custom_fields:
badge:
- margin: 16px auto 0 auto
- '--mdc-ripple-press-opacity': 0.5
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
height: 70vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
- type: custom:bubble-card
card_type: separator
name: Sikkerhet
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: lock.ytterdor
name: Inngangsdør
show_state: true
icon: mdi:door
styles: |
ha-card {
font-size: 12px;
}
- type: conditional
conditions:
- condition: state
entity: alarm_control_panel.sector_alarmpanel_01232552_none
state: armed_away
card:
type: custom:bubble-card
card_type: button
button_type: custom
entity: alarm_control_panel.sector_alarmpanel_01232552_none
name: Skru av alarm
icon: mdi:shield-off
tap_action:
action: call-service
service: script.alarm_av
show_state: true
styles: |
ha-card {
font-size: 12px;
}
button_action:
tap_action:
action: call-service
service: script.alarm_av
- type: conditional
conditions:
- condition: state
entity: alarm_control_panel.sector_alarmpanel_01232552_none
state: disarmed
card:
type: custom:bubble-card
card_type: button
button_type: custom
entity: alarm_control_panel.sector_alarmpanel_01232552_none
name: Skru på alarm
icon: mdi:shield
tap_action:
action: call-service
service: script.alarm_pa
target: {}
show_state: true
styles: |
ha-card {
font-size: 12px;
}
button_action:
tap_action:
action: call-service
service: script.alarm_pa
- type: custom:bubble-card
card_type: separator
name: Vaskerom
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: input_boolean.vaskemaskin
name: Vaskemaskin
show_state: true
styles: |
ha-card {
font-size: 12px;
}
- type: custom:bubble-card
card_type: button
entity: input_boolean.torketrommel
name: Tørketrommel
show_state: true
styles: |
ha-card {
font-size: 12px;
}
- type: custom:bubble-card
card_type: separator
name: Vanning
icon: mdi:watering-can
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: switch.water_control
icon: mdi:water
name: Vanning
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.sensor_soil_humidity
name: Fuktighet Tre
icon: ''
- type: custom:bubble-card
card_type: separator
name: Tema
- type: custom:bubble-card
card_type: button
button_type: custom
entity: input_select.themes
show_state: true
name: Velg tema farge
tap_action:
action: call-service
service: input_select.select_next
data:
cycle: true
target:
entity_id: input_select.themes
styles: |
ha-card {
font-size: 12px;
}
button_action:
tap_action:
action: call-service
service: input_select.select_next
data:
cycle: true
target:
entity_id: input_select.themes
- type: custom:bubble-card
card_type: separator
name: Batteri
- type: custom:button-card
name: Batterinivå
icon: mdi:battery-60
tap_action:
action: navigate
navigation_path: '#batteri'
show_state: true
show_label: false
styles:
img_cell:
- background: var(--background-color)
- border-radius: 100px
- width: 35px
- height: 35px
grid:
- grid-template-areas: '"i n s"'
- grid-template-columns: 40px 1fr 40px
card:
- background: var(--background-color-2)
- border-color: var(--background-color)
- margin: 0
- border-radius: 50px
- border-width: none
- border-color: var(--text-color)
- padding: 8px 12px 8px 5px
icon:
- width: 20px
- color: var(--text-color)
- opacity: 50%
name:
- justify-self: start
- font-size: 12px
- padding-left: 10px
- font-weight: bold
state:
- justify-self: start
- font-size: 10px
- padding-right: 20px
- opacity: '0.7'
- type: custom:button-card
name: Strøm
icon: mdi:lightning-bolt
label: >
[[[ return states['sensor.electricity_price_vardane_214'].state + "
kr"]]]
tap_action:
action: navigate
navigation_path: '#strom'
show_state: false
show_label: true
styles:
img_cell:
- background: var(--background-color)
- border-radius: 100px
- width: 35px
- height: 35px
grid:
- grid-template-areas: |
"i n"
"i l"
- grid-template-columns: 40px 1fr 60px
card:
- background: var(--background-color-2)
- border-color: var(--background-color)
- margin: 0
- border-radius: 50px
- border-width: none
- border-color: var(--text-color)
- padding: 8px 12px 8px 5px
icon:
- width: 20px
- color: var(--text-color)
- opacity: 50%
name:
- justify-self: start
- font-size: 12px
- padding-left: 10px
- font-weight: bold
label:
- justify-self: start
- font-size: 10px
- padding-left: 10px
- opacity: '0.7'
- type: custom:button-card
name: Automasjoner
icon: mdi:home-automation
tap_action:
action: navigate
navigation_path: '#automasjon'
show_state: true
show_label: false
styles:
img_cell:
- background: var(--background-color)
- border-radius: 100px
- width: 35px
- height: 35px
grid:
- grid-template-areas: '"i n s"'
- grid-template-columns: 40px 1fr 40px
card:
- background: var(--background-color-2)
- border-color: var(--background-color)
- margin: 0
- border-radius: 50px
- border-width: none
- border-color: var(--text-color)
- padding: 8px 12px 8px 5px
icon:
- width: 20px
- color: var(--text-color)
- opacity: 50%
name:
- justify-self: start
- font-size: 12px
- padding-left: 10px
- font-weight: bold
state:
- justify-self: start
- font-size: 10px
- padding-right: 20px
- opacity: '0.7'
view_layout:
grid-area: main
EDIT:
Never mind, I tried putting all of the pop-ups in the main view and not inside the pop-ups, now it’s working
For the life of me, I can’t seem to figure out how to capitalize or use title case on a string. The state is lower case, but I’d like to capitalize it. Current syntax is this:
styles: ' ${card.querySelector(''.bubble-name'').innerText = hass.states[''sensor.iphone_presence''].state + '' - '' + hass.states[''sensor.iphone_presence''].attributes.distance}'
I have looked on the github page and here, but I haven’t had any luck. What’s the syntax to do string manipulation?
Hi Pod, I need your help one more time with this.
.bubble-button-background {
opacity: 1 !important;
background-color: ${(hass.states['climate.main_climate_controller'].state === 'heat' && state === 'heat_cool') ? '#d22b2b'
: ''} !important;
.bubble-icon {
opacity: 1 !important;
color: ${(hass.states['climate.main_climate_controller'].state === 'heat' && state === 'heat_cool') ? '#d22b2b'
: ''} !important;
so it gives me this correctly, however I also want the color icon to be red, which is the second code above.
If I swap the position of those two codes, the icon becomes red, and the button background turns back to the previous state. unsure how to deal with this. Would you be able to look into this? Many thanks!!
Never mind. I missed the } and now it’s working!
Is it just the sensor.iphone_presence state part that needs it? Is it one word? There doesn’t seem to be an easy way to capitalise it. You could use .toUpperCase() and .toLowerCase() combo
${card.querySelector('.bubble-name').innerText =
hass.states['sensor.iphone_presence'].state.charAt(0).toUpperCase()
+ hass.states['sensor.iphone_presence'].state.substr(1).toLowerCase()
+ ' - ' + hass.states['sensor.iphone_presence'].attributes.distance }
Not sure how well that will work, depends on what your sensor results look like.
May be easier to create a new sensor that has it all ready sorted out. Eg:
{{states('sensor.iphone_presence') | title + ' - ' + state_attr('sensor.iphone_presence' , 'distance') | title }}
Hey guys, loving Bubble Card 
I’ve managed to build the most epic dashboard, and now I’m combining it with decluttering card to try and templatize some of it (and it was listed in @Cloos last post by @brunosabot )
So here’s where I’m stuck (and maybe this is more of a decluttering card issue, and then I’ll ask there)…
I have variables (from decluttering card) that are passed into the template, i.e. “[[entity_6]]” which I can use as needed i.e. - entity: “[[entity_6]]”
I’ve got 6x sub buttons on a button card, and sometimes I don’t send in 6x light controls and would like the last few unused ones to not show.
I’ve tried to use the [[entity_6]] in the styles, but I can never get it to work (my CSS is super bad though)
This is what I would need:
styles: >
.bubble-sub-button-6 {
display: none; /* Default to hiding the button */
}
This would be done if [[entity_6]].state == undefined (or any other way that works)
Something along these lines
styles: >
.bubble-sub-button-6 {
[[[ if (states['[[entity_6]]'].state == 'undefined') return "display: none;"; ]]]
}
Thank you very much. Your suggestion about just creating a new sensor is an excellent one, and that’s what I’ll do since the string manipulation is so much easier. I never think to fix it at the source. Instead I’m standing on my head trying to make it look nice on the display.
I appreciate the time and help!