Actually, i have tried that before, but the “cover” it’s only covering this part:
Wich its not wrong, because the hui-view its only that part:
Btw, card-mod and button card are up to date. The issue is that my height is bigger than yours, so even with the header-hide fix, the background still get this bug.
Did anyone know how to aply the effects directly on the ? this should solve the problem.
Hello, your weather card is very cool. Can you share your ui overlay. yaml card configuration and which weather entity do you use? I copied the code you shared, it doesn’t work properly
Hello again. Well… your solution was working perfect for almost a year now… Until 2023.4.0… Now I had quite some fight to get my animated background and transparencies back everywhere… I managed to “fix” all stuff, except the sidebar. Any clue how to get my transparency back like it was before? I tred dozens of things, but I don’t find the one layer to get transparent to break through to the video background…
Bram Kragten came up with this idea:
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer").shadowRoot.querySelector(".mdc-drawer").style.setProperty("--mdc-theme-surface", "transparent");
It does change something aka the sidebar parts that should be transparent are now lighter, but there is some layer left somewhere…
// resources:
// - url: '/local/sidebar.js?v=2'
// type: module
// test red background
const body = document.querySelector("body");
body.style.backgroundColor = "red";
// transparent sidebar
const main = document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main");
const haDrawer = main?.shadowRoot.querySelector("ha-drawer");
const haSidebar = main?.shadowRoot.querySelector("ha-drawer > ha-sidebar");
haDrawer.style.setProperty("--mdc-theme-surface", "transparent");
haSidebar.style.backgroundColor = "transparent";
Red background test confirmed. And if it helps… the whole screen flashes red on a refresh. I hope that my “fixed” addon is not the culprit, but as I can switch the sidebar to slim mode and the video is working behind it I hoped that this is not the problem.
Or here as video: MS Snipping Tool record of Firefox - YouTube
On the right you see my fixed stuff showing the animated background again. These two realized that:
//Transparent background of Main-Section
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view").style.setProperty("background", "transparent");
//Semi-Transparent background of Header
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("div:nth-child(1) > div.header").style.setProperty("background-color", "rgba(0,0,0,0.5)");
hey
how did you make the floorplan on the right card on your screen?
Hi
i used your code and everything works well but the background, fanart is sometimes not visible, but in the sensor the jpg are definied.
aired:2023-02-24|title:Die Hart|fanart:/local/upcoming-media-card-images/plex/Plex_Recently_Added_Movies/f12325.jpg|poster:/local/upcoming-media-card-images/plex/Plex_Recently_Added_Movies/p12325.jpg
I am still far away from understanding all the styling mess. But if I get things right, something chops off a part of the layer where Animated Background addon would like to draw the video on. Thus the red down below shows up. Am I right with that? Closing / expanding the sidebar changes the size of the draw area and thus the video works fine “behind” the sidebar. Soo that is why adding more and more transparent does not help as I would need a trick to increase the draw size to the whole screen first?
You updated to the newest version? Releases · custom-cards/button-card · GitHub But yes, this was one of the bigger discussions while Beta.
Having the same issue here - all HACS integrations updated
Hello. I solved it by updating the button-card integration and clearing the application cache
1 Like
Both of these look OK.
If you browse to this directory, are all images loaded correctly?
I’ve found that sometimes images downloaded to HA is corrupt or something.
When this happens to me, I’ve browsed to the image directory and I can clearly see that the thumbnail is not loading, and when I open that file, the image is not showing up.
To solve this I’ve deleted the image files and they’re automatically downloaded again.
Hello, can you share your GIF animation background image?
Hello, today I did a fresh HA install on my Proxmox server, uploaded backup of my HA instance and all was working as intended. Then I noticed that on my dashboard I started getting errors on all of my grid layouts. The error stated “can’t access property “config”, t is null”
Anybody experienced this issue? Before the fresh install and backup upload the dashboard was working perfectly without any issue.
