well, this is (1 of the) the way(s) to do it, so nothing wrong with the code 
1 Like
triggers_update doesnât support templates and never will. Itâs a chicken and egg problem.
yeah, I seemed to remember something like that. I might be able to use the decluttering templates though, replacing the âidâ in the desired spotâŚ
but, if Id use the triggers_update on the individual button, lets say
triggers_update: group.marijn
would the group_expand: true in the button card template still take care of updating the button on all entity changes in that group? (asking since the group_expand: was designed after I asked you to update the card on group entities, where the group is used as main button entity. Since I now use the group as triggers_update entity, I am not sure it does the same thing ⌠)
Yes, group_expand: true applies also to groups defined in triggers_update 
3 Likes
cool, youâre a magician!
thanks for confirming
I might have posted it already but this is my Air Purifier card I made
4 Likes
Very nice. Can you also post the config ?
1 Like
Sure.
Graph:
animate: true
color_thresholds:
- color: '#DDDDDD'
value: 1
- color: '#BBBBBB'
value: 5
- color: '#9A9A9A'
value: 7
- color: '#707070'
value: 15
- color: '#505050'
value: 20
- color: '#303030'
value: 50
- color: '#000000'
value: 80
decimals: 0
entities:
- entity: sensor.home_aqi
name: Air Purifier Pro
extrema: true
hour24: true
hours_to_show: 12
icon: 'mdi:leaf'
line_color: '#606060'
line_width: 2
name: Air Purifier Pro
points: false
points_per_hour: 12
show:
fill: fade
icon_adaptive_color: true
tap_action:
action: more-info
entity: fan.xiaomi_miio_device
type: 'custom:mini-graph-card'
Status + buttons:
cards:
- cards:
- template: air_purifier_status_button_template
type: 'custom:decluttering-card'
variables:
- entity: sensor.air_purifier_filter_remaining
- action: none
- template: air_purifier_status_button_template
type: 'custom:decluttering-card'
variables:
- entity: sensor.air_purifier_motor_speed
- action: none
type: horizontal-stack
- cards:
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: power-standby
- condition: 'states[''fan.xiaomi_miio_device''].state === ''on'''
- svc_name: fan.toggle
- svc_data:
entity_id: fan.xiaomi_miio_device
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: weather-night
- condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Silent'''
- svc_name: fan.set_speed
- svc_data:
entity_id: fan.xiaomi_miio_device
speed: Silent
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: circle-slice-3
- condition: >-
(states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
&& states['fan.xiaomi_miio_device'].attributes.favorite_level ==
4)
- svc_name: script.air_purifier_set_favorite
- svc_data:
fav_level: 4
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: circle-slice-4
- condition: >-
(states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
&& states['fan.xiaomi_miio_device'].attributes.favorite_level ==
8)
- svc_name: script.air_purifier_set_favorite
- svc_data:
fav_level: 8
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: circle-slice-6
- condition: >-
(states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
&& states['fan.xiaomi_miio_device'].attributes.favorite_level ==
12)
- svc_name: script.air_purifier_set_favorite
- svc_data:
fav_level: 12
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: circle-slice-8
- condition: >-
(states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
&& states['fan.xiaomi_miio_device'].attributes.favorite_level ==
16)
- svc_name: script.air_purifier_set_favorite
- svc_data:
fav_level: 16
- template: air_purifier_control_button_template
type: 'custom:decluttering-card'
variables:
- icon: brightness-auto
- condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Auto'''
- svc_name: fan.set_speed
- svc_data:
entity_id: fan.xiaomi_miio_device
speed: Auto
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
And decluttering templates I used:
decluttering_templates:
air_purifier_control_button_template:
card:
color: 'rgba(255, 255, 255, 0)'
color_type: card
icon: 'mdi:[[icon]]'
state:
- operator: template
styles:
card:
- color: var(--primary-color)
value: |
[[[ return [[condition]] ]]]
- operator: default
styles:
card:
- color: 'rgba(150,150,150, 1.0)'
styles:
card:
- height: 50px
- color: 'rgba(150, 150, 150, 1.0)'
- box-shadow: none
tap_action:
action: call-service
service: '[[svc_name]]'
service_data: '[[svc_data]]'
type: 'custom:button-card'
air_purifier_status_button_template:
card:
color: 'rgba(255, 255, 255, 0)'
color_type: card
entity: '[[entity]]'
show_icon: false
show_name: true
show_state: true
size: 30%
styles:
card:
- height: 70px
- box-shadow: none
- padding: 8% 0px 4% 0px
grid:
- grid-template-areas: '"s" "n"'
name:
- color: var(--primary-text-color)
- font-size: 15px
- align-self: start
state:
- color: var(--primary-text-color)
- padding-left: 10px
- font-size: 20px
- font-weight: bold
- align-self: end
tap_action:
action: '[[action]]'
type: 'custom:button-card'
3 Likes
Hey everyone!
I have been struggling with what seems like it should be simple but I have been trying to create the button seen in the mock up image I made below using the custom button card.
I have gotten as far as getting the gradient and color matching for the lights but can not seem to figure out how to add the decorative bar at the top as shown.
4 Likes
I would solve it this way:
type: 'custom:button-card'
color_type: icon
aspect_ratio: 1
entity: light.xxxxxxxxxxx
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- border-radius: 5%
- border-top: 2rem solid var(--button-card-light-color)
icon:
- color: |
[[[
if (entity.state == 'on') return 'var(--button-card-light-color)';
]]]
3 Likes
Thatâs spot on for what I was looking for and a much easier solution than I had expected. Thanks!
My next question, is there a way to modify the var(âbutton-card-light-color) value that is returned? For example take the current color of the light and make it darker or lighter?
Yes, you can use a brightness filter:
styles:
âŚ
icon:
- color: |
[[[
if (entity.state == 'on') return 'var(--button-card-light-color)';
]]]
- filter: brightness(500%)
Play with the percentage, e. g. 0% or 50%.
thank you, this is very nice! this will be the first addition to my light templates that havent changed in a long time! very nice indeed.
Because I dont want to color anything in the âoffâ state, ive templated it like this:
styles:
card:
- border-top: >
[[[
if (entity.state == 'on') return '0.5rem solid var(--button-card-light-color)';
return null;
]]]
and minimized the top a bit more, leaving more space for my custom field:
4 Likes
Lovely. Gives a very clean look.
yes I like it too, check this for indication motion:
sensor: off
sensor: on
motion!:
catches the eye does it?
4 Likes
Hey there,
just a perhaps stupid question. I defined a button-card based on the neon theme with percentage values for hight and width.
For width it works like a charm but the hight does not change equal which value I enter.
Could you have a quick look, what I do wrong?
type: 'custom:button-card'
show_icon: true
entity_picture: /local/house.png
show_entity_picture: true
tap_action:
action: navigate
navigation_path: '#p1'
entity: sensor.aussenfuhler_temperature
name: Hemma
show_label: true
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 142px
topleft:
- position: absolute
- left: 15px
- top: 10px
topright:
- position: absolute
- left: 115px
- top: 10px
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- box-shadow: '5px 5px 20px rgba(0, 0, 0, 0.2)'
- height: 100%
- width: 250%
icon:
- width: 50px
img_cell:
- padding-top: 30px
name:
- color: var(--secondary-text-color)
- justify-self: center
label:
- font-size: 12px
- justify-self: center
- padding-bottom: 70px
state:
- value: disarmed
label: Avlarmat
- value: armed
label: ABC
entity_picture: /local/larmet.png
- value: partially_armed
label: DEF
entity_picture: /local/sleep.png
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 150px;
border-radius: 0px;
}
entities:
- entity: sensor.aussenfuhler_humidity
show:
icon: false
name: false
points: false
font_size: 40
color_thresholds:
- value: 19
color: '#b0abf4'
- value: 21
color: '#c696eb'
- value: 23
color: '#cd79b3'
topright:
card:
type: 'custom:button-card'
entity: switch.jeq0067030
show_state: false
show_name: false
icon: 'mdi:shield-outline'
styles:
icon:
- width: 24px
topleft:
card:
type: 'custom:button-card'
entity: switch.jeq0067030
show_state: false
show_name: false
icon: 'ios:house'
styles:
icon:
- width: 24px
Height and % is tricky because itâs a relative value in reference to its parent element. When you donât know the parentâs height you have no reference point and cannot put your container value in relation.
Try and play with 100vh .
Hi Marius,
would you mind sharing the code for your custom buttons? I like them pretty much, in particular the way you display the percentages.
Thanks!
Hi!
I would like to apply a background image to my card with opacity.
The ha-card is inheriting the opacity to all child CSS elements thus the opacity is applied to all elements like Icon, Name etc. as well.
How can I apply opacity to just the background image and nothing else?
extra_styles: |
ha-card {
background-image: url("https://images-na.ssl-images-amazon.com/images/I/41hX%2B2Es%2BvL._AC_.jpg");
background-size: cover;
opacity: 0.2;
}
sure, those are made with templates button_lights.
this is the main buttons config of that section:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: button_light
name: Bureau left
entity: light.bureau_left
- type: custom:button-card
template: button_light
name: Bureau rght
entity: light.bureau_right
styles:
icon:
- transform: scaleX(-1)
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: button_light
entity: light.drawer
- type: custom:button-card
template: button_light
entity: light.toilet_hall
- type: custom:button-card
template: button_light
entity: light.world_map
and my templates you can find here: My Button card templates ¡ GitHub
1 Like