• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.2k 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 Aug 18, 2021, 8:00 AM Aug 18, 2021, 8:00 AM

    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 Aug 18, 2021, 11:35 AM Reply Quote 0
    • S Offline
      sdetweil @MacG
      last edited by Aug 18, 2021, 11:35 AM

      @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 Aug 18, 2021, 4:50 PM Reply Quote 0
      • M Offline
        MacG @sdetweil
        last edited by Aug 18, 2021, 4:50 PM

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

        S 1 Reply Last reply Aug 18, 2021, 5:54 PM Reply Quote 0
        • S Offline
          sdetweil @MacG
          last edited by Aug 18, 2021, 5:54 PM

          @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 Aug 20, 2021, 8:06 AM Reply Quote 0
          • M Offline
            MacG @sdetweil
            last edited by Aug 20, 2021, 8:06 AM

            @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 Aug 20, 2021, 12:13 PM Reply Quote 0
            • S Offline
              sdetweil @MacG
              last edited by sdetweil Aug 20, 2021, 12:14 PM Aug 20, 2021, 12:13 PM

              @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 Aug 22, 2021, 1:22 PM Reply Quote 0
              • M Offline
                MacG @sdetweil
                last edited by Aug 22, 2021, 1:22 PM

                @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 Aug 22, 2021, 2:58 PM Reply Quote 0
                • S Offline
                  sdetweil @MacG
                  last edited by Aug 22, 2021, 2:58 PM

                  @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 Aug 23, 2021, 6:19 PM Reply Quote 0
                  • M Offline
                    MacG @sdetweil
                    last edited by Aug 23, 2021, 6:19 PM

                    @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 Aug 24, 2021, 7:55 AM Reply Quote 0
                    • M Offline
                      MacG @MacG
                      last edited by Aug 24, 2021, 7:55 AM

                      @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 Nov 1, 2021, 4:15 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        1/11
                        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