Closed BadEendt closed 1 year ago
For me it's both the backgrounds and the weather icons.
Actually, just moved all .png and .svg files too www folder and also amended the " to ' on wave.yaml, as per below:
on the dark theme
# Place the backgrounds in the folder config/www/images/backgrounds
background-image: center / cover no-repeat url('/local/themes/waves/background.png') fixed
on the light theme
# Place the backgrounds in the folder config/www/images/backgrounds
background-image: center / cover no-repeat url('/local/themes/waves/background-light.png') fixed
on both dark and light themes
#Animated icons
weather-icon-clear-night: url('/local/themes/waves/clear-night.svg')
weather-icon-cloudy: url('/local/themes/waves/cloudy.svg')
weather-icon-fog: url('/local/themes/waves/fog.svg')
weather-icon-lightning: url('/local/themes/waves/lightning.svg')
weather-icon-lightning-rainy: url('/local/themes/waves/lightning-rainy.svg')
weather-icon-partlycloudy: url('/local/themes/waves/partlycloudy.svg')
weather-icon-pouring: url('/local/themes/waves/pouring.svg')
weather-icon-rainy: url('/local/themes/waves/rainy.svg')
weather-icon-hail: url('/local/themes/waves/hail.svg')
weather-icon-snowy: url('/local/themes/waves/snowy.svg')
weather-icon-snowy-rainy: url('/local/themes/waves/snowy-rainy.svg')
weather-icon-sunny: url('/local/themes/waves/sunny.svg')
weather-icon-windy: url('/local/themes/waves/windy.svg')
weather-icon-windy-variant: url('/local/themes/waves/windy-variant.svg')
weather-icon-exceptional: url('/local/themes/waves/exceptional.svg')
Also added the below on both dark and light themes to fix the borders
ha-card-border-radius: 20px
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
And just as an extra, added the below to the wave.yaml (took the idea from the noctis theme, which I find if quite cool when it blurs everything out around a pop up) ;)
card-mod-theme: waves
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
Thanks, that's a smart fix!
Got my background working again for now
Hi All,
I'm not clear why your backgrounds, images are not working as it would suggest you're not calling g the right directory in your main configuration file.
Can you confirm you're doing this?
Apart from the background and weather icons, the theme works fine, in my believe my configuration.yaml is set up correctly:
frontend:
themes: !include_dir_merge_named themes
and theme is under the correct theme folder (config/themes/wave)
Changing the " to ' as per my comment and changing the current path on your wave.yaml from "/hacsfiles/themes/waves/xxxx" to a folder in "www" folder worked. I basically made the assumption that Home Assistant is restricting the access to /hacsfiles somehow - This is more likely due to the most recent update as it was like this before and it worked.
@tgcowell @Zeunas
Hi both. I'm on HA 2023.1.1 with HACS 1.29.1
I had the same issue, and I followed from where HA was trying to lookup other resources loaded by hacsfiles
reference and I actually needed to copy the waves
resources into <hass_dir>/www/comunity/...
.
I have just copied the whole themes/waves
directory structure as well, so I didn't need to change the *.yml
file.
Not sure what caused the difference in behavior, but I remember I've lost the background somewhere in December (might be the HA update in December or some other configuration.)
https://github.com/tgcowell/waves/commit/e0255829ab091fbc19fa808eac7c09124a652888 - that change in 2.3.1.1 beta didn't work for me as well
Ah I see! Ok good shout. Thanks!
I've noticed the background is gone as well. BadEendt, What did you do to fix yours?
I've validated everything above, even cleared cache and logged on/in.
All,
I'm working on this, this week. In short, the hacsfiles have stopped working (at some point) and I think caching backgrounds for some users.
To resolve the issue all the images will need to be moved to www/waves/ folder and I'll remap and test everything. This will only need to be done once and shouldn't impact any future updates.
Apologies for not picking this up sooner, appears there are lots of background themes that are affected like Waves.
Cheers
All,
Please read release 2.4 notes and update once complete, this should resolve everyone's issues.
Thanks again
All,
Please read release 2.4 notes and update once complete, this should resolve everyone's issues.
Thanks again
Hi there @tgcowell
I have installed the latest 2.4 version and the weather and background icons is not working for me. The weather icons especially doesn't show. Please look at the screenshot below.
Is it possible to please fix this?
Thanks.
Hi @bachoo786,
Please confirm you have completed the following
/config/www/waves
Download or move ALL the backgrounds and animated images to the above directory
Update to the latest 2.4 Waves version
Restart/Reload your themes (via Developer Tools -> Services and search for Home Assistant Frontend: Reload Themes)
If you can completed the following and still having issues, can you please take a snapshot of your structure.
Thanks
@tgcowell what about using base64 encoded images for css inside the yml file?
Like that:
background-image: url("data:image/gif;base64,R0lGODdhAQADAPABAP////8AACwAAAAAAQADAAACAgxQADs=")
}
Ref: https://base64.guru/developers/css/background-image
That might solve the problem of manual steps. Not sure it will work for svgs though.
The light and dark backgrounds stopped working on my devices (Firefox, MacOS app, iOS), since i updated to HA 2022.12. The problem exists on 2023.01 as well.
Let me know if you need more information