SOLVED Change current CSS with a module?
-
Would it be technically possible to switch a class off and on in the CSS with a module? I know that is possible with the custom.css, only I would need two custom.css to create the two different displays.
It’s specifically about the Gradient of MMM-BackgroundSlideshow. Currently, I disable that, if desired, with the developer tools from the browser. This is not a permanent solution, because the digital dashboard should run without a mouse and keyboard.
In advance, thanks for your help!
-
@macg sure. there is no protection between modules in the dom.
you could run thru the list of modules (mm gives function to do this), and get the ID of the background slideshow, use the ID to locate the content and change the attributes/replace one class w another
-
@sdetweil Thanks a lot! Then I will look into creating modules.
-
@macg u can use my sample module, as a starter
https://github.com/sdetweil/SampleModuleand my MMM-SleepWake module does the loop thru the modules
-
@sdetweil Thank you!
This seems to be more difficult, than expected. I’ll take a look at it. So far, I have only programmed with the script language AutoIt.
Why would the loop through the modules be necessary? To find the ID of the background module or to set the changes to the module?
-
@macg the module u want to modify sits somewhere in the page. you need to find it
mm gives each module a unique identifier and uses that as a class name (u might have more than one instance running and using just the module name would be insufficient).
open the developers window elements tab (ctrl-shift-i), and look around the dom structure
see this topic
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1629461258321 -
@sdetweil The ID is well known because I have already changed or tried some things with the custom.css. It’s “module_1_MMM-BackgroundSlideshow”.
-
@macg be careful… if you change the order in config.js, then the identifier will change…
-
@sdetweil I know. Fortunately, from my logical point of view, the background is with one of the first modules.
After your post from Friday, I had the idea to create maybe two instances of the MMM-BackgroundSlideshow. One with and one without gradient. With the MMM-Remote-Control, I could then set active the instance which is needed. So that the dashboard is readable and the gallery mode is without gray haze. That would save me the module programming. Is everything new for me anyway.
-
@macg said in Change current CSS with a module?:
After your post from Friday, I had the idea to create maybe two instances of the MMM-BackgroundSlideshow. One with and one without gradient. …
This doesn’t work. Also not with the second instance as “fullscreen_above”. So back to plan A again.
