search

edward-shen / MMM-pages

Add pages to your MagicMirror²!
MIT License
107 stars 30 forks source link

Option to Make custom.css work? #63

Closed OliverWasson closed 3 years ago

OliverWasson commented 3 years ago

Hello Edward!

First off I would love to say thank you for making the module, after working out a few kinks with my previous modules (MMM-Gmail doesn't work... tsk module developer :P ) it is working great. However I have one caveat, my custom.css positioning is overwritten. Is there a possibility you could make my custom.css work along side pages?

Have a good one, Oliver

edward-shen commented 3 years ago

Thanks for the praise!

MMM-pages doesn't have any sort of custom CSS and doesn't really mess around with the CSS of modules. What do you mean by CSS positioning?

And just to make sure we're on the same page, you didn't seem to post your css to begin with. Can't make something compatible if you don't tell me what it is!

OliverWasson commented 3 years ago

Wow, thanks for the quick reply!

Sorry, I should have explained better. I wanted to make two modules overlap in my Magic Mirror, so in my custom.css I used:

.MMM-PIR-Sensor { Position: absolute; Left: 114.5px; Top: 80px; Z-index: 4; }

This puts MMM-PIR-Sensor over the top of MMM-EyeCandy to look like this: https://i.postimg.cc/PxCcVv9S/custom-css.jpg (excuse the bad quality, this is via VNC)

However, when I use MMM-pages in my config, it reverts this after a split second: https://i.postimg.cc/2STKzxfH/Screenshot-2021-08-19-224149.jpg

Thanks for your help.

edward-shen commented 3 years ago

Hmm, that certainly is strange. To give a little context from my end, MMM-pages only interacts with other modules via the official protocols that MM2 provides (via .show() and .hide()). I'm not doing anything crazy with CSS or DOM manipulation; if any, that's being handled by MM2. As a result, I'm not really sure how to best help here, if I can help at all. As far as I can tell, I strongly believe that I am using their API correctly, so perhaps this might be in either bug or unsupported territory.

If you'd like to debug this a little further, I'd suggest looking at the DOM structure and CSS properties of both modules before and after you insert MMM-pages. If there's any difference then that might be useful in figuring out how to best resolve this issue, maybe with MM2 itself rather than this repository.

As an alternative (and I'm just shooting out random things to try), you can also maybe reorder the modules in the MMM-pages config, or in config.js itself. Both play a role in how things are loaded, and it's possible that a different order might fix your issue.

Finally, in the worse case, you could probably hack together a module that fixes it and uses the notifications that MMM-pages sends out as event hooks, but I can't guarantee that will fix it either: CSS is a pain to work with, much more so when you're working around something as dynamic as this.

Hopefully this helps; let me know if you have any other questions.