ca1p3 commented 1 year ago

hi all first I just want to thank you for these amazing theme. I now have a problem that my background Is grey on all the different themes, how do I fix this ?

t0kn4r commented 1 year ago

got the same problem. this helped so far: adding a background in RAW confing not so elegant but works ;) blue/red img and using Dark Theme instead

Tassel8062 commented 1 year ago

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

ca1p3 commented 1 year ago

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

Same here love the dark red blue, it seems like the pathway to the image is the problem

t0kn4r commented 1 year ago

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

Same here love the dark red blue, it seems like the pathway to the image is the problem

you can solve it with my unelegant way until its solved :)

basnijholt commented 1 year ago

I am on vacation at the moment, so if anybody can submit a pull request, I’m happy to except it.

kirush0280 commented 1 year ago

for problem Home Assistant 2022.12.8 Supervisor 2022.12.1 Frontend 20221213.1 - latest In console: GET http://192.168.100.129:8123/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg 404 (Not Found) Tried to move files in www path and change in .yaml - didn't helps :(

nalin29 commented 1 year ago

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

nalin29 commented 1 year ago

Looking at a diff from last HACS release it looks like changes were made for populating the public endpoints under /hacsfiles to be asynchronous in this commit perhaps this is not working as intended and preventing the files from being copied over.

kirush0280 commented 1 year ago

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+1 Yes, its helps.

Daw34 commented 1 year ago

Cześć, jakie pliki mam skopiować ?

Daw34 commented 1 year ago

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+1 Yes, its helps.

Hi, what files should I upload?

sddgit commented 1 year ago

I too have run into this problem after installing the latest HACS and HA at the same time. I’ve tried copying the images around to various locations, but haven't got anywhere yet. Any more detailed pointers would be appreciated.

sddgit commented 1 year ago

Does anyone have any clue yet why this has happened exactly? My themes are all in /config/themes. Within that folder there is, of course, ios-themes, that contains the theme and all the background images. The themes themselves point to /hacsfiles/themes/ios-themes to get the background images. This, in effect, is /config/www/community/themes/ios-themes. Sure enough, creating that folder and copying all the jpg's there fixes the issue (as suggested above). But does that mean that path existed previously, perhaps created during the theme installation, but has now somehow been deleted?

mjakeseaton commented 1 year ago

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

This did the trick.

erugaman commented 1 year ago

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+2 Yes, its helps.

AFPhome commented 1 year ago

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+2 Yes, its helps.

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

sddgit commented 1 year ago

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

erugaman commented 1 year ago

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml

     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes

That's all.

basnijholt commented 1 year ago

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

mjakeseaton commented 1 year ago

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

Maybe the latest Home Assistant update fixed it?

bcmitri commented 1 year ago

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

Mine worked fine for a while on some devices, but not on others. When it failed varied from one device to the next, so I assume it was the result of caching.

Implementing the fix above fixed it for all my devices (and other themes that were impacted by the same issue).

AFPhome commented 1 year ago

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml
     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes
That's all.

Thx

Every theme works !!!!

AFPhome commented 1 year ago

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

Sorry, doesn't work for me Also after a reboot.

asemev commented 1 year ago

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

nope that doesnt fix the issue. only way to make it work is to copy the files to the www folder.... tried so many things before doing this.

ghzgod commented 1 year ago

I agree, uninstall and reinstall did not fix this. I think something persistent hangs even after uninstall. But as mentioned by asemev, copying the files to the www folder fixed it immediately.

brucek1642 commented 1 year ago

I think I found the the fix

Broken config frontend: themes: !include_dir_merge_named themes/

Remove the / at the end of the line and now everything works. Something must have change in the last version or two

frontend: themes: !include_dir_merge_named themes

sddgit commented 1 year ago

Mine has never had the trailing slash, but still failed before I copied the images around.

Ringo982 commented 1 year ago

the workaround did not worked for me. My configuration.yaml contains: frontend:

your configuration.

themes: !include_dir_merge_named themes

your configuration.

and i moved files to /config/www/community/themes/ios-themes

but nothing changed also after a full restart of HA, and a full browser refresh

Need help...

MikeMitterer commented 1 year ago

OK, I'm running home assist in Docker. So - no HACS. What I did:

