@kayakbabe Hi, thanks very much for your suggestion
MagicMover adds a div to all the modules. maybe having that surreounding div added to the backgroundslideshow… is breaking the css for the BackgroundSlideshow.
I’d wondered if there was a way to exclude BackgroundSlideshow from any changes that MagicMover applies but had no idea what those changes might be or how to do it though.
Are you wanting a background with stuff floating around on top of it?
Yes exactly - so I was trying to build something with maybe less of a mirror-look (where the modules are all displayed against a black background) and more of an info-screen, with a desktop-background effect and modules are displayed over the top, if that’s clear)
If I use npm start dev
and look at the elements view I can see the BackgroundSlideshow at the fullscreen below position. It looks a bit like
< body> == $0
< div class="region fullscreen below">
< div class="container" style="display: block;">
< div id="module_2_MMM-BackgroundSlideshow" class="module MMM-BackgroundSlideshow MMM-BackgroundSlideshow">
< header class="module-header" style="display: none;">undefined</header>
< div class="module-content">
I don’t know any javascript, but looking at the MMM-MagicMover.js code it looks like there’s a bit that might be adding the div you mentioned?
getDom: function () {
var wrapper = document.createElement('div');
return wrapper;
And there’s also a bit where it looks like it’s iterating through to move each of the elements?
document.querySelectorAll('.container').forEach((element) => {
Can I just try adding a conditional statement somewhere that would exclude a container that has div id="module_2_MMM-BackgroundSlideshow"
? Or maybe ignore a module that’s displayed at position fullscreen_below? (I’m only using that position for the MMM-BackgroundSlideshow module). I’m not sure how to adjust the javascript without (probably) breaking it unfortunately. Any ideas where might be best to start?
thanks again for your help!