Do you have an example, I’m probably overlooking this, but I checked here:
and here:
I have the button-card installed with hacs and linked the resources.
Correct, it says:
In ui-lovelace.yaml (or in another file using !import)
button_card_templates:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
so add the other templates there using the same indent as this example template ‘header’
yes so when I add that and the rest of the example I have this at the top of my ui-lovelace.yaml
button_card_templates:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
header_red:
template: header
styles:
card:
- background-color: '#FF0000'
then when I add a card I get this error:
what happens if you only use the ‘header’ template. in a custom:button-card in a lovelace card (not in another template)
btw, to keep your ui-lovelace.yaml clean you could do this:
button_card_templates: !include lovelace/includes/button_card_templates.yaml
and have all templates in that file. Thats the way I do it
Yes I had the include in there, but removed everything and started over since I didn’t know where the error was coming from.
like this?
Did you reload resources ?
yes, I did.
Have to go now, but post your ui-lovelace.yaml on formatted code and we can check properly
ok I will. I feel like there’s a problem with how home assistant reads my ui-lovelace.yaml. Because my raw config-editor is very different.
my ui-lovelace.yaml:
button_card_templates:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
header_red:
template: header
styles:
card:
- background-color: '#FF0000'
title: NiMa
views:
- badges: []
cards:
- entities:
- entity: person.nick
- entity: binary_sensor.someone_home
- entity: person.marieke
show_icon: true
show_name: false
show_state: true
type: glance
- entity: weather.nima
type: weather-forecast
- entities:
- entity: sensor.buienalarm_next_rain_forecast
- entity: sensor.buienalarm_temperature
- entity: sensor.buienalarm_precipitation
- entity: sensor.buienalarm_precipitation_forecast_average
- entity: sensor.buienalarm_precipitation_forecast_total
title: Buienalarm
type: glance
- entities:
- entity: sensor.cpu_temperature
- entity: sensor.processor_use
- entity: sensor.memory_use_percent
type: glance
- analogFace: face-006
analogPlacement: bottom
analogShowDate: bottom
analogSize: 200px
clockBold: false
dateFormat: DD/MM/YYYY
displaySeconds: true
displayType: both
secondsColor: red
showDate: true
showWeek: true
timeFormat: 24
timezone: Europe/Madrid
type: 'custom:mm2-clock-card'
icon: 'mdi:information'
title: Info
- badges: []
cards:
- cards:
- entity: climate.woongedeelte_radiator
name: Woongedeelte
type: thermostat
- entity: climate.slaapkamer_radiator
name: Slaapkamer
type: thermostat
type: horizontal-stack
- entities:
- entity: media_player.sonos
- entity: media_player.speakers
- entity: media_player.badkamer
- entity: media_player.slaapkamer
show_header_toggle: false
title: Speakers
type: entities
- entities:
- entity: media_player.samsung_tv
- entity: media_player.slaapkamer_tv
title: Tv's
type: entities
- entity: light.ventilator
icon: 'mdi:fan'
type: light
- entities:
- entity: switch.genie
- entity: sensor.genie_perfume_name
- entity: sensor.genie_perfume_level
- entity: input_select.rituals_strength
- entity: input_select.rituals_room_size
title: Rituals Parfum Verdeler
type: entities
- entities:
- entity: cover.alle
- entity: cover.raam_links
- entity: cover.raam_midden_links
- entity: cover.raam_midden_rechts
- entity: cover.raam_rechts
show_header_toggle: false
title: Jaloezieën
type: entities
- entities:
- entity: input_boolean.huisdeur_open
- entity: input_boolean.huisdeur_slot
show_header_toggle: false
title: Nuki
type: entities
icon: 'mdi:star'
path: ''
theme: ''
title: Favoriet
- badges: []
cards:
- entities:
- entity: light.woongedeelte_lichten
- entity: light.woonkamer_plafondlamp
- entity: light.eetkamer_hanglamp_1
- entity: light.eetkamer_hanglamp_2
- entity: light.keuken_spot_2
- entity: light.keuken_spot_1
- entity: input_select.hue_scenes_woongedeelte
- entity: input_select.extra_scenes_woongedeelte
show_header_toggle: false
title: Woongedeelte
type: entities
- entities:
- entity: light.slaapkamer_lichten
- entity: light.slaapkamer_spot_1
- entity: light.slaapkamer_spot_2
- entity: light.slaapkamer_spot_3
- entity: light.slaapkamer_spot_4
- entity: input_select.hue_scenes_slaapkamer
title: Slaapkamer
type: entities
- entities:
- entity: light.badkamer_lichten
- entity: light.badkamer_spot_1
- entity: light.badkamer_spot_2
- entity: light.badkamer_spot_3
- entity: light.badkamer_spot_4
- entity: light.badkamer_wandlamp
- entity: input_select.hue_scenes_badkamer
show_header_toggle: false
title: Badkamer
type: entities
- entities:
- entity: light.eetkamer_lichten
- entity: light.eetkamer_hanglamp_1
- entity: light.eetkamer_hanglamp_2
- entity: input_select.hue_scenes_eetkamer
title: Eetkamer
type: entities
- entities:
- entity: light.keuken_lichten
- entity: light.keuken_spot_1
- entity: light.keuken_spot_2
- entity: input_select.hue_scenes_keuken
show_header_toggle: false
title: Keuken
type: entities
- entities:
- entity: light.woonkamer_lichten
- entity: light.woonkamer_plafondlamp
- entity: light.woonkamer_tv_lamp
- entity: input_select.hue_scenes_woonkamer
show_header_toggle: false
title: Woonkamer
type: entities
- entities:
- entity: light.gang_lichten
- entity: light.gang_spot_1
- entity: light.gang_spot_2
- entity: input_select.hue_scenes_gang
show_header_toggle: false
title: Gang
type: entities
icon: 'mdi:lightbulb-group'
path: lights
theme: ''
title: Lights
- badges: []
cards:
- entities:
- entity: media_player.sonos
- entity: media_player.badkamer
- entity: media_player.slaapkamer
show_header_toggle: false
title: Speakers
type: entities
- entities:
- entity: media_player.samsung_tv
- entity: media_player.slaapkamer_tv
title: Tv's
type: entities
icon: 'mdi:speaker'
path: media
title: Media
- badges: []
cards:
- cards:
- entity: climate.woongedeelte_radiator
name: Woongedeelte
type: thermostat
- entity: climate.slaapkamer_radiator
name: Slaapkamer
type: thermostat
- entity: climate.thermostaat
type: thermostat
type: horizontal-stack
- cards:
- entities: null
entity: light.ventilator
hold_action:
action: more-info
icon: 'mdi:fan'
icon_height: 100px
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
type: button
type: 'custom:layout-card'
- entities:
- entity: switch.genie
- entity: sensor.genie_perfume_name
- entity: sensor.genie_perfume_level
- entity: input_select.rituals_strength
- entity: input_select.rituals_room_size
title: Rituals Parfum Verdeler
type: entities
- entities:
- entity: cover.alle
- entity: cover.raam_links
- entity: cover.raam_midden_links
- entity: cover.raam_midden_rechts
- entity: cover.raam_rechts
show_header_toggle: false
title: Jaloezieën
type: entities
icon: 'mdi:home-thermometer'
title: Climate
- badges: []
cards:
- entities:
- entity: switch.slaapkamer_sensor
- entity: switch.badkamer_sensor
- entity: switch.gang_sensor
show_header_toggle: false
title: Beweging Sensoren
type: entities
- entities:
- entity: binary_sensor.fire_4
- entity: binary_sensor.fire_5
title: Rookmelders
type: entities
icon: 'mdi:motion-sensor'
title: Sensors
- badges: []
cards:
- elements:
- entity: light.eetkamer_hanglamp_1
style:
left: 40%
top: 30%
type: state-badge
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
type: picture-elements
path: kaarten
title: Kaarten
raw config editor:
title: NiMa
views:
- badges: []
cards:
- entities:
- entity: person.nick
- entity: binary_sensor.someone_home
- entity: person.marieke
show_icon: true
show_name: false
show_state: true
type: glance
- entity: weather.nima
type: weather-forecast
- entities:
- entity: sensor.buienalarm_next_rain_forecast
- entity: sensor.buienalarm_temperature
- entity: sensor.buienalarm_precipitation
- entity: sensor.buienalarm_precipitation_forecast_average
- entity: sensor.buienalarm_precipitation_forecast_total
title: Buienalarm
type: glance
- entities:
- entity: sensor.cpu_temperature
- entity: sensor.processor_use
- entity: sensor.memory_use_percent
type: glance
- analogFace: face-006
analogPlacement: bottom
analogShowDate: bottom
analogSize: 200px
clockBold: false
dateFormat: DD/MM/YYYY
displaySeconds: true
displayType: both
secondsColor: red
showDate: true
showWeek: true
timeFormat: 24
timezone: Europe/Madrid
type: 'custom:mm2-clock-card'
icon: 'mdi:information'
title: Info
- badges: []
cards:
- cards:
- entity: climate.woongedeelte_radiator
name: Woongedeelte
type: thermostat
- entity: climate.slaapkamer_radiator
name: Slaapkamer
type: thermostat
type: horizontal-stack
- entities:
- entity: media_player.sonos
- entity: media_player.speakers
- entity: media_player.badkamer
- entity: media_player.slaapkamer
show_header_toggle: false
title: Speakers
type: entities
- entities:
- entity: media_player.samsung_tv
- entity: media_player.slaapkamer_tv
title: Tv's
type: entities
- entity: light.ventilator
icon: 'mdi:fan'
type: light
- entities:
- entity: switch.genie
- entity: sensor.genie_perfume_name
- entity: sensor.genie_perfume_level
- entity: input_select.rituals_strength
- entity: input_select.rituals_room_size
title: Rituals Parfum Verdeler
type: entities
- entities:
- entity: cover.alle
- entity: cover.raam_links
- entity: cover.raam_midden_links
- entity: cover.raam_midden_rechts
- entity: cover.raam_rechts
show_header_toggle: false
title: Jaloezieën
type: entities
- entities:
- entity: input_boolean.huisdeur_open
- entity: input_boolean.huisdeur_slot
show_header_toggle: false
title: Nuki
type: entities
icon: 'mdi:star'
path: ''
theme: ''
title: Favoriet
- badges: []
cards:
- entities:
- entity: light.woongedeelte_lichten
- entity: light.woonkamer_plafondlamp
- entity: light.eetkamer_hanglamp_1
- entity: light.eetkamer_hanglamp_2
- entity: light.keuken_spot_2
- entity: light.keuken_spot_1
- entity: input_select.hue_scenes_woongedeelte
- entity: input_select.extra_scenes_woongedeelte
show_header_toggle: false
title: Woongedeelte
type: entities
- entities:
- entity: light.slaapkamer_lichten
- entity: light.slaapkamer_spot_1
- entity: light.slaapkamer_spot_2
- entity: light.slaapkamer_spot_3
- entity: light.slaapkamer_spot_4
- entity: input_select.hue_scenes_slaapkamer
title: Slaapkamer
type: entities
- entities:
- entity: light.badkamer_lichten
- entity: light.badkamer_spot_1
- entity: light.badkamer_spot_2
- entity: light.badkamer_spot_3
- entity: light.badkamer_spot_4
- entity: light.badkamer_wandlamp
- entity: input_select.hue_scenes_badkamer
show_header_toggle: false
title: Badkamer
type: entities
- entities:
- entity: light.eetkamer_lichten
- entity: light.eetkamer_hanglamp_1
- entity: light.eetkamer_hanglamp_2
- entity: input_select.hue_scenes_eetkamer
title: Eetkamer
type: entities
- entities:
- entity: light.keuken_lichten
- entity: light.keuken_spot_1
- entity: light.keuken_spot_2
- entity: input_select.hue_scenes_keuken
show_header_toggle: false
title: Keuken
type: entities
- entities:
- entity: light.woonkamer_lichten
- entity: light.woonkamer_plafondlamp
- entity: light.woonkamer_tv_lamp
- entity: input_select.hue_scenes_woonkamer
show_header_toggle: false
title: Woonkamer
type: entities
- entities:
- entity: light.gang_lichten
- entity: light.gang_spot_1
- entity: light.gang_spot_2
- entity: input_select.hue_scenes_gang
show_header_toggle: false
title: Gang
type: entities
icon: 'mdi:lightbulb-group'
path: lights
theme: ''
title: Lights
- badges: []
cards:
- entities:
- entity: input_select.hue_scenes
- entity: input_select.hue_groups
- entity: script.set_hue_scene
title: My Title
type: entities
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: header
name: My Test Header\
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: horizontal-filler
icon: ''
path: test
title: test
- badges: []
cards:
- entities:
- entity: media_player.sonos
- entity: media_player.badkamer
- entity: media_player.slaapkamer
show_header_toggle: false
title: Speakers
type: entities
- entities:
- entity: media_player.samsung_tv
- entity: media_player.slaapkamer_tv
title: Tv's
type: entities
icon: 'mdi:speaker'
path: media
title: Media
- badges: []
cards:
- cards:
- entity: climate.woongedeelte_radiator
name: Woongedeelte
type: thermostat
- entity: climate.slaapkamer_radiator
name: Slaapkamer
type: thermostat
- entity: climate.thermostaat
type: thermostat
type: horizontal-stack
- cards:
- entities: null
entity: light.ventilator
hold_action:
action: more-info
icon: 'mdi:fan'
icon_height: 100px
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
type: button
type: 'custom:layout-card'
- entities:
- entity: switch.genie
- entity: sensor.genie_perfume_name
- entity: sensor.genie_perfume_level
- entity: input_select.rituals_strength
- entity: input_select.rituals_room_size
title: Rituals Parfum Verdeler
type: entities
- entities:
- entity: cover.alle
- entity: cover.raam_links
- entity: cover.raam_midden_links
- entity: cover.raam_midden_rechts
- entity: cover.raam_rechts
show_header_toggle: false
title: Jaloezieën
type: entities
state_color: true
icon: 'mdi:home-thermometer'
title: Climate
- badges: []
cards:
- entities:
- entity: switch.slaapkamer_sensor
- entity: switch.badkamer_sensor
- entity: switch.gang_sensor
show_header_toggle: false
title: Beweging Sensoren
type: entities
- entities:
- entity: binary_sensor.fire_4
- entity: binary_sensor.fire_5
title: Rookmelders
type: entities
icon: 'mdi:motion-sensor'
title: Sensors
- badges: []
cards:
- elements:
- entity: light.eetkamer_hanglamp_1
style:
left: 40%
top: 30%
type: state-badge
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
type: picture-elements
path: kaarten
title: Kaarten
only the part for the templates would have sufficed 
and an actual card in the config, please dont make us search your full config…
just to be sure, custom card buttons without a button_card_template doe work as expected? meaning the resource itself is loaded correctly
did you get a chance to take a look?
thought you were still in the process, sorry.
I am using yaml mode, so not experienced in raw editor. judging on your ui-lovelace.yaml the pointer to the button_card_templates: is fine.
what I cant find is where in the lovelace cards you use any of these templates? I see it referenced in the raw editor, but not in the ui-lovelace.yaml. Now I dont use raw UI config, but if you have the ui-lovelace.yaml, dont you use yaml mode?
Really hate the order of the raw config editor, and it would take some time to order that humanely readable…
yes I use the ui-lovelace.yaml, but I Just wanted to check if there was a difference. If I change something in my yaml file, then it doesn’t change anything in my view. This is the start of my config:
default_config:
homeassistant:
customize: !include customize.yaml
customize_glob: !include customize_glob.yaml
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- lovelace/resources/custom-ui/custom-ui.js
lovelace:
mode: yaml
resources: !include lovelace/resources/resources.yaml
# Text to speech
tts:
- platform: google_translate
language: nl
#includes
group: !include includes/groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
light: !include includes/lights.yaml
switch: !include includes/switches.yaml
input_select: !include includes/inputselects.yaml
cover: !include includes/covers.yaml
that’s odd… changing the ui-lovelace.yaml, or any of its imports, should definitely change the view you see…
btw this:
extra_module_url:
- lovelace/resources/custom-ui/custom-ui.js
can safely be replace by adding the resource to your resources.yaml. (I like to have all resources in one placeholder…)
# https://github.com/Mariusthvdb/custom-ui
- url: /local/lovelace/resources/custom-ui/custom-ui.js?v=20200918
type: module
dont want to make you mad, but:
you do refresh Lovelace after that don’t you…?
Well I restart home assistant every time now just in case
figured out why my view wasn’t updating. well I have a default view and another and the other one isn’t updating, but the default one is. But I still get the error that the templates are missing.
odd, they both should be updating on Lovelace refresh, no need to restart for that at all.
This does point to the issue though, and, solution. For both dashboards you need to declare the path to the button-card-templates.
example:
I have 3 dashboards and this is 1:
title: Ha Rpi4 Data
button_card_templates: !include lovelace/includes/button_card_templates.yaml
decluttering_templates: !include_dir_named lovelace/decluttering_templates
custom_header: !include lovelace/includes/custom_header_data.yaml
views:
- !include lovelace/views/view_Phones_tablets.yaml #0
- !include lovelace/views/view_Travel.yaml #1
- !include lovelace/views/view_Home_climate.yaml #2
- !include lovelace/views/view_Summary_groups.yaml #3
- !include lovelace/views/view_Time_settings.yaml #4
- !include lovelace/views/view_Home_energy.yaml #5
- !include lovelace/views/view_Home_solar_energy.yaml #6
- !include lovelace/views/view_Computer_netwerk.yaml #7
- !include lovelace/views/view_Audio_video_gaming.yaml #8
hope this helps.