Make sure you have this setting in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

    # cd to the folder where your configuration.yaml is
    mkdir -p www/themes/ios-themes/

    # Clones this repo to tmp
    git clone https://github.com/basnijholt/lovelace-ios-themes.git tmp

   # Copy all images to the puplic ios-themes folder
   cp tmp/themes/*.jpg www/themes/ios-themes

   # Replace the hacsfiles-path with local-path and create the themes file
   cat tmp/themes/ios-themes.yaml | sed 's#/hacsfiles#/local#g' > themes/ios-themes.yaml

   # Remove the cloned tmp-Folder
   rm -rf tmp

Restart HA!

Hope this helps

dMopp commented 1 year ago

Why is the path wrong? Does this theme requires an update ?

eilandert commented 1 year ago

OK, I'm running home assist in Docker. So - no HACS. What I did:

Make sure you have this setting in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

    # cd to the folder where your configuration.yaml is
    mkdir -p www/themes/ios-themes/

    # Clones this repo to tmp
    git clone https://github.com/basnijholt/lovelace-ios-themes.git tmp

   # Copy all images to the puplic ios-themes folder
   cp tmp/themes/*.jpg www/themes/ios-themes

   # Replace the hacsfiles-path with local-path and create the themes file
   cat tmp/themes/ios-themes.yaml | sed 's#/hacsfiles#/local#g' > themes/ios-themes.yaml

   # Remove the cloned tmp-Folder
   rm -rf tmp

Restart HA!

Hope this helps

This helps, thank you

jarodwsams commented 11 months ago

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml
     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes

To add a little specificity, because this just worked for me: Whether you're running HA as the OS or in a Docker, simply run these two commands from the root of your configuration directory (probably /config):

mkdir -p www/community/themes/ios-themes
cp themes/ios-themes/*.jpg www/community/themes/ios-themes

Restart HA using the method appropriate for your deployment, and viola! (I did not have to modify my configuration.yaml file. It already had the themes: !include_dir_merge_named themes line)

CC-JION commented 9 months ago

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml
     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes
That's all.

work for me😐

Maximilian118 commented 7 months ago

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

Make sure you have this entry in your configuration.yaml document:
```
frontend:
themes: !include_dir_merge_named themes
```
As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.
Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.
Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:
```
background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"
```

Note: "local" is referencing the www folder.

ScottEKendall commented 7 months ago

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

Make sure you have this entry in your configuration.yaml document:
frontend:
  themes: !include_dir_merge_named themes
As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.

Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.

Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:
background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"
Note: "local" is referencing the www folder.

This worked PERFECTLY! glad this was the fix...it was driving me nuts why all of my backgrounds disappeared...

Neonodes commented 6 months ago

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

Make sure you have this entry in your configuration.yaml document:
frontend:
  themes: !include_dir_merge_named themes
As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.

Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.

Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:
background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"
Note: "local" is referencing the www folder.
This worked PERFECTLY! glad this was the fix...it was driving me nuts why all of my backgrounds disappeared...

Same here, works like a charm! Thanks a lot for the solution!

khalilbeby commented 6 months ago

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

when i chenge themes background not changed

markcichy commented 4 months ago

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

Make sure you have this entry in your configuration.yaml document:
frontend:
  themes: !include_dir_merge_named themes
As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.

Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.

Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:
background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"
Note: "local" is referencing the www folder.
This worked PERFECTLY! glad this was the fix...it was driving me nuts why all of my backgrounds disappeared...
Same here, works like a charm! Thanks a lot for the solution!

So, this kinda worked. It solved the repointing. However, doesn't matter which theme variant I choose, I always get the homekit-bg-blue-red.jpg as the background JPEG. Even though they are all in the new dir and properly ref'd in the *.yaml config.

EDIT: I should note that this ONLY** occurs on a RASPI imaged HA instance. I have another instance running inside a vSphere VM and it works perfectly fine.

Any ideas?

broyuken commented 4 months ago

I made all the changes to the yaml and moved the images but it still doesn’t work.

eilandert commented 4 months ago

I have a Homeassistant Yellow, I have to do the following to make it work: (after updates too, I guess)

sed -i s/hacsfiles/local/g /homeassistant/themes/ios-themes/ios-themes.yaml

Somehow it takes some time sometimes, probably due to caching (i am behind a public reverse proxy)

FoX2V commented 3 months ago

Note: "local" is referencing the www folder.

i love you man... thx!

basnijholt commented 4 weeks ago

Hey everyone,

Thanks for all the feedback! The background issue you're describing was related to an older version of the theme, before we switched to base64 or remote URLs for the images. This caused issues with image paths (e.g., /hacsfiles) not loading correctly.

The Good News:

As of v3.0.0, this issue should be completely resolved.

Themes now use remote background URLs by default for quicker loading and caching.
Want to use local files instead? You can, with the -alternative themes. You just need to put the images in /config/www/ios-themes and everything should work seamlessly now!

What's Next:

Simply update to v3.0.0 via HACS and everything should work without any manual fixing.
I've also updated the README with clearer instructions for local background use, including quick commands to download the images for those using the -alternative themes.

Thanks again for your patience and help! If you still have issues or questions, let me know.

– Bas (@basnijholt)

basnijholt / lovelace-ios-themes

Background not working #47

your configuration.

your configuration.

The Good News:

What's Next: