yeah, thats what I did at first, but it was never right… so I ended up calculating the total string length, and setting those variables based in the length.
ofc, the difficulty also lies in the fact that the available space is different with different media screen sizes and orientations…
but I managed 
Hi,
Weird question that I have searched and searched for the answer for.
Let’s assume I have a variable use_state.
variables:
use_state: false
icon_color: blue
I want to conditionally set the property color in styles (or card_mod equivalent). (pseudo code)
styles:
icon:
if use_state == false
- color: {{ icon_color }}
endif
The point is, I need the whole -color prop to be conditional, because button card by default will apply the active or inactive color. if it fails the use_state conditional, I don’t touch the -color prop. if I make the conditional to be the color prop:
- color: if use_state etc...
then it zaps the color prop completely and I lose all the normal button-card color styling.
I’ve tried {% if … %} and [[[ if… ]]] - all to no avail.
FWIW - this is in a popup script. and so I can also pass in variables to the script.
Any ideas? I hope I explained this sufficiently!
Hello, I tried following the example in the 1st post but I assume some things are a bit outdated.
Can someone help me figure out what the problem is with the following?
I use a template (part of the example):
blind-option:
template: option-button
tap_action:
action: perform-action
perform_action: cover.set_cover_position
target:
entity: '[[[ return variables.entity ]]]'
data:
position: '[[[ return variables.set_value ]]]'
state:
- operator: default
styles:
card:
- background-color: '[[[ return variables.option_button_off_color ]]]'
- color: '[[[ return variables.option_text_off_color ]]]'
- operator: template
value: >-
[[[ return (entity.attributes.brightness||0) >= variables.range_start
&& (entity.attributes.brightness||0) <= variables.range_stop ]]]
styles:
card:
- background-color: '[[[ return variables.option_button_on_color ]]]'
- color: '[[[ return variables.option_text_on_color ]]]'
in my dashboard.yaml file I use the following code:
- type: 'custom:button-card'
entity: cover.scherm
template: presets
name: Blinds
variables:
entity: cover.scherm
option_template: blind-option
option1_name: ANG
option1_set_value: 12
option1_range_start: 2
option1_range_stop: 35
option2_name: OPN
option2_set_value: 50
option2_range_start: 36
option2_range_stop: 99
option3_name: CLN
option3_set_value: 100
option3_range_start: 100
option3_range_stop: 100
option4_name: CLS
option4_set_value: 0
option4_range_start: 9999
option4_range_stop: 9999
When I press one of the 4 buttons I get the following error:
Failed to perform the action cover/set_cover_position. must contain at least one of entity_id, device_id, area_id, floor_id, label_id.
any suggestions?
Kind regards,
Remco
for those who need it. Here is my full custom template file for this button section:
---
standard:
color_type: card
size: 80%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 0.5
name:
- font-size: 0.65em
- white-space: normal
state:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
wide:
template: standard
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
- padding: 0.3em
option-button:
template: standard
show_icon: false
aspect_ratio: 1/1
styles:
card:
- border-radius: 20%
blind-option:
template: option-button
tap_action:
action: perform-action
perform_action: cover.set_cover_position
target:
entity: '[[[ return variables.entity ]]]'
data:
position: '[[[ return variables.set_value ]]]'
state:
- operator: default
styles:
card:
- background-color: '[[[ return variables.option_button_off_color ]]]'
- color: '[[[ return variables.option_text_off_color ]]]'
- operator: template
value: >-
[[[ return (entity.attributes.brightness||0) >= variables.range_start
&& (entity.attributes.brightness||0) <= variables.range_stop ]]]
styles:
card:
- background-color: '[[[ return variables.option_button_on_color ]]]'
- color: '[[[ return variables.option_text_on_color ]]]'
presets:
template: standard
color_type: icon
tap_action:
action: none
styles:
card:
- background-color: 'rgba(0,0,0,0.3)'
icon:
- color: white
grid:
- grid-template-areas: '"i opt1 opt2 opt3 opt4" "n opt1 opt2 opt3 opt4"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
custom_fields:
opt1:
- margin: 0.1em
- overflow: visible
opt2:
- margin: 0.1em
- overflow: visible
opt3:
- margin: 0.1em
- overflow: visible
opt4:
- margin: 0.1em
- overflow: visible
variables:
option_template: dimmer-option
option_button_on_color: var(--paper-item-icon-active-color)
option_text_on_color: white
option_button_off_color: var(--paper-card-background-color)
option_text_off_color: white
option1_name: Low
option1_set_value: 51
option1_range_start: 1
option1_range_stop: 77
option2_name: Med
option2_set_value: 102
option2_range_start: 78
option2_range_stop: 170
option3_name: High
option3_set_value: 255
option3_range_start: 171
option3_range_stop: 255
option4_name: 'Off'
option4_set_value: 0
option4_range_start: 0
option4_range_stop: 0
custom_fields:
opt1:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option1_name ]]]'
variables:
set_value: '[[[ return variables.option1_set_value ]]]'
range_start: '[[[ return variables.option1_range_start ]]]'
range_stop: '[[[ return variables.option1_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt2:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option2_name ]]]'
variables:
set_value: '[[[ return variables.option2_set_value ]]]'
range_start: '[[[ return variables.option2_range_start ]]]'
range_stop: '[[[ return variables.option2_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt3:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option3_name ]]]'
variables:
set_value: '[[[ return variables.option3_set_value ]]]'
range_start: '[[[ return variables.option3_range_start ]]]'
range_stop: '[[[ return variables.option3_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt4:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option4_name ]]]'
variables:
set_value: '[[[ return variables.option4_set_value ]]]'
range_start: '[[[ return variables.option4_range_start ]]]'
range_stop: '[[[ return variables.option4_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
I am trying to create a card that adjusts to the currently logged-in user in HA, and my intention is to capture their image from the user profile. I adjusted the code already shared here by user @sebbaT Fun with custom:button-card - #861 by sebbaT because the entity names have accents and contain two personal names per user, in my case for example, “João Silva.”
type: custom:button-card
entity: |-
[[[
return "person." + user.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/ /g, "_");
]]]
show_entity_picture: true
The question I want to ask is whether there is a cleaner alternative to achieve this by capturing data from the currently logged-in user entity.
Can anyone help… I have this custom field pulling in Temp & Humidity and i just want an icon beside both. No need to change color or anything.
custom_fields:
temp: |
[[[ return states['sensor.main_floor_thermometer_temperature_2'].state +
'°C' ]]]
hum: |
[[[ return states['sensor.main_floor_thermometer_humidity_2'].state + '%'
]]]
there is a nice example how to do that in the cards documentation, did you check that?
I looked at it… must have been late. i see it now. Thank you…
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
Style="width 22px; height: 22px; color: yellow;">
</ha-icon><span>${states['sensor.main_floor_thermometer_temperature_2'].state}°C`]]]
nice yu9 it it working, though Style should really be style…
also the state can use the built-in helpers function lokalize, so you int need to add the unit anymore
look it up, its a real powerful option of button-card
helpers.localize(entity)
if you use the entity, or, eg
return helpers.localize(states[afstand],undefined,0);
if you want to set the rounding.
not you dont need to add .state anymore when using the helpers, it just requires the ‘state’ entity_id
so in your case
${states['sensor.main_floor_thermometer_temperature_2'].state}°C
would become
${helpers.localize(states['sensor.main_floor_thermometer_temperature_2'])
I’ve gotten rid of all units on all cards like that, just let the system take care of that.
the Processor button with all the custom_fields uses:
custom_fields:
temp: >
[[[ return `<ha-icon icon=mdi:thermometer
<span style='width:15px; color: var(--state-color);'> </ha-icon>
${helpers.localize(entity)}</span>`; ]]]
cpu: >
[[[ return `<ha-icon icon=mdi:server style='width:12px;'> </ha-icon>
Cpu: <span style='color: var(--cpu-color);'>
${helpers.localize(states['sensor.processor_use'])}</span>`; ]]]
ram: >
[[[ return `<ha-icon icon=mdi:memory style='width:12px;'></ha-icon>
Ram: <span style='color:var(--ram-color);'>
${helpers.localize(states['sensor.memory_use_percent'])}</span>`; ]]]
disk: >
[[[ return `<ha-icon icon=mdi:harddisk style='width:12px;'></ha-icon>
Disk: <span style='color:var(--disk-color);'>
${helpers.localize(states['sensor.disk_use_percent_home'])}</span>`; ]]]
in my setup
Just find out what’s the original value of the property (with code inspector), and then assign that value if your condition isn’t met. You can also try values like ‘unset’, ‘initial’, ‘inherit’.
- color: "[[[ return variables.use_state ? variables.icon_color : 'unset'; ]]]"
Can anyone guide me on setting colors for light & dark mode? I’m missing a step or 2
One set of lights:
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: markdown
content: |
### Master Bedroom
card_mod:
style: |
ha-card {
height: 100%;
width: 250%
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.security_booth_lights_l1
icon: mdi:lightbulb-group
show_name: false
show_icon: true
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: switch.security_booth_lights_l2
icon: mdi:television-classic
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
entity: switch.security_booth_lights_l3
icon: mdi:air-conditioner
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
view_layout:
position: sidebar
card_mod:
style: |
ha-card {
background: transparent !important;
margin-top: 0px;
#margin-left: 15px;
#max-width: 450px;
}
EDIT:
Found a solution here
UPDATE:
It works but isn’t consistent for button card. Modifying the Metro theme but the background-color reference I created for off is (finally) behaving itself, on isn’t registering consistently at all. Using element inspector sometimes the color doesn’t change to the reference selected for on without reloading the page. If I color the card directly in yaml, the on color stays loaded in off mode for light or dark.
Relevant part of theme yaml
light:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_day.svg')"
switch-button-off-color: "rgba(255,255,255,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
dark:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_night.svg')"
switch-button-off-color: "rgba(0,0,0,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
I got an interesting question that maybe someone is able to answer. Is there a way to template a custom_field (with or without card mod) so it shows two different values (of two sensors) in an alternating way?
Meaning it looks like it falshes every second or so at at each flash it shows the other value.
I am trying to make a climate card that when the AC is running shows the current temperature and the set temperature flashes in place until it’s done cooling/heating.
I have been unable to use template sensors or animations (in card mod as they don’t support templated content).
Any ideas?
@mynolix1986, you might find this interesting. I didn’t do alternating values, but I did arrange multiple values around the button to show the states of my HVAC.
hi at all!
i’m using custom button-card in an horizontal stack??
how to reduce the gap between cards? thanks a lot
thanks a lot!
please, i don’t understand how to add my last custom field to my button card at right bottom.
I think that the problem is the grid…
As in the image, i need to move the "circular input button’ at the right bottom.
Could you help me?
Thanks
this is my code
color_type: icon
lock:
enabled: true
unlock: double_tap
duration: 2
entity: sensor.alarm_battery
icon: mdi:car-battery
name: BATTERY
tap_action:
action: none
hold_action: none
show_label: true
show_state: false
label: |
[[[
if (states['input_boolean.alarm_battery'].state == 'on')
return '<b>ON</b>';
return 'OFF';
]]]
custom_fields:
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.alarm_battery
tap_action:
action: toggle
icon: mdi:power
card_mod:
style: |
ha-card {
--chip-background: grey;
padding: 1px !important;
border-radius: 100px !important;
color:white;
}
styles:
custom_fields:
btn2:
- justify-self: start
- align-self: start
state:
- label: ALARM
styles:
grid:
- grid-template-areas: "\"n\" \"l\" \"btn2\" \"btn2\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content min-content min-content
- align-items: start
- will-change: transform
card:
- padding: 20px 8px 22px 12px
- height: 190px
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -40px -40px
- background: orange
- border-radius: 500px
- opacity: "0.5"
name:
- justify-self: start
- position: absolute
- font-size: 13px
- font-weight: 500
label:
- justify-self: start
- align-self: start
- margin-top: 10px
- font-size: 11px
- font-weight: 500
icon:
- position: relative
- width: 80px
- color: "#ffffff"
- opacity: "0.7"
value: "off"
type: custom:button-card
card_mod:
style: |
#lock {
width: 18px !important;
}
just set this button to <display: absolut> and then add <top: 12px> and <left: -12px> play arround with the px to set the button where you want
Hi, I’m trying to pass variables to button_card_templates: but something is wrong
button_card_templates:
orange_button:
styles:
name:
- font-size: 11px
- word-break: break-word
- white-space: unset
variables:
var_confronto: ''
var_stato: ''
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if is_state('[[[ return variables.var_confronto ]]]', 'off') %}
color: orange !important;
{% else %}
color: grey !important;
{%- endif %}
}
and in dashboard
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: script.riscaldamento_basso
hold_action:
action: none
icon: valutta:Riscaldamento GIU
theme: slate
template: orange_button
name: Riscaldamento<br/>basso
variables:
var_confronto: input_boolean.riscaldamento
var_stato: 'off'
“if is_state” have something wrong doesn’t change
please help me!
youre mixing the JS (= javascript, native templating to the button-card) with Jinja (native to card-mod), and that wont work
why not use all of the config in the button-card itself, and stop using card-mod.
setting an icon-color in button-card is very simple
also you dont need
in the template. this will be merged with the config, and since you set the variables there, all will be taken from those values
Thank you!!!
type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: call-service
service: script.riscaldamento_basso
entity: input_boolean.riscaldamento
hold_action:
action: none
icon: valutta:Riscaldamento GIU
theme: slate
template: orange_button
name: Riscaldamento<br/>basso
state:
- value: "off"
color: orange
- value: "on"
color: grey
So better!!!
I created simple button card to notify me about washing machine status. Tricky part is that it overlaps circle icon on top of bacground image (screenshot of washing machine icon) to create washing animation:
type: conditional
conditions:
- entity: input_text.washing_status
state: Washing Started
card:
entity: input_text.washing_status
icon: mdi:circle-slice-4
name: Washing Cycle in Progress
size: 53px
styles:
icon:
- color: var(--cyan2)
- animation: 2s infinite ease-in-out rotating
card:
- background-image: url('/local/washing-machine.png')
- background-size: 53px
- background-position: center 5px
- background-repeat: no-repeat
tap_action:
action: none
type: custom:button-card
It works perfectly as stand alone card. Vut for my target dashboard I’d like to put it on top of picture element card and for this I need to have trasparrent bvackground of the card. But if I apply some card mod CSS style, it also remove washing machine picture, leaving only rotating icon.
card_mod:
style: |
ha-card {
background: none !important;
}
Is the any way to remove card solid color bacground leaving the background picture?