Let me begin by saying I’m not an export, after some testing it looks like “styles:” is independent of “style: |”. If I try to combine everything into one of the style(s) it doesn’t work as expected, if I separate the two it works as it should. Example of when it works in one card.
type: 'custom:button-card'
entity: light.garage
icon: 'mdi:alphabetical-variant'
show_state: true
state:
- color: red
value: 'off'
style: |
:active
ha-card {
background:#53a7ea;
border-radius: 50%;
height: 300px;
width: 300px;
}
styles:
card:
- border-radius: 50%
- height: 300px
- width: 300px
To your point I believe styles alone doesn’t work, you’ll have to add both to your template
petro
January 31, 2020, 1:25pm
2979
@RomRider Does the 1:1 aspect ratio work when a 4 side by side buttons are all placed in individual decluttering cards?
EDIT: Ooooo, cake day
1 Like
Bollux
January 31, 2020, 1:42pm
2980
Hi @petro ,
I tried to create a button with the brightness label_template, used an example from this topic, everything works except the label doesn’t show. Can you help this noob out?
- type: 'custom:button-card'
name: Overloop
icon: 'mdi:ceiling-light'
entity: light.0xccccccfffed80012_light
label_template: >
var bri =
Math.round(states['light.0xccccccfffed80012_light'].attributes.brightness
/ 2.55); return (bri ? bri : '0') + '%';
color: auto
size: 50%
show_state: false
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 105px
- height: 105px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-left: 10px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- value: 'on'
styles:
name:
- color: gray
state:
- color: gray
label:
- color: white
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: gray
name:
- color: gray
state:
- color: gray
label:
- color: white
- value: unavailable
style:
- opacity: 0.2
- color: black
- '--paper-item-icon-color': black
petro
January 31, 2020, 1:53pm
2981
Not the correct field, always check the docs. That field has been deprecated.
Always follow templating convention. It’s well documented in the card documents. they require [[[ and ]]].
Don’t add carriage returns willy nilly to make it look nice. Follow the line terminations properly.
You don’t need to call out the light specifically, it’s placed into the entity variable.
label: >
[[[
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
]]]
Bollux
January 31, 2020, 2:07pm
2982
Thanks Petro! As a noob, i just copied a example from this topic. Works now!
Hi,
Thanks a lot for this awesome card ! I’m trying to clean up my config and, after reading the documentation, I’m not sure if what I’m trying to achieve can be done.
-> Can we use JS to define variable values ?
For example:
variables:
var_name: '[[[ return entity.state ]]]'
This is just a silly example. Obviously this one do not work, but I’d be curious too check if there’s another way to achieve something close or similar.
Thanks for any help you can provide
petro
January 31, 2020, 3:36pm
2984
try it again with a correct template. It might work:
var_name: '[[[ return entity.state; ]]]'
Thanks for the quick reply and … silly me I guess. However that did not do the trick sadly. The variable is returned as a string:
I have changed my custom button card to make use of the circle sensor card for the brightness. Now i want to have thie icon of the bulb and the circle on the same heigt next to eachother (circle sensor little smaller). Any suggestion on how to do this?
#*****************************************************************
#* AUTHOR Lubbert Kramer terug
#* Github https://github.com/lubbertkramer/home_assistant_config
#*****************************************************************
default:
- size: 40%
- lock: false
- color: auto
- spin: false
- show_state: true
- show_label: false
- show_last_changed: false
- tap_action: toggle
- hold_action: more-info
- aspect_ratio: 1/1
card:
type: custom:button-card
name: '[[name]]'
deep_press: false
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action:
action: '[[tap_action]]'
haptic: light
hold_action:
action: '[[hold_action]]'
haptic: heavy
styles:
card:
- border-radius: var(--theme-border-radius)
- --ha-card-background: var(--theme-button-card-color-state-on)
grid:
- grid-template-areas: '"i i" "n s"'
- grid-template-columns: 1fr lfr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
name:
- font-family: Helvetica
- font-size: 15px
- font-weight: bold
- text-transform: capitalize
- justify-self: start
- padding-left: 10px
state:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- text-transform: capitalize
- padding: 0px 10px
- justify-self: start
- padding-left: 10px
label:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- padding: 0px 10px
- justify-self: start
- padding-right: 10px
custom_fields:
brightness:
#- fill: '#FFFFFF10'
#- gradient: true
- max: 100
- min: 0
#- stroke_color: '#03a9f4'
#- stroke_width: 15
- height: 2.15vw
- opacity: 0.7
- width: 2.15vw
- overflow: visible
- position: absolute
- right: 15px
- top: 20px
# - right: 7%
# - top: 7%
custom_fields:
brightness:
card:
type: custom:circle-sensor-card
entity: '[[brightness]]'
max: 100
min: 0
#fill: '#007AF1'
stroke_width: 15
stroke_color: var(--theme-button-icon-color-state-on)
gradient: true
font_style:
color: var(--theme-button-name-color-state-on)
label: >
[[[
if (typeof(entity) === 'undefined') return;
if ('brightness' in entity.attributes)
{
if (entity.attributes
&& (entity.attributes.brightness <= 255)) {
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}
]]]
state:
- value: "[[[ return '' + entity.state + ''; ]]]"
spin: '[[spin]]'
styles:
card:
- --ha-card-background: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"
icon:
- color: "[[[ return 'var(--theme-button-icon-color-state-' + entity.state + ')'; ]]]"
- animation: "[[[ return 'var(--theme-button-icon-animation-state-' + entity.state + ')'; ]]]"
lock:
- color: "[[[ return 'var(--theme-button-lock-color-state-' + entity.state + ')'; ]]]"
label:
- color: "[[[ return 'var(--theme-button-label-color-state-' + entity.state + ')'; ]]]"
name:
- color: "[[[ return 'var(--theme-button-name-color-state-' + entity.state + ')'; ]]]"
state:
- color: "[[[ return 'var(--theme-button-state-color-state-' + entity.state + ')'; ]]]"
custom_fields:
brightness:
- fill: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"
4 Likes
fezo76
February 5, 2020, 1:56pm
2987
Hello!
klogg
February 5, 2020, 5:43pm
2988
Is it possible to use if... else in a custom_field?
I’ve been trying this for far too long and this works…think
card:
type: custom:button-card
color_type: icon
entity: '[[entity]]'
aspect_ratio: '[[aspect_ratio]]'
show_state: false
show_name: false
show_label: true
show_icon: true
label: '[[label]]'
lock:
enabled: '[[lock_enabled]]'
styles:
grid:
- grid-template-areas: '"i l check_box"'
- grid-template-columns: 20% 60% auto
- grid-template-rows: 1fr
lock:
- color: '[[lock_color]]'
card:
- font-size: '[[card_font_size]]'
- border-radius: '[[card_border_radius]]'
custom_fields:
check_box: >
[[[
return '<ha-icon icon="mdi:crop-square"></ha-icon>'
]]]
state:
- value: 'on'
styles:
card:
- background-color: '[[card_background_on_color]]'
- value: 'off'
styles:
card:
- color: '[[card_off_color]]'
- box-shadow: '[[box_shadow_off]] [[box_shadow_off_color]]'
icon:
- color: '[[icon_off_color]]'
But this doesn’t (it fails completely to even show the button)…
styles:
grid:
- grid-template-areas: '"i l check_box"'
- grid-template-columns: 20% 60% auto
- grid-template-rows: 1fr
lock:
- color: '[[lock_color]]'
card:
- font-size: '[[card_font_size]]'
- border-radius: '[[card_border_radius]]'
custom_fields:
check_box: >
[[[
if entity.state = 'on' return '<ha-icon icon="mdi:checkbox-marked"></ha-icon>';
else return '<ha-icon icon="mdi:crop-square"></ha-icon>';
]]]
Can you style custom_fields using state because i couldn’t get that to work either.
Thanks.
jarrah
February 7, 2020, 7:32pm
2989
I don’t know if this is the answer, but I’ve seen others suggest using backticks around the <ha-icon> fields:
[[[
if entity.state = 'on' return `<ha-icon icon="mdi:checkbox-marked"></ha-icon>`;
else return `<ha-icon icon="mdi:crop-square"></ha-icon>`;
]]]
If that doesn’t work, another thing to try is removing the semi-colons at the end of each line as this example doesn’t have them:
[[[
let speed = states['device_tracker.life360'].attributes.speed;
if (states['device_tracker.life360'].attributes.moving) return `Status: moving - ${speed} mph`
else if (states['device_tracker.life360'].attributes.driving) return `Status: driving - ${speed} mph`
else return "Status: Standstill"
]]]
klogg
February 8, 2020, 12:04am
2990
Thanks but neither worked.
petro
February 9, 2020, 10:26pm
2992
it’s JS, gotta conform to that language:
if (entity.state == 'on')
{
return '<ha-icon icon="mdi:checkbox-marked"></ha-icon>';
}
else
{
return '<ha-icon icon="mdi:crop-square"></ha-icon>';
}
or… for short
if (entity.state == 'on')
return '<ha-icon icon="mdi:checkbox-marked"></ha-icon>';
else
return '<ha-icon icon="mdi:crop-square"></ha-icon>';
or… shorter
return (entity.state == 'on')
? '<ha-icon icon="mdi:checkbox-marked"></ha-icon>'
: '<ha-icon icon="mdi:crop-square"></ha-icon>';
EDIT: I would assume your problem the whole time was only using 1 equals in entity.state = 'on'
3 Likes
klogg
February 9, 2020, 11:33pm
2993
Indeed it was…
1 Like
jompa68
February 10, 2020, 9:48am
2994
How do i setup this template for button_motion and button_body? Where do i place the code?
jompa68
February 10, 2020, 10:09am
2996
Thanks for the heads up @Mariusthvdb
jompa68
February 11, 2020, 10:31am
2997
SOLVED
- type: horizontal-stack
cards:
- type: "custom:button-card"
#icon: mdi:link-lock
#size: 2%
styles:
card:
- height: 75px
- border-radius: 10%
- padding: 10%
show_state: true
show_name: false
show_label: true
label: Batteri nivå - IDLock 150
#color_type: card
#color: '#f5f514'
#color_off: '#434954'
entity: sensor.idlock_battery
jompa68
February 11, 2020, 7:41pm
2998
I am trying to setup like this but i don’t get the “Basement” header to line up like this picture. How can i solve that?
and every time i go between pages the glow effect disappear and does not appear until i refresh page(F5)
