Yeah, that’s right. That’s the only way I could figure out to get it to only ‘appear’ at certain times. 88% is at the top right of the card, 200% pushes it off the card.
If there’s a better way I’m welcome to it, but either way the conditional isn’t working as intended.
Yes, running 4.1.1 according to HACS.
If you want to hide the custom field, play with display:
recycling_bin:
- background-color: 'transparent'
- position: absolute
- top: -5%
- left: 10%
- display: |
[[[
if (states['calendar.recycling_bin'].state == 'off')
return 'none';
return 'block';
]]]
Or in short:
- display: |
[[[ return (states['calendar.recycling_bin'].state == 'off') ? 'none' : 'block'; ]]]
Oh man… How did I now know display existed.
It worked! For some reason, even though the conditional is the same format it recognises it…
Legend!
I am trying to pass a variable to an if condition in a card_mod.
Is there any way to make this work?
The code below is part of button-card.
card:
type: custom:mushroom-template-card
entity: '[[[ return variables.internet_state ]]]'
style:
mushroom-shape-icon$: |-
{% if is_state('[[[ return variables.internet_state ]]]', 'on') %}
.shape { --shape-animation: ping 1.5s infinite; }
@keyframes ping {
0% { box-shadow: 0 0 0px 0px rgba(var(--rgb-red), 0.9); }
50% { box-shadow: 0 0 5px 15px transparent; }
100% { box-shadow: 0 0 0px 0px transparent; }
} {% else %} {% endif %}
.: |-
ha-card {
padding: 0px !important;
padding-bottom: 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
Are you still thinking about this? I use this feature to display things like debug information and an HTML one would be much more readable 
Thank you.
can you send entire code pls? very pretty buttons =)
Hello all,
I have a gate with a reed sensor to confirm is open and another one to confirm its closed.
In the custom:button-card i want the icon to change according this above sensor status, like the code bello, but its not working why?
Can anyone help me please?
type: custom:button-card
icon: |
[[[
if (states['switch.tasmota2'].state = 'ON') return 'mdi:garage-variant-lock';
if (states['switch.tasmota3'].state = 'ON') return 'mdi:garage-open-variant';
return 'mdi:garage-alert-variant';
]]]
tap_action:
action: call-service
confirmation:
text: Confirma accionar portão?
service: switch.turn_on
service_data:
entity_id: switch.portao_garagem
entity: switch.tasmota2
name: Portão Garagem
show_name: true
show_state: false
I also want to use the color change according each type of icon and effects:
color: rgb(205, 50, 50)
styles:
icon:
- animation: blink 2s ease infinite
How to put this all together?
Thanks
My guess would be because you have “ON” with capitals". Try with “on” and see (these things are very picky about that!)
Also, i think your if’s are a bit “odd”… i’d put “else” before final line, otherwise last command will always be executed:
if (states['switch.tasmota2'].state = 'on')
return 'mdi:garage-variant-lock';
if (states['switch.tasmota3'].state = 'on')
return 'mdi:garage-open-variant';
else
return 'mdi:garage-alert-variant';
Try
type: custom:button-card
entity: switch.tasmota2
triggers_update:
- switch.tasmota2
- switch.tasmota3
icon: |
[[[
var t2 = states['switch.tasmota2'].state;
var t3 = states['switch.tasmota3'].state;
if (t2 == 'on' && t3 == 'off') return 'mdi:garage-open-variant';
if (t2 == 'off' && t3 == 'on') return 'mdi:garage-variant-lock';
return 'mdi:garage-alert-variant';
]]]
However, mdi:garage-alert-variant will be shown whether both t2 and t3 are on or off. Is this expected?
Hello @pedolsky!
First of all, thanks for the support!
No its not correct, i have done it wrong then.
What is supose to do is:
switch.tasmota2 is ON then mdi:garage-variant-lock in green color
switch.tasmota3 is ON then mdi:garage-open-variant in red color
switch.tasmota2 OFF and switch.tasmota3 OFF then mdi:garage-alert-variant in red color and with blink animation as:
- animation: blink 2s ease infinite
When pressed the entity to turn on is the switch.portao_garagem
Is this possible?
Can you help me?
type: custom:button-card
entity: switch.portao_garagem
triggers_update:
- switch.portao_garagem
- switch.tasmota2
- switch.tasmota3
variables:
t2: switch.tasmota2
t3: switch.tasmota3
icon: |
[[[
var t2 = states[variables.t2].state;
var t3 = states[variables.t3].state;
if (t2 == 'on' && t3 == 'off') return 'mdi:garage-variant-lock';
if (t2 == 'off' && t3 == 'on') return 'mdi:garage-open-variant';
if (t2 == 'off' && t3 == 'off') return 'mdi:garage-alert-variant';
return 'mdi:help';
]]]
styles:
icon:
- color: |
[[[
var t2 = states[variables.t2].state;
var t3 = states[variables.t3].state;
if (t2 == 'on' && t3 == 'off') return 'green';
return 'red';
]]]
- animation: |
[[[
var t2 = states[variables.t2].state;
var t3 = states[variables.t3].state;
if (t2 == 'off' && t3 == 'off') return 'blink 2s ease infinite'
return 'none';
]]]
@pedolsky thank you.
I will test it later
How can i add this confirmation to the code:
tap_action:
action: call-service
confirmation:
text: Confirma accionar portão?
service: switch.turn_on
service_data:
entity_id: switch.portao_garagem
I don’t understand the question 
Just add the code block to your card.
I’m trying to create a configuration template for the 1st time and I’m struggling to come up with the variables code needed to replace the notification section. Any assistance would be appreciated.
button_card_templates:
gate:
color: green
color_type: icon
custom_fields:
notification: |
[[[ return states['sensor.steel_gate_battery'].state ]]]
variables:
var_name: "Steel Gate"
var_entity: "binary_sensor.steel_gate"
icon: mdi:gate
name: '[[[ return variables.var_name ]]]'
entity: '[[[ return variables.var_entity ]]]'
I want to have a variable for the section [[[ return states['sensor.steel_gate_battery'].state ]]] as this is different for every card too. The name and entity are working well.
button_card_templates:
gate:
triggers_update: all
variables:
var_entity: ''
var_name: ''
var_notification: ''
icon: mdi:gate
name: '[[[ return variables.var_name ]]]'
entity: '[[[ return variables.var_entity ]]]'
color: green
color_type: icon
custom_fields:
notification: |
[[[
return (states[variables.var_notification])
? states[variables.var_notification].state
: 'N/A'
]]]
type: custom:button-card
template: gate
variables:
var_entity: binary_sensor.steel_gate
var_name: Steel Gate
var_notification: sensor.steel_gate_battery
Thank you, I would have never have figured that out! It is working now but I’d also like to include some styling to replicate the current card.
This is the code I have for card styling. Could you possibly advise how I replicate your template code to leverage the same variable?
styles:
card:
- border-radius: 10%
- background-color: '--paper-card-background-color'
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.steel_gate_battery'].state >= 98)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 5%
- height: 25px
- width: 25px
- font-size: 12px
- line-height: 25px
- color: var(--text-color)
grid:
- position: relative
Disregard. I found some code on here that worked! Thanks @pedolsky, really appreciate your help.
styles:
card:
- border-radius: 4%
- background-color: '--paper-card-background-color'
custom_fields:
notification:
- background-color: >
[[[ return (states[variables.var_notification].state >= 98 ?
"green" : "red"); ]]]
- border-radius: 50%
my tap_action is not working in the below codes, can someone please help?
type: custom:button-card
entity: sensor.manchester_united
tap_action:
action: more-info
show_icon: false
show_name: false
state:
- value: Match in progress
styles:
grid:
- grid-template-areas: >-
"h_crest score a_crest" "h_crest score a_crest" "h_crest time
a_crest"
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
custom_fields:
h_crest:
- display: inline-grid
- place-self: center
- align-self: flex-start
score:
- display: inline-grid
- place-self: center
- align-self: center
- font-size: 300%
time:
- display: inline-grid
- place-self: center
- align-self: center
- font-size: 80%
- color: green
a_crest:
- display: inline-grid
- place-self: center
- align-self: flex-start
custom_fields:
h_crest: >
[[[ return `<img id="icon"
src="/local/icon/${entity.attributes.hometeam}.png" style="position:
relative;height: 100px; width:auto">` ]]]
score: |
[[[ return `<span>${entity.attributes.score}</span>` ]]]
time: |
[[[ return `<span>${entity.attributes.elapsed}'</span>` ]]]
a_crest: >
[[[ return `<img id="icon"
src="/local/icon/${entity.attributes.awayteam}.png" style=" position:
relative;height: 100px; width:auto">` ]]]
- value: Updating
styles:
grid:
- grid-template-areas: >-
"h_crest updating a_crest" "h_crest updating a_crest" "h_crest
updating a_crest"
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
custom_fields:
h_crest:
- display: inline-grid
- place-self: center
- align-self: flex-start
updating:
- display: inline-grid
- place-self: center
- align-self: center
a_crest:
- display: inline-grid
- place-self: center
- align-self: flex-start
custom_fields:
h_crest: >
[[[ return `<img id="icon"
src="/local/icon/${entity.attributes.hometeam}.png" style="position:
relative;height: 100px; width:auto">` ]]]
updating: |
[[[ return `<img id="icon"
src="/local/icon/hourglass.gif" style="position:
relative;height: 40px; width:auto">` ]]]
a_crest: >
[[[ return `<img id="icon"
src="/local/icon/${entity.attributes.awayteam}.png" style=" position:
relative;height: 100px; width:auto">` ]]]
- operator: default
styles:
grid:
- grid-template-areas: >-
"h_crest competition a_crest" "h_crest location a_crest" "h_crest
countdown a_crest"
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
custom_fields:
h_crest:
- display: inline-grid
- place-self: center
- align-self: flex-start
competition:
- display: inline-grid
- align-self: center
- font-size: 60%
countdown:
- display: inline-grid
- align-self: center
- font-size: 60%
location:
- display: inline-grid
- align-self: center
- font-size: 60%
a_crest:
- display: inline-grid
- place-self: center
- align-self: flex-start
custom_fields:
h_crest: >
[[[ return `<img id="icon"
src="/local/icon/${entity.attributes.hometeam}.png" style="position:
relative;height: 100px; width:auto">` ]]]
competition: |
[[[ return `<span>${entity.attributes.tournament}</span>` ]]]
countdown: |
[[[ return `<span>${entity.attributes.countdown}</span>` ]]]
location: |
[[[ return `<span>${entity.attributes.location}</span>`]]]
a_crest: >
[[[ return `<img id="icon"
src="/local/icon/${entity.attributes.awayteam}.png" style=" position:
relative;height: 100px; width:auto">` ]]]
I wonder why people are posting long codes instead of small minimized snippets…
Smaller → Simpler → Easier to help