No, please compare my example above. You have to reference the custom field by using
styles:
custom_fields: ##<— this is mandatory
bright:
- display: |
[[[
return states['light.sockel_kueche'].state == 'off' ? 'none' : 'block'
]]]
yes, I did… I think I expressed myself wrong.
type: custom:button-card
entity: light.sockel_kueche
icon: hass:outdoor-lamp
name: Haustür
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
template: kt_card_1
custom_fields:
bright: |
[[[
var b = entity.attributes.brightness ? Math.round(entity.attributes.brightness/2.55) : '';
return parseInt(b ? b/2.55 : '0') + '%';
]]]
button_card_templates:
kt_card_1:
styles:
card:
grid:
- grid-template-areas: '"i bright ." "i bm ." "n cl ." "s cl ."'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content
custom_fields:
bright:
- display: |
[[[
return entity.state == 'off' ? 'none' : 'block'
]]]
I have it now and I think it works perfectly!
in your snippet you have: return states[‘light.sockel_kueche’].state == ‘off’ ? ‘none’ : 'block’
I would like to get rid of the light.sockel_kueche so that I only have to determine the entity once (when creating the card).
editing…
I’ve attached my picture =)
custom:button_card’s are awesome!!!
at the bottom right you see “mirror” here everything is off.
on the left above and below are different properties of the lamps.
Yes, all fine. If you use a „main“ entity, there’s no need to repeat it all over the code.
this seems odd…
currently you check twice for the existence and use 2 different methods for doing the same. if yes you divide an extra time /2.55.
Or what am I missing
do as Pedolsky said earlier:
[[[
var b = states['light. sockel_kueche'].attributes.brightness;
return parseInt(b ? b/2.55 : '0') + '%';
]]]
first set the var, and then manipulate that in the return clause. Using entity that would become
[[[
var b = entity.attributes.brightness;
return parseInt(b ? b/2.55 : '0') + '%';
]]]
@qoheleth I’m loving your dashboard and was trying to copy your configs but getting stuck with these errors. I understand you have different entities defined etc but
I have the lovelace running in YAML mode. I have the ui-lovelace.yaml, lovelace-templates-button-card.yaml, lovelace-templates-decluttering.yaml and sensors.yaml but still having this error regarding custom element doesn’t exist… Hope you can assist. TIA
First and most obvious: Do you have the single-weather card and custom: button-card installed?
I installed them with HACS as Frontend enhancements.
In my /config/configuration.yaml file, I have these entries:
lovelace:
mode: yaml
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
- url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js
type: module
How can I apply a background image to the card?
I have tried:
- type: custom:button-card
styles:
card:
grid:
- image: url('https://demo.home-assistant.io/stub_config/bedroom.png')
- background-size: cover
But that’s doesn’t work.
type: custom:button-card
styles:
card:
- background-image: url('https://demo.home-assistant.io/stub_config/bedroom.png')
- background-size: cover
Found it, must be.
- type: custom:button-card
styles:
card:
- background: url('https://demo.home-assistant.io/stub_config/bedroom.png')
- background-size: cover
Only not the whole image, but that should not be a problem.
hey,
I need help with a variable, please.
I have custom_field with two entity_pictures. depending on whether the LED has RGB color, either a colored image or a white one should be shown.
custom_fields:
cl:
card:
type: custom:button-card
icon: mdi:palette
name: false
entity_picture: /local/multic.png
show_entity_picture: true
show_name: false
styles:
card:
- background-color: '#242e42'
- height: 25px
- width: 25px
icon:
- width: 15px
I have a template with which I can check whether RGB is available (or not)
But I can’t get it integrated into the button card.
{% set variable = state_attr('light.sockel_kueche', 'rgb_color') %}
{% if variable == none %} /local/white.png {% else %} /local/multic.png{% endif %}
everything I´ve found so far is just the query with "is_state == ‘on’ " … but it doesn’t work that way 
Thanks @qoheleth - That was it. I’ve moved to YAML mode and did define the resources. Now I’m getting the following errors:
Yes. Those are all defined as decluttering cards (also installed via HACS, which requires these additional lines in /config/configuration.yaml: (after the ‘resources:’ line)
- url: /local/decluttering-card.js
type: module
You’ll notice from the above that the decluttering card files (for me) aren’t in the hacsfiles folder. I had some issues early on with making that work so I manually installed them. I’m assured by the decluttering card creator that that has been fixed but I haven’t changed it because it’s working.
I have a /config/lovelace-templates-decluttering.yaml file which is as follows:
# card to show various (on/off) modes
mode-thing:
card:
type: custom:button-card
entity: '[[thing_entity]]'
name: '[[thing_name]]'
state_color: true
triggers_update: all
aspect_ratio: '[[aspect_ratio]]'
hold_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Modes
hide_header: false
card:
type: entities
entities:
- type: custom:template-entity-row
entity: '[[thing_entity]]'
icon: "{% if is_state('[[thing_entity]]','on') %} [[thing_icon_on]] {% else %} [[thing_icon_off]] {% endif %}"
active: "{{ is_state('[[thing_entity]]','on') }}"
state: "{% if is_state('[[thing_entity]]','on') %} [[thing_name_on]] {% else %} [[thing_name_off]] {% endif %}"
toggle: '[[thing_toggle]]'
- type: custom:template-entity-row
entity: '[[m0_entity]]'
icon: "{% if is_state('[[m0_entity]]','[[m0_on_state]]') %} [[m0_icon_on]] {% else %} [[m0_icon_off]] {% endif %}"
active: "{{ is_state('[[m0_entity]]','[[m0_on_state]]') }}"
state: "{% if is_state('[[m0_entity]]','[[m0_on_state]]') %} [[m0_status_on]] {% else %} [[m0_status_off]] {% endif %}"
toggle: '[[m0_toggle]]'
condition: '[[m0_show]]'
- type: custom:template-entity-row
entity: '[[m1_entity]]'
icon: "{% if is_state('[[m1_entity]]','[[m1_on_state]]') %} [[m1_icon_on]] {% else %} [[m1_icon_off]] {% endif %}"
active: "{{ is_state('[[m1_entity]]','[[m1_on_state]]') }}"
state: "{% if is_state('[[m1_entity]]','[[m1_on_state]]') %} [[m1_status_on]] {% else %} [[m1_status_off]] {% endif %}"
toggle: '[[m1_toggle]]'
condition: '[[m1_show]]'
- type: custom:template-entity-row
entity: '[[m2_entity]]'
icon: "{% if is_state('[[m2_entity]]','[[m2_on_state]]') %} [[m2_icon_on]] {% else %} [[m2_icon_off]] {% endif %}"
active: "{{ is_state('[[m2_entity]]','[[m2_on_state]]') }}"
state: "{% if is_state('[[m2_entity]]','[[m2_on_state]]') %} [[m2_status_on]] {% else %} [[m2_status_off]] {% endif %}"
toggle: '[[m2_toggle]]'
condition: '[[m2_show]]'
- type: custom:template-entity-row
entity: '[[m3_entity]]'
icon: "{% if is_state('[[m3_entity]]','[[m3_on_state]]') %} [[m3_icon_on]] {% else %} [[m3_icon_off]] {% endif %}"
active: "{{ is_state('[[m3_entity]]','[[m3_on_state]]') }}"
state: "{% if is_state('[[m3_entity]]','[[m3_on_state]]') %} [[m3_status_on]] {% else %} [[m3_status_off]] {% endif %}"
toggle: '[[m3_toggle]]'
condition: '[[m3_show]]'
styles:
card:
- background-color: '[[card_background_color]]'
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"n n m0 m0 m0" "i i m1 m1 m1" "i i m2 m2 m2" "stat stat m3 m3 m3"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: |
[[[
if (entity.state == 'on') return '[[thing_icon_color_on]]';
else return '[[thing_icon_color_off]]';
]]]
- width: 80%
- margin-top: 0%
custom_fields:
stat:
- font-size: 12px
- align-self: middle
- justify-self: start
m0:
- align-self: middle
- justify-self: start
m1:
- align-self: middle
- justify-self: start
m2:
- align-self: middle
- justify-self: start
m3:
- align-self: middle
- justify-self: start
state:
- value: 'on'
id: value_on
icon: '[[thing_icon_on]]'
- value: 'off'
id: value_off
icon: '[[thing_icon_off]]'
custom_fields:
stat: |
[[[
var status = '[[thing_name_off]]';
if (entity.state == "on") status = '[[thing_name_on]]';
return `<span>${status}</span>`
]]]
m0: |
[[[
if ('[[m0_show]]' == 'true') {
var icon = '[[m0_icon_off]]';
var icon_color = '[[m0_icon_color_off]]';
var status = '[[m0_status_off]]';
if (states['[[m0_entity]]'].state == '[[m0_on_state]]') {
icon = '[[m0_icon_on]]';
status = '[[m0_status_on]]';
icon_color = '[[m0_icon_color_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
m1: |
[[[
if ('[[m1_show]]' == 'true') {
var icon = '[[m1_icon_off]]';
var icon_color = '[[m1_icon_color_off]]';
var status = '[[m1_status_off]]';
if (states['[[m1_entity]]'].state == '[[m1_on_state]]') {
icon = '[[m1_icon_on]]';
status = '[[m1_status_on]]';
icon_color = '[[m1_icon_color_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
m2: |
[[[
if ('[[m2_show]]' == 'true') {
var icon = '[[m2_icon_off]]';
var icon_color = '[[m2_icon_color_off]]';
var status = '[[m2_status_off]]';
if (states['[[m2_entity]]'].state == '[[m2_on_state]]') {
icon = '[[m2_icon_on]]';
icon_color = '[[m2_icon_color_on]]';
status = '[[m2_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
m3: |
[[[
if ('[[m3_show]]' == 'true') {
var icon = '[[m3_icon_off]]';
var icon_color = '[[m3_icon_color_off]]';
var status = '[[m3_status_off]]';
if (states['[[m3_entity]]'].state == '[[m3_on_state]]') {
icon = '[[m3_icon_on]]';
icon_color = '[[m3_icon_color_on]]';
status = '[[m3_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
# card with main entity and lock entity
locking-thing:
card:
type: 'custom:button-card'
entity: '[[thing_entity]]'
name: '[[thing_name]]'
template: standard-button
triggers_update: all
aspect_ratio: '[[aspect_ratio]]'
styles:
grid:
- position: relative
custom_fields:
lock:
- position: absolute
- right: 0%
- top: -10%
- height: 18px
- width: 12px
custom_fields:
lock: |
[[[
var icon = "mdi:lock-open-variant:";
var color = "darkRed";
var status = states['[[lock_entity]]'].state;
if (status == 'on') {
icon = "mdi:lock";
color = "darkGreen";
}
return `<ha-icon icon="${icon}"
style="width 12px; height: 12px; color: ${color};"></ha-icon>`
]]]
hold_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: '[[lock_entity]]'
state:
- value: 'on'
id: value_on
icon: '[[thing_icon_on]]'
- value: 'off'
id: value_off
icon: '[[thing_icon_off]]'
and these are the first two lines of my /config/ui-lovelace.yaml file:
decluttering_templates: !include lovelace-templates-decluttering.yaml
button_card_templates: !include lovelace-templates-button-card.yaml
which, as you can see invoke the decluttering templates and the button card templates from separate files (for ease of editing and basically helping me to remember where to go to find all of that).
Thanks @qoheleth - Fixed that problem but there are so many other errors now might just have to bite the bullet and start fresh.
Keep in mind that it took me about a year to get to where all this was done, a little bit at a time.
(I’ll be glad to help as I can so it might take you less time.)
Dear Keith
Thanks to your hard work, I have achieved the attached Dashboard.
However I am struggling to change the color of the Alterter Dual Sensors. I want them to be green when locked and red when open.
Can you please guide me on how to do it?
Sajive
Zurich - Switzerland
Hi,
I used the code (bellow) and I am struggling to create a variable that would change the icon bassed on value in the small fields (let’s say cpu).
entity: 'sensor.raspi_temp'
icon: 'mdi:raspberry-pi'
aspect_ratio: 1/1
name: HassOS
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: >
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: -10%
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.raspi_ram"].state > 80) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.raspi_sd"].state > 80) return "red"; ]]]'
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
]]]
ram: >
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
]]]
sd: >
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>``
]]]
I have a sensor with battery and would like to change icon bassed on state. Something like this:
[[[
return `<ha-icon
icon='[[[ if (states["sensor.raspi_sd"].state > 80) return "mdi:Battery-high"; else return "mdi:Battery-low" ]]]'
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
]]]
Can you help me?
Thanks,
Try something like this:
[[[
var icon = "mdi:map-marker";
var color = "lightGrey";
var status = states[variables.m1_entity].state;
if (status != 'not_home') {
icon = states['zone.'+status].attributes['icon'];
color = "white";
}
return `<span>${variables.m1_name}:</span>
<ha-icon icon="${icon}"
style="width: 14px; height: 14px; color: ${color};"></ha-icon>
<span>${status}</span>`
]]]
is it possible to have in my picture in the red circle the temperature of the entity?
- type: custom:button-card
size: 40px
entity: climate.heizung_keller
name: Keller
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Keller
large: false
style:
$: |
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_keller
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: left
- text-align: start
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red
Hi,
Does anybody know if it is possible to use minmax(x,y) CSS property in the card styles
for with and height of the card itself.
or use width and height: 1fr to fit the parent grid cell
it seems not to work, even setting height in % doesn’t work.
Hi,
I have a made grid inside the custom button card, it has a space above the top and bottom
of the grid, but can not figure out where it is coming from.
On the sides there is no space.
My code:
- type: custom:button-card
styles:
card:
- background: url('https://demo.home-assistant.io/stub_config/bedroom.png')
- background-size: cover
- width: 417px #1920x1080
- height: 234px #1920x1080
grid:
- grid-template-areas: '". . . . . . " "mylabel . . . . temp" "light heat screen scene vent media"'
- grid-template-rows: 0px 1fr 1fr
- grid-template-columns: 1fr
- grid-row-gap: 0px
custom_fields:
mylabel:
- text-transform: capitalize
- font-weight: normal
- vertical-align: middle
- background-color: rgba(0,0,0,0.5)
- align-self: start
- text-align: start
temp:
- font-weigth: normal
#- font-size: 16px
- background-color: rgba(0,0,0,0.5)
- align-self: start
- width: 100%
custom_fields:
mylabel: >
[[[
return '<span style="padding-left: 20px; padding-top: 10px;">living</span>'
]]]
temp: >
[[[
return `<span style="padding-right: 20px;">${states['sensor.temperture_woonkamer'].state} °C</span>`
]]]