Hello erverybody,
in last two days I have come far… very happy with the results.
I am new to home assistant and have very little knowledge in coding.
I am making this (screenshot) detail page per room.
I would like to add next to the brightness | area where the light belongs to. as you can see in the lower right hand corner of the screenshot.
I would also like to add some sub-text under the main text.
Any help is highly appreciated.
thanks.
Let me know if this works
custom_card_light_slider:
template:
- "ulm_language_variables"
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_light_slider_area: "Your Light Area"
show_icon: false
show_name: false
show_label: false
state:
- operator: "template"
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
styles:
grid:
- grid-template-areas: "'item1' 'item2'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_info"
- "yellow_slider"
entity: "[[[ return entity.entity_id ]]]"
label: >-
[[[
if (entity.state !="unavailable"){
if (entity.state =="off"){
return variables.ulm_off + " | " + variables.ulm_custom_card_light_area;
} else if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return variables.ulm_on + " | " + (bri ? bri : "0") + "%" + " | " variables.ulm_card_light_slider_area;
} else {
return variables.ulm_on + " | " + variables.ulm_card_light_slider_area;
}
}
} else {
return variables.ulm_unavailable;
}
]]]
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: "none"
- border-radius: "var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)"
- padding: "0px"
item2:
card:
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: "14px"
height: "42px"
mainSliderColor: >-
[[[
if (entity.state == "unavailable"){
return "rgba(var(--color-grey),1)";
}
return "rgba(var(--color-yellow),1)";
]]]
secondarySliderColor: >-
[[[
if (entity.state == "unavailable"){
return "rgba(var(--color-grey),0.2)";
}
return "rgba(var(--color-yellow),0.2)";
]]]
mainSliderColorOff: "rgba(var(--color-theme),0.05)"
secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: "0px"
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
Hello,
i’d like to modify card_thermostat in order to use the attribute “hvac_action” in order to know if it’s heating or idle.
here is the code i use in a view :
cards:
- type: custom:button-card
entity: climate.thermostat_ch_parents
icon: mdi:thermostat-box
tap_action:
action: navigate
navigation_path: /lovelace/ch-parents
show_name: true
name: G. & S.
size: 20%
styles:
icon:
- color: |
[[[
if (states["climate.thermostat_ch_parents"].attributes["hvac_action"] == "heating") return "darkorange";
else return "lightgray";
]]]
but i don’t know what to modify in the template code :
custom_card_thermostat:
template:
- "icon_info_bg"
- "ulm_language_variables"
hold_action:
action: "more-info"
label: >-
[[[
if (entity.state =='off'){
var etat = variables.ulm_off ;
}else if (entity.state == 'heat'){
var etat = variables.ulm_heat ;
}else if (entity.state == 'cool'){
var etat = variables.ulm_cool ;
}else{
var etat = variables.ulm_idle;
}
if(entity.attributes.temperature){
return (entity.attributes.temperature ) + '°' + ' • ' + etat ;
}else{
return etat ;
}
]]]
icon: "mdi:thermometer"
state:
- operator: "template"
value: >
[[[
return entity.state == 'heat'
]]]
styles:
icon:
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red),0.2)"
card:
- background-color: "rgba(var(--color-background-red),var(--opacity-bg))"
name:
- color: "rgba(var(--color-red-text),1)"
label:
- color: "rgba(var(--color-red-text),1)"
can someone help me ?
So I have tried out the css grid from CM000n config and it’s looking better now, thanks for sharing. Got a problem with the persons card though, I want them to show up as 2 top and 2 on the bottom instead of 3 on the top like how I put it in the grid.
Here’s my config:
button_card_templates: !include_dir_merge_named minimalist-templates/
views:
- type: custom:grid-layout
title: _Home
icon: mdi:home
path: 0
layout:
#default
grid-gap: 1px 1px
grid-template-columns: repeat(4, 1fr)
grid-template-rows: auto
grid-template-areas: |
" t1 t1 t1 t1 "
" weather person1 person2 . "
" weather person3 person4 . "
" t2 t2 t2 t2 "
" power1 power2 power3 power4 "
" scriptfan1 scriptfan2 scriptfan3 scriptfan4 "
" scriptac1 scriptac2 scriptac3 . "
" t3 t3 t3 t3 "
" camera1 . . . "
" t4 t4 t4 t4 "
" powerl1 powerl2 powerl3 powerl4 "
cards:
- type: "custom:button-card"
template: card_title
name: Welcome Home!
label: "Home Screen"
view_layout:
grid-area: t1
- type: weather-forecast
entity: weather.home
show_forecast: true
view_layout:
grid-area: weather
- type: "custom:button-card"
template: card_person
variables:
ulm_card_person_entity: person.mingsoonang
ulm_card_person_use_entity_picture: true
view_layout:
grid-area: person1
- type: "custom:button-card"
template: card_person
variables:
ulm_card_person_entity: person.mingsoonang
ulm_card_person_use_entity_picture: true
view_layout:
grid-area: person2
- type: "custom:button-card"
template: card_person
variables:
ulm_card_person_entity: person.mingsoonang
ulm_card_person_use_entity_picture: true
view_layout:
grid-area: person3
- type: "custom:button-card"
template: card_person
variables:
ulm_card_person_entity: person.mingsoonang
ulm_card_person_use_entity_picture: true
view_layout:
grid-area: person4
- type: custom:button-card
template: title
label: 'OfficeRoom'
view_layout:
grid-area: t2
- type: "custom:button-card"
template: card_power_outlet
entity: switch.pcroom_wall_switch
name: CeilingFan
view_layout:
grid-area: power1
- type: "custom:button-card"
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.entertainmentsetup_current_consumption
entity: switch.entertainmentsetup
name: EntSetup
view_layout:
grid-area: power2
- type: "custom:button-card"
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.pcsetup_current_consumption
entity: switch.pcsetup_plug
name: PCSetup
view_layout:
grid-area: power3
- type: "custom:button-card"
template: card_light
entity: input_boolean.yeelights_switch
view_layout:
grid-area: power4
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Fan OFF
ulm_card_script_icon: "mdi:fan"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.send_rf_button0
view_layout:
grid-area: scriptfan1
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Fan Lights
ulm_card_script_icon: "mdi:fan"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.send_rf_button1
view_layout:
grid-area: scriptfan2
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Fan Speed4
ulm_card_script_icon: "mdi:fan"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.send_button2
view_layout:
grid-area: scriptfan3
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Fan Speed5
ulm_card_script_icon: "mdi:fan"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.send_rf_button3
view_layout:
grid-area: scriptfan4
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: AC-25c
ulm_card_script_icon: "mdi:air-conditioner"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.daikin_pcroom_power25c
view_layout:
grid-area: scriptac1
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: AC-16c Max
ulm_card_script_icon: "mdi:air-conditioner"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.daikin_pcroom_power16cmax
view_layout:
grid-area: scriptac2
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: AC-26c
ulm_card_script_icon: "mdi:air-conditioner"
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.daikin_pcroom_power26c
view_layout:
grid-area: scriptac3
- type: custom:button-card
template: title
label: 'Cameras'
view_layout:
grid-area: t3
- type: picture-entity
name: Carport-front
entity: camera.carport_front
camera_view: live
view_layout:
grid-area: camera1
- type: custom:button-card
template: title
label: 'HomeSwitches'
view_layout:
grid-area: t4
- type: "custom:button-card"
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.masterbedroomtv_current_consumption
entity: switch.masterbedroomtv
name: masterbedroomtv
view_layout:
grid-area: powerl1
- type: "custom:button-card"
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.kitchenwaterd_current_consumption
entity: switch.kitchenwaterd
name: kitchenwaterd
view_layout:
grid-area: powerl2
- type: "custom:button-card"
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.kitchenfridge_current_consumption
entity: switch.kitchenfridge
name: kitchenfridge
view_layout:
grid-area: powerl3
- type: "custom:button-card"
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.washingmachine_current_consumption
entity: switch.washingmachine
name: washingmachine
view_layout:
grid-area: powerl4
Hi,
thanks a lot.
I copy pasted the code directly into my button_card_templates.yaml
I am using card_light_slider_collapse:
Unfortunately it did not work out.
in you code you wrote “Your Light Area”, what should I fill in? and where?
this is the code in my main yaml:
## individual lights
- type: horizontal-stack
cards:
- type: custom:button-card
template: card_light_slider_collapse_icon_info
entity: light.hanging_lamp_bedroom_1
variables:
ulm_card_light_name: Hanging Lamp
ulm_card_light_icon: mdi:ceiling-light
- type: custom:button-card
template: card_light_slider_collapse_icon_info
entity: light.standing_lamp_bedroom_1
variables:
ulm_card_light_name: Standinging Lamp
ulm_card_light_icon: mdi:desk-lamp
I managed to get this by adding a media card in between the 4 person card, tbh the cards look quite out of place though with this design, does anyone have any recommendation on what could be done to improve it?
I would take a different approach:
Replace this block:
state:
- operator: "template"
value: >
[[[
return entity.state == 'heat'
]]]
styles:
icon:
- color: "rgba(var(--color-red),1)"
with this:
state:
- operator: '!='
value: 'off'
styles:
icon:
- color: |
[[[
var a = entity.attributes.hvac_action;
if (entity.state == 'heat' && a == 'heating') return 'orange';
return 'red';
]]]
Hi All,
i am using this chip to display the door state.
type: custom:button-card
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_icon: mdi:door
ulm_chip_mdi_icon_state_entity: binary_sensor.haustuer
So far so good. But the result is a chip with the state of the sensor on/off and not open/closed. If I choose the lock.nuki entity it shows me locked/unlocked but this doesn’t help me much if I want to know if the door is open or not. For the Garage Door it works because this is a cover entity.
Is there any way to change this behavior for binary sensors wich are door/window sensors?
Thx in advance.
After some errors, i find this working :
custom_card_thermostat:
template:
- "icon_info_bg"
- "ulm_language_variables"
hold_action:
action: "more-info"
# label: >-
# [[[
# if (entity.attributes.hvac_action =='heating'){
# var etat = variables.ulm_heat ;
# }else{
# var etat = variables.ulm_idle;
# }
# if(entity.attributes.current_temperature){
# return (entity.attributes.current_temperature ) + '°' + ' • ' + etat ;
# }else{
# return etat ;
# }
# ]]]
label: >-
[[[
return (entity.attributes.current_temperature ) + '°' + ' • [' + (entity.attributes.temperature) + '°' + '] '
]]]
icon: "mdi:thermometer"
state:
- operator: "template"
value: >
[[[
return entity.attributes.hvac_action == 'heating'
]]]
styles:
icon:
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red),0.2)"
card:
- background-color: "rgba(var(--color-background-red),var(--opacity-bg))"
name:
- color: "rgba(var(--color-red-text),1)"
label:
- color: "rgba(var(--color-red-text),1)"
but thanks for your contribution, i will try it in the next version 
Maybe a tiny bug. Try this instead:
type: custom:button-card
template:
- chip_mdi_icon_state
- ulm_language_variables
variables:
ulm_chip_mdi_icon_state_icon: mdi:door
ulm_chip_mdi_icon_state_entity: binary_sensor.YOURSENSOR
label: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
variables.ulm_open : variables.ulm_closed ]]]
Hey guys, im new to home assistant and the lovelace ui.
I have tried to follow the instructions as described to setup minimalist ui.
now i have the problem that the dashboard just shows three cards but all of them only contain the error
“custom element doesn’t exist: button-card”
I have installed button card using hacs just like explained.
I also see all js. files installed in the www/community folder
Do i have to specify something else?
The git repository of button card meantiones
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
do i have to past this anywhere? I have tried it but it just does not work for me
Welcome to the forums!
Are you in yaml mode or UI?
Have you cleaned your cache?
HACS installation sometimes is broken.
Ok try this:
custom_card_light_slider_collapse:
template:
- "ulm_language_variables"
variables:
ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_light_slider_area: "Your Light Area"
show_icon: false
show_name: false
show_label: false
state:
- operator: "template"
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
grid:
- row-gap: "12px"
styles:
grid:
- grid-template-areas: "'item1' 'item2'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_info"
- "yellow_slider"
entity: "[[[ return entity.entity_id ]]]"
label: >-
[[[
if (entity.state !="unavailable"){
if (entity.state =="off"){
return variables.ulm_off + " | " + variables.ulm_custom_card_light_area;
} else if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return variables.ulm_on + " | " + (bri ? bri : "0") + "%" + " | " + variables.ulm_card_light_slider_area;
} else {
return variables.ulm_on + " | " + variables.ulm_card_light_slider_area;
}
}
} else {
return variables.ulm_unavailable;
}
]]]
name: "[[[ return variables.ulm_card_light_slider_collapse_name ]]]"
styles:
card:
- box-shadow: "none"
- border-radius: "var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)"
- padding: "0px"
item2:
card:
type: "conditional"
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: "on"
card:
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: "14px"
height: "42px"
mainSliderColor: "rgba(var(--color-yellow),1)"
secondarySliderColor: "rgba(var(--color-yellow),0.2)"
mainSliderColorOff: "rgba(var(--color-theme),0.05)"
secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: "0px"
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
and replace the template in your card with:
template: custom_card_light_slider_collapse
and add this in variables
ulm_custom_card_light_area: Bedroom 1
Nice! Could you share your code for the top card?
The welcome, scene and notification card i mean 
wow! very nice.
thanks. will try and let you know.
Yes.
I followed your instruction. it worked, but still small problem still exists.
I am not able to get the your light Area to show up!
## individual lights with on | brightness | room
- type: horizontal-stack
cards:
- type: custom:button-card
template: custom_card_light_slider_collapse_icon_info
entity: light.hanging_lamp_bedroom_1
variables:
ulm_card_light_name: Hanging Lamp
ulm_card_light_icon: mdi:ceiling-light
ulm_custom_card_light_area: Bedroom 1
- type: custom:button-card
template: custom_card_light_slider_collapse_icon_info
entity: light.standing_lamp_bedroom_1
variables:
ulm_card_light_name: Standinging Lamp
ulm_card_light_icon: mdi:desk-lamp
ulm_custom_card_light_area: Bedroom 1
Replace this line in your card in variables section:
ulm_custom_card_light_area:
with:
ulm_card_light_area:
just remove the word “custom”