Absolutly fantasic, that was it! Thank you so much for not only the most powerful lovelace card but also regularly supporting the users!
2 Likes
Always happy to help 
Hey there,
i want to size my card relative. In the end i want to get a card that works on mobile and on desktop.
This is my code:
icon: 'fas:couch'
color: 'rgb(47, 186, 229)'
name: Wohnzimmer
entity: sensor.heizung_wohnzimmer_temperature
label: |
[[[ return '°C: ' + entity.state; ]]]
show_label: true
styles:
card:
- width: 300%
- height: 80%
- font-size: 16px
- font-weight: bold
name:
- justify-self: center
- margin-bottom: 25px
grid:
- position: relative
The width works correct, the height not. Do you have a hint for me?
Nic
I’d try with aspect_ratio: 30/8 instead of width and height.
1 Like
Hi everyone, struggling with this code, perhaps some one can help me ?
Objective : when the fan setting is set to low, have the button card display a spinning fan. issue : getting a syntax error on the state (my syntax in the use of the operator template is incorrect).
Thanks !
entity: 'fan.ceiling_fan'
icon: 'mdi:circle-slice-2'
name: LOW
type: 'custom:button-card'
action:
action: call service
service: fan.set_speed
service_data:
entity: fan.ceiling_fan
speed: low
state:
- operator: template
value: |
[[[return.states[''fan.ceiling_fan''].attributes.speed === 'low' ]]]
color: 'rgb(28, 128, 199)'
icon: 'mdi:fan'
spin: true
It’s written in the error message. You have a . that is unexpected. Also you have double single quotes.
[[[return states['fan.ceiling_fan'].attributes.speed === 'low' ]]]
1 Like
OK. I’m stuck and need help with templates. I haven’t had them working properly yet and am not sure why but here is my setup. I started by trying to use some of the code from: https://www.reddit.com/r/homeassistant/comments/gm1x5b/my_mobile_friendly_lovelace_ui/ but even trimming it back i’m still getting stuck with applying a template to the button-card component as installed through HACS.
configuration.yaml
lovelace:
mode: yaml
ui-lovelace.yaml
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
button_card_templates:
header:
styles:
card:
- background-color: '#EBF4FC'
- box-shadow: none
- border-radius: 0%
- padding: 0%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- width: 15%
- margin-top: 0%
- margin-left: 0%
- color: white
name:
- font-size: 16px
- color: '#253B56'
- text-transform: capitalize
- justify-self: start
- margin-left: 1%
- font-family: avenir
standard_button:
styles:
card:
- font-size: 10px
icon:
- width: 30%
name:
- font-size: 12px
- color: '#6A7889'
- font-family: avenir
state:
- justify-self: start
- font-size: 10px
- padding: 0px 5px
- color: '#6A7889'
- font-family: avenir
I go into my dashboard, add card and manual then paste this text:
cards:
- name: Open Doors
template: header
type: 'custom:button-card'
- card: null
entities:
- binary_sensor.back_door
- binary_sensor.basement_door
- binary_sensor.front_door
show_empty: false
show_header: false
state_filter:
- 'on'
- open
type: entity-filter
type: vertical-stack
which then gives this error:
Button-card template ‘header’ is missing!
Can anyone see where I am going wrong? I did try the same setup using the example code from the button-card instructions and that didn’t work but when I put some of the template code inline on the card itself it works.
In yaml mode I don’t see how you can modify the dashboard using the UI. So you’re probably modifying another dashboard and in this case you’ll have to add the templates to this specific dashboard using the raw editor, not in ui-lovelace.yaml
Hi there, sorry it took so long for me to reply. My room card might take some work to copy because there’s a lot going on behind the scenes. My philosophy was having a tiny card for each room that could show me a fair bit of information at a glance, while allowing me to expand that information further with a click when I need it.
- The five bottom row icons all change color/icon/blinkiness depending on the state of various entities in the room. These are all defined in the decluttering card.
- The temperature and humidity sensors change color based on my preset ideal ranges. I went to a bit of extra effort to make sure these are customizable. For example, I have a washer/dryer room card that tracks the power usage of the washer/dryer instead of the temp/hum in that room.
- The top right room icon changes based on if the room is currently being heated/cooled (based on thermostat activity)
- If you click anywhere on the button card, browser_mod pops up a separate card that gives me more granular control of that particular room. This is where I control the room lights, devices, and thermostat in a given room. You could add whatever you wanted to this popup since it’s done using a combination of vertical and horizontal stack cards. Number one on my wishlist for button card is clickable hot zones, but should that not be in the offing this still does the trick.
- I spent a bit of effort making this all work within a decluttering card template to both simplify config for each room and also allow me to make universal changes to all of my room cards at once.
A gif of it in action –
I’m happy to give some help if you need it.
If you want to use this as-is, you’ll need to make sure you have the decluttering card and the browser_mod addon (for the pop-up action) installed. But to get started I recommend you remove the pop_up part (under tap_action) and go from there. You could add the pop-up again later.
Here’s the decluttering card template (this goes in the raw config editor)
decluttering_templates:
room:
card:
custom_fields:
icon1: |
[[[
if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon2: |
[[[
if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon3: |
[[[
if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon4: |
[[[
if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon5: |
[[[
if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon6: |
[[[
if (states['[[temp_ent]]'].state == "heat")
return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[temp_ent]]'].state == "cool")
return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
stat1: |
[[[
return `<ha-icon
icon="mdi:[[stat1_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
]]]
stat2: |
[[[
return `<ha-icon
icon="mdi:[[stat2_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
]]]
entity: '[[entity]]'
name: '[[name]]'
show_icon: false
show_label: false
show_state: false
size: 70%
state:
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: crimson
value: heat
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: lightblue
value: cool
styles:
card:
- font-size: 12px
- padding: 5px 3px 5px 3px
custom_fields:
icon1:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";
else return null;
]]]
icon2:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";
else return null;
]]]
icon3:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
else return null;
]]]
icon4:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";
else return null;
]]]
icon5:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";
else return null;
]]]
icon6:
- padding: 0px 0px 0px 0px
stat1:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat1_ent]]"].state < 20) return "lightblue";
if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine";
else return "tomato";
]]]
stat2:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat2_ent]]"].state < 30) return "lightblue";
if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine";
else return "tomato";
]]]
grid:
- grid-template-areas: >-
". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
- grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
- grid-template-rows: 2fr 1fr 1fr 3fr
- padding: 0px 0px 0px 0px
icon:
- place-self: center
- padding: 0px 0px 3px 0px
name:
- justify-self: start
- font-size: 16px
- padding: 0px 0px 0px 3px
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- cards:
- cards:
- cards:
- color_type: '[[pu_light1_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light1_ent]]'
hold_action:
action: more-info
name: '[[pu_light1_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
- color_type: '[[pu_light2_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light2_ent]]'
hold_action:
action: more-info
name: '[[pu_light2_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
type: horizontal-stack
- cards:
- color_type: '[[icon1_colortype]]'
entity: '[[icon1_ent]]'
hold_action:
action: '[[icon1_holdaction]]'
icon: 'mdi:[[icon1_icon2]]'
name: '[[icon1_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon1_icon1]]'
styles:
icon:
- color: '[[icon1_color1]]'
- animation: '[[icon1_animate]]'
value: '[[icon1_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon1_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon2_colortype]]'
entity: '[[icon2_ent]]'
hold_action:
action: '[[icon2_holdaction]]'
icon: 'mdi:[[icon2_icon2]]'
name: '[[icon2_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon2_icon1]]'
styles:
icon:
- color: '[[icon2_color1]]'
- animation: '[[icon2_animate]]'
value: '[[icon2_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon2_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon3_colortype]]'
entity: '[[icon3_ent]]'
hold_action:
action: '[[icon3_holdaction]]'
icon: 'mdi:[[icon3_icon2]]'
name: '[[icon3_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon3_icon1]]'
styles:
icon:
- color: '[[icon3_color1]]'
- animation: '[[icon3_animate]]'
value: '[[icon3_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon3_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon4_colortype]]'
entity: '[[icon4_ent]]'
hold_action:
action: '[[icon4_holdaction]]'
icon: 'mdi:[[icon4_icon2]]'
name: '[[icon4_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon4_icon1]]'
styles:
icon:
- color: '[[icon4_color1]]'
- animation: '[[icon4_animate]]'
value: '[[icon4_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon4_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon5_colortype]]'
entity: '[[icon5_ent]]'
hold_action:
action: '[[icon5_holdaction]]'
icon: 'mdi:[[icon5_icon2]]'
name: '[[icon5_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon5_icon1]]'
styles:
icon:
- color: '[[icon5_color1]]'
- animation: '[[icon5_animate]]'
value: '[[icon5_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon5_tapaction]]'
type: 'custom:button-card'
type: horizontal-stack
- color_type: '[[pu_therm_colortype]]'
custom_fields:
cardy:
card:
entity: '[[pu_climate_ent]]'
hide:
state: true
icon:
cool: 'mdi:snowflake'
heating: 'mdi:fire'
'off': 'mdi:stop-circle-outline'
modes:
cool: null
heating: null
'off': null
name: Thermostat
sensors:
- attribute: hvac_action
entity: '[[pu_climate_ent]]'
name: Currently
- entity: '[[pu_climate_hum]]'
name: Humidity
type: 'custom:simple-thermostat'
entity: light.curtis
show_icon: false
show_name: false
styles:
grid:
- grid-template-areas: '"cardy"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
type: 'custom:button-card'
- cards:
- align_header: left
align_icon: left
animate: true
entities:
- color: '#f2ab48'
entity: '[[pu_climate_temp]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Temperature - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
- align_header: left
align_icon: left
animate: true
entities:
- color: '#57a5f2'
entity: '[[pu_climate_hum]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Humidity - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
deviceID:
- this
large: false
title: '[[pu_title]]'
triggers_update:
- '[[icon1_ent]]'
- '[[icon2_ent]]'
- '[[icon3_ent]]'
- '[[icon4_ent]]'
- '[[icon5_ent]]'
- '[[icon6_ent]]'
- '[[stat1_ent]]'
- '[[stat2_ent]]'
- '[[pu_light1_ent]]'
- '[[pu_light2_ent]]'
type: 'custom:button-card'
And here’s the card config itself (you’ll obviously want to replace all the entity IDs and icons/colors to suit your needs)
template: room
type: 'custom:decluttering-card'
variables:
- entity: climate.living_room_thermostat
- icon: sofa
- name: LIVING ROOM
- show_icon: false
- temp_ent: climate.living_room_thermostat
- stat1_icon: thermometer
- stat1_pre: 'Temp: '
- stat1_suf: °
- stat1_ent: sensor.dev_lr_th_temp
- stat2_icon: water-percent
- stat2_pre: 'Hum: '
- stat2_suf: '%'
- stat2_ent: sensor.dev_lr_th_humidity
- icon1_ent: sensor.lr_status_door
- icon1_name: Door
- icon1_tapaction: more-info
- icon1_holdaction: more-info
- icon1_colortype: null
- icon1_color1: tomato
- icon1_color2: null
- icon1_color3: red
- icon1_animate: blink 2s ease infinite
- icon1_state1: Open
- icon1_state2: Closed
- icon1_state3: unknown
- icon1_icon1: shield-off
- icon1_icon2: door
- icon1_icon3: help-circle
- icon2_ent: sensor.lr_status_motion
- icon2_name: Motion
- icon2_tapaction: more-info
- icon2_holdaction: more-info
- icon2_colortype: null
- icon2_color1: coral
- icon2_color2: null
- icon2_color3: red
- icon2_animate: null
- icon2_state1: 'Yes'
- icon2_state2: 'No'
- icon2_state3: unknown
- icon2_icon1: motion-sensor
- icon2_icon2: walk
- icon2_icon3: help-circle
- icon3_ent: switch.dev_tv_lr
- icon3_name: LR TV
- icon3_tapaction: toggle
- icon3_holdaction: more-info
- icon3_colortype: null
- icon3_color1: mediumseagreen
- icon3_color2: null
- icon3_color3: red
- icon3_animate: blink 2s ease infinite
- icon3_state1: 'on'
- icon3_state2: 'off'
- icon3_state3: unknown
- icon3_icon1: television-guide
- icon3_icon2: television
- icon3_icon3: help-circle
- icon4_ent: switch.dev_fan_lr
- icon4_name: LR Fan
- icon4_tapaction: more-info
- icon4_holdaction: more-info
- icon4_colortype: null
- icon4_color1: darkolivegreen
- icon4_color2: null
- icon4_color3: red
- icon4_animate: blink 2s ease infinite
- icon4_state1: 'on'
- icon4_state2: 'off'
- icon4_state3: unknown
- icon4_icon1: weather-windy
- icon4_icon2: fan
- icon4_icon3: help-circle
- icon5_ent: sensor.lr_status_windows
- icon5_name: Windows
- icon5_tapaction: more-info
- icon5_holdaction: more-info
- icon5_colortype: null
- icon5_color1: tomato
- icon5_color2: null
- icon5_color3: red
- icon5_animate: blink 2s ease infinite
- icon5_state1: Open
- icon5_state2: Closed
- icon5_state3: unknown
- icon5_icon1: window-open
- icon5_icon2: window-closed
- icon5_icon3: help-circle
- pu_title: Living Room
- pu_light1_ent: light.lr_overhead_lights
- pu_light1_name: Overheads
- pu_light1_colortype: icon
- pu_light2_ent: light.lr_spots
- pu_light2_name: Spots
- pu_light2_colortype: icon
- pu_climate_ent: climate.living_room_thermostat
- pu_climate_hum: sensor.dev_lr_th_humidity
- pu_climate_temp: sensor.dev_lr_th_temp
17 Likes
That’s a huge configuration 
good job 
Is color: auto-no-temperature working for anyone?
The icon just shows the inactive icon colour for this config:
light_button:
aspect_ratio: 1/1
color_type: icon
styles:
icon:
- width: 28px
- padding: 0px 0px 0px 0px
- color: auto-no-temperature
This config has icon colour changes but includes colour temperature (which has an undesired effect for light groups, the icon shows white if any light is set to cool white):
light_button:
aspect_ratio: 1/1
color_type: icon
styles:
icon:
- color: var(--button-card-light-color)
- width: 28px
- padding: 0px 0px 0px 0px
This is not a css style, it is a main config entry that’s why it doesn’t work for you.
Also, the variable without temperature is called differently: --button-card-light-color-no-temperature
1 Like
Doh!. Thanks.
After the last update my icons got shrunk inside my buttons. Is there a style to align the icon to the center of the button?
1 Like
This is already fixed in the latest button-card with HA 0.110. You probably didn’t clear the cache…
1 Like
How do I include a button_card_templates.yaml file in a Lovelace view?
I’m a noob to Home Assistant but have v0.108.2 up and running on macOS v10.12.6 (Sierra) in a venv using Lovelace non-manual mode and HACS which is how I installed the Button Card. I’ve found it a bit of a steep learning curve for the most part despite an IT background however if you want to do something, generally someone else has done it and this “Community” site has been my saving grace.
I’ve been experimenting with the Button Card and really like what it can offer however have one sticking point that I can’t find a solution to despite reviewing the documentation and searching this site. I have not been able to figure out how to include a button_card_templates.yaml file in a Lovelace view. All the documentation seems to be written for YAML mode Lovelace which I’d prefer to avoid at this stage. As I’ve seen posted elsewhere I’ve tried adding this ;
button_card_templates:
!include path_to/file_with_templates.yaml
by using the Configure UI/Raw configuration editor however I get this error;
As an experiment on one button only I can get it to work by adding this to the top of the Raw Configuration for that view;
button_card_templates:
light_button:
custom_fields:
temp: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if (bri
> 0) return (bri ? (bri+"%") : ''); else return `${entity.state}` ]]]
hold_action:
action: more-info
layout: icon_label
show_label: false
show_name: true
styles:
card:
- height: 120px
- padding-bottom: 15px
custom_fields:
temp:
- padding-left: 15%
- padding-bottom: '-15px'
- align-self: middle
- justify-self: start
- text-transform: uppercase
- font-size: 13px
- font-family: var(--primary-font-family)
grid:
- grid-template-areas: ' ". i temp ." "n n n n" '
- grid-template-columns: 1fr 60px 30px 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- width: 55px
- height: 55px
name:
- font-size: 13px
- margin-bottom: 8%
- font-family: var(--primary-font-family)
Here is how it renders (as expected);
What am I missing?
You can’t include a file in the RAW editor, you’ll have to declare the templates directly. The only way to use !include is to switch to yaml mode.
Bugfixes
- The ripple effect and the hold effect are back (Fix #325)
- Font-awesome icons were not sized correctly (Fix #328)
Other
-
For dark cards, it can be useful to change the feedback color when clicking the button. The ripple effect uses a
mwc-rippleelement so you can style it with the CSS variables it supports.For example:
styles: card: - --mdc-ripple-color: blue - --mdc-ripple-press-opacity: 0.5
1 Like