MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Change current CSS with a module?

    Scheduled Pinned Locked Moved Solved Development
    11 Posts 2 Posters 2.4k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      MacG
      last edited by MacG

      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!

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @MacG
        last edited by

        @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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          MacG @sdetweil
          last edited by

          @sdetweil Thanks a lot! Then I will look into creating modules.

          S 1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @MacG
            last edited by

            @macg u can use my sample module, as a starter
            https://github.com/sdetweil/SampleModule

            and my MMM-SleepWake module does the loop thru the modules

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Reply Quote 0
            • M Offline
              MacG @sdetweil
              last edited by

              @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?

              S 1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @MacG
                last edited by sdetweil

                @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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                M 1 Reply Last reply Reply Quote 0
                • M Offline
                  MacG @sdetweil
                  last edited by

                  @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”.

                  S 1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @MacG
                    last edited by

                    @macg be careful… if you change the order in config.js, then the identifier will change…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    M 1 Reply Last reply Reply Quote 0
                    • M Offline
                      MacG @sdetweil
                      last edited by

                      @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.

                      M 1 Reply Last reply Reply Quote 0
                      • M Offline
                        MacG @MacG
                        last edited by

                        @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.

                        M 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy