The documentation is unclear as to what folders you need in order to use lovelace in yaml mode, e.g. ui-lovelace.yaml. The docs mention:
<config>/ui-lovelace.yaml
Is the root of the home-assistant directory alongside of configuration.yaml? People mention local and www folders. Are there any examples out there that explain the folder structure?
Yes.
Create a www folder inside the same directory as configuration.yaml. Then you access things in that directory via the /local url path
So I started doing that last week and was having a lot of trouble as well. I finally got them working, only by putting a lovelace folder directly inside of the config directory (I’ve tried them in a different folder, but it didn’t work).
So mine looks like this:
ui-lovelace.yaml:
resources: !include lovelace/resources.yaml popup_cards: !include lovelace/pop_up_cards.yaml title: Condo views: - !include lovelace/00_main_view.yaml - !include lovelace/01_media_player_view.yaml - !include lovelace/02_fitbit_view.yaml - !include lovelace/03_weather_and_calendar_view.yaml - !include lovelace/04_system_view.yaml
Then for the individual cards, i put them in subfolders under the lovelace folder, so my main_view.yaml looks like this:
title: default_view icon: mdi:home path: home badges:[] cards: - !include compact_custom_header.yaml - !include main_view_cards/main_room_lights_card.yaml - type: horizontal-stack cards: - type: light entity: light.bathroom_orb name: Bathroom Orb - type: light entity: light.couch name: Couch - !include main_view_cards/couch_color_card.yaml - !include main_view_cards/timers_and_alarms_card.yaml - !include main_view_cards/climate_lock_group_card.yaml - !include main_view_cards/weather_summary_card.yaml
And the card yamls look like this:
type: vertical-stack cards: - type: entities show_header_toggle: false title: Weather Summary entities: - sensor.dark_sky_summary - sensor.dark_sky_minutely_summary - sensor.dark_sky_hourly_summary - sensor.dark_sky_daily_summary - type: custom:weather-card entity: weather.dark_sky icons: '/local/custom-lovelace/weather-card/icons/animated/' - type: custom:fold-entity-row head: type: section label: More Details items: - sensor.dark_sky_temperature - sensor.dark_sky_apparent_temperature - sensor.dark_sky_daytime_high_temperature_0 - sensor.dark_sky_overnight_low_temperature_0 - sensor.dark_sky_daytime_high_apparent_temperature_0 - sensor.dark_sky_overnight_low_apparent_temperature_0 - sensor.dark_sky_precip_intensity - sensor.dark_sky_precip_probability - sensor.dark_sky_wind_speed - sensor.dark_sky_nearest_storm_distance - sensor.dark_sky_humidity - sensor.dark_sky_visibility - sensor.dark_sky_cloud_coverage - sensor.dark_sky_moon_phase_0 - sensor.allergy_index_today_2
That took a lot of trial, error, and aggravation to get working. I’m still trying to figure out how to use anchors, as well, to reuse the same custom-cards within different vertical/horizontal stacks, but that’s for another day.
I hope this helps!
This isn’t really what OP was referring to.
My mistake
Still helpful though!
I set up my lovelace almost exactly the same. Having an issue where lovelace files are not refreshing, even with the F12/DevMode/HardRefresh trick. The only way I can get them to refresh is to purposely create an error in the base ui-lovelace file, refresh, then fix the file and refresh again.
Have you had similar issues? Can’t figure out what’s going on. Almost seems like HA has some kind of internal lovelace cache or something, but I didn’t think that was the case.
Hey, yeah, that happened to me too, I had to go to the front end and hit refresh on the top right. That’s the only way I found to refresh it.
Man oh man knowing this would have saved me a lot of trouble. I can’t believe I didn’t try that. It works.
Thank you.
No problem! I was struggling with it a lot last week, till I figured that out!
Thank you for this! I tried to do this and it didn’t work so I wasn’t sure it would. Seeing this confirmed that it should work for me, and now I have that popup clutter in a separate file, which makes me sooo happy. 