Use one of the following (both working):
- background: |
[[[ return 'radial-gradient(' + variables.severity_color +', skyblue)'; ]]]
- background: |
[[[ return `radial-gradient(${variables.severity_color}, skyblue)`; ]]]
Try
background: >-
[[[ return 'radial-gradient(' + variables.severity_color + ',skyblue)' ]]]
Oh, missed the post above)))
yes, thanks Pedolsky and Ildar!
exactly what I was looking for but couldnt figure out .,… one of those ‘staring you right in the face’ moments…
much better 
proof:
its a bit odd ow, because it is a conditional and I’ve flipped the condition for it to show now…
Hi all - hoping someone can help me with this problem I keep running circles around but not getting anywhere. I have a button card used to show info about the people in the house like name/state/location/etc.
I’m getting address information through the openstreetmap integration using google maps and sometimes locations have a “place_name” like John Smith Elementary, Jane Doe Hospital, etc while many addresses don’t have that attribute and it just doesn’t exist.
If the “place_name” attribute exists I’d like to just show that, but if not I’d like to show the street address and street name. It works fine if I just have it show address and street name but I haven’t been able to figure out how to do the if/else statement to check if the place_name attribute has a value or not. Here’s the latest version I’ve tried:
address: |
[[[
if (states['sensor.c_openstreetmap'].attributes['place_name']) {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${states['sensor.c_openstreetmap'].attributes['place_name']}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${states['sensor.c_openstreetmap'].attributes['street_number']} ${states['sensor.c_openstreetmap'].attributes['street']}</span>`;
]]]
It doesn’t show anything and actually makes it so the entire button card doesn’t show up so any help on where I’m going wrong would be appreciated.
most of the time, when it doesnt show at all, there are errors in the Inspector. do you see any?
you 'd probably be better of separating the value from the style here.
first create a template in the custom field itself, and if you get that correctly, apply the style on that field.
its easy enough to test for an elements existence in JS.
Because the closing bracket after the span tag is missing.
I would implement some fallback elements:
address: |
[[[
let name = states['sensor.c_openstreetmap']?.attributes['place_name'],
address = states['sensor.c_openstreetmap']?.attributes['street'] + ' ' +
states['sensor.c_openstreetmap']?.attributes['street_number'],
result = name !== undefined
? name
: address !== 'undefined undefined' ? address
: '…';
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span>${result}</span>`;
]]]
Thank you very much! That works, and now I’ll spend some time looking into commands in there I’m not familiar with so I can understand more about why. I appreciate your help.
I’ve used variables to shorten the final code.
let is more modern way to declare local variables. You can enumerate them comma-separated, skipping all other lets
let a = … , # comma
b = … ,
c = … ; # semicolon = end of enumeration
instead of
let a = … ; # semicolon
let b = … ;
let c = … ;
The questionmark in states['sensor.c_openstreetmap']?.attributes … ensures that the card doesn’t break if the entity is not available, it then is just undefined.
The variable result uses a ternary operator ( so to say a shortened alternative to if statements) and declares the following:
If sensor.c_openstreetmap is available and has the attribute place_name , then compute the name of the place. If not, check whether the variable address is true and available. If not, compute ‘…’ (or anything else you like to see on your card).
I hope this makes it a little bit more understandable; I’m not really good in „teaching“. Feel free to ask. 
If you’re not good at teaching then you certainly are at explaining. That was really helpful to understand how those different pieces are coming together there. Thank you, I try to understand what I’m doing with home assistant when I’m getting code or cards from other online sources but sometimes its just over my head then when something breaks its tough to figure out so I appreciate you taking the time to summarize that.
Having issues with templating when using a Logitech Harmony remote:
state:
- operator: template
value: >
[[[ return states['remote.living_room'].attributes['current_activity'] ===
'Watch a Blu-Ray'; ]]]
color: var(--button-card-light-color)
For some reason this code always sets the button to “on” except when “current_activity” is set to “PowerOff”
The Jinja2 template code
{{ states["remote.living_room"].attributes["current_activity"] == "Watch a Blu-Ray" }}
returns False as you would expect when any other activity is selected and True when the Blu-Ray is selected, so I’m at a bit of a loss to know why the JS template isn’t working.
OK, it’s not quite what I’d thought. This isn’t overriding the “on/off” status of the the button entity, so it’s changing the colour correctly, but not unless the entity status is also “True”, I’m obviously not doing what I want quite right. Here’s the code I have.
entity: remote.living_room
type: custom:button-card
name: BluRay
icon: mdi:movie-open
state:
- operator: template
value: >
[[[ return states['remote.living_room'].attributes['current_activity'] ===
'Watch a Blu-Ray'; ]]]
color: var(--button-card-light-color)
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: select.select_option
target:
entity_id: select.living_room_activities
data:
option: Watch a Blu-Ray
OK, so the following slightly clumsily has the effect I’m looking for:
entity: remote.living_room.current_activity
type: custom:button-card
name: BluRay
icon: mdi:movie-open
state:
- operator: template
value: >
[[[ return states['remote.living_room'].attributes['current_activity'] ==
'Watch a Blu-ray' ]]]
color: var(--paper-item-icon-active-color)
- operator: template
value: >
[[[ return states['remote.living_room'].attributes['current_activity'] !=
'Watch a Blu-ray' ]]]
color: var(--primary-text-color)
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: select.select_option
target:
entity_id: select.living_room_activities
data:
option: Watch a Blu-ray
What is that?
Why don’t you move the color declaration into styles section?
A mistake. Should just be remote.living_room.
Not sure it would make much difference moving it into styles.
At least it would save double declaration.
Unless I’m missing something, I don’t think styles would help in this case because it’s not the state of the entity but of an attribute of the entity that determines the colur of the icon. So I think you have to use state.
State could really do with a “default” option, I think.
The correct approach is, I think, to create a binary sensor helper using the Jinja2 template, i.e.
{{ states["remote.living_room"].attributes["current_activity"] == "Watch a Blu-Ray" }}
and use the binary sensor as the entity, which means you don’t require the state code at all.
It doesn’t matter which entity or which attribute determines the icon color. You can define what you want. Or am I on the wrong track?
Hi Community, I need your help. Here is a grid with 6 button cards. Now I would like to have the green buttons with the help of condition-cards only visible when the red button is pressed. when the red button is pressed again, they should disappear again. Kind of like a popup. It is possible if I assign the red button to a light entity, for example. However, I do not want to control the light through this. What do I have to do to make this work? Create a kind of dummy helper? I also thought about creating a dummy group, but that doesn’t seem to be the right way. I am grateful for your help
square: false
type: grid
cards:
- type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: black
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: red
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: black
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
columns: 3
This might be a very dump question but I’m struggling to set the value of a select.select_option from the entity’s list of available options.
The entity:
{{ state_attr(‘select.neff_ID_bsh_common_option_startinrelative’, ‘options’) }}
or
states[variables.var_startinrelative_slct_entity].attributes.options (in custom:button-card)
Has the following options:
[‘0:00’, ‘0:30’, ‘1:00’, ‘1:30’, ‘2:00’, ‘2:30’, ‘3:00’, ‘3:30’, ‘4:00’, ‘4:30’, ‘5:00’, ‘5:30’, ‘6:00’, ‘6:30’, ‘7:00’, ‘7:30’, ‘8:00’, ‘8:30’, ‘9:00’, ‘9:30’, ‘10:00’, ‘10:30’, ‘11:00’, ‘11:30’, ‘12:00’, ‘12:30’, ‘13:00’, ‘13:30’, ‘14:00’, ‘14:30’, ‘15:00’, ‘15:30’, ‘16:00’, ‘16:30’, ‘17:00’, ‘17:30’, ‘18:00’, ‘18:30’, ‘19:00’, ‘19:30’, ‘20:00’, ‘20:30’, ‘21:00’, ‘21:30’, ‘22:00’, ‘22:30’, ‘23:00’, ‘23:30’, ‘24:00’]
In the template I would like the “action: → service_data: → option:” to be the selected element of the dropdown list of available options.
tap_action:
action: "call-service"
service: "select.select_option"
service_data:
entity_id: "[[[ return variables.var_startinrelative_slct_entity ]]]"
option: "the selected item from 'states[variables.var_startinrelative_slct_entity].attributes.options'"
target:
entity_id: "[[[ return variables.var_startinrelative_slct_entity ]]]"
Is there a way to do it?
Many thanks!