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.

    Module Region question

    Scheduled Pinned Locked Moved Custom CSS
    21 Posts 3 Posters 4.8k Views 3 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.
    • G Offline
      greedyvegan
      last edited by

      please forgive me if this has been covered but I’ve been looking for a week for a solution…
      is it possible to occupy the left middle and center of “top_bar”, “upper_third”, “middle_center”, “lower_third” and “bottom_bar” with multiple modules the way that bottom/top: left center and right works individually?

      I’ve used this as a template
      alt text

      I have the MMM-text-clock and MMM-WifiPassword as top right
      I have MMM- googlephotos and MMM-calendarext3, MMM-onspotify and word of the day is top left (WOTD is only visible when spotify isn’t playing)
      I put MMM-EveryNews is lower_third, because it centered the module

      Screenshot 2024-03-10 at 2.43.54 PM.png

      the custom css file doesn’t modify the position,
      but “.region.bottom.right” works.

      I’ve tried changing the module css file, that works
      but I’m trying to avoid using that.

      do I have to add (module) to (region) and play around with the left: __px right: __px for that to work properly?
      because i’d add spofity and WOTD to the lower third with the news and move it left

      thanks for the assistance/help.

      S 2 Replies Last reply Reply Quote 0
      • S Away
        sdetweil @greedyvegan
        last edited by

        @greedyvegan you can override the module css in custom.css

        each area is the same , stack top to bottom

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @greedyvegan I’m not sure what you were asking. can you be more specific? what module

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer
            last edited by

            Yes. It’s possible. What you want to do is specific, but not complicated.

            Take a look at https://forum.magicmirror.builders/topic/18175/looking-for-some-help-with-positioning-modules/2?_=1710178976017

            The "E" in "Javascript" stands for "Easy"

            G 1 Reply Last reply Reply Quote 0
            • G Offline
              greedyvegan @BKeyport
              last edited by

              @BKeyport

              thank you very much.
              I now know the purpose of the display flex being inline.
              the regions are “block” by default.

              Screenshot 2024-03-11 at 5.01.35 PM.png

              G 1 Reply Last reply Reply Quote 0
              • G Offline
                greedyvegan @greedyvegan
                last edited by

                I’ve been having an hard time with my module/positions
                so I added borders to the regions in custom.css to help guide me
                and put “position:relative” to each module and they fall in line

                .region.top.right     {position:fixed;top:1px;right:1px;height:400px;width: 325px;border:5px solid #F00;border-radius:20px;}
                .region.top.center    {position:fixed;top:1px;left:575px;height:400px;width:325px;border:5px solid #F00;border-radius:20px;margin-left:auto;margin-right:auto}
                .region.top.left      {position:fixed;top:1px;left:1px;height:550px;width:400px;border:5px solid #F00;border-radius:20px;}
                .region.upper.third   {position:fixed;top:485px;left:410px;height:140px;width:660px;border:5px solid #F00;border-radius:20px;}
                .region.bottom.left   {position:fixed;left:1px;bottom:1px;width:350px;height:500px;border:5px solid #F00;border-radius:20px;}
                .region.bottom.right  {position:fixed;right:1px;bottom:1px;width:350px;height:500px;border:5px solid #F00;border-radius:20px;}
                .region.middle.center {position:fixed;top:905px;left:1px;width:1070px;height:680px;border:5px solid #F00;border-radius:20px;}
                .region.bottom.center {position:fixed;bottom:1px;left:540px;height:500px;width:350px;border:5px solid #F00;border-radius:20px;margin-left:auto;margin-right:auto}
                .region.lower.third   {position:fixed;top:1330px;left:1px;width:1070px;height:150px;border:5px solid #F00;border-radius:20px;}
                

                Screenshot 2024-03-18 at 11.55.07 AM.png

                I put an error in my config file for the sake of the display
                I hope this helps someone

                S 2 Replies Last reply Reply Quote 0
                • S Away
                  sdetweil @greedyvegan
                  last edited by sdetweil

                  @greedyvegan yes, you could have put a background color too…
                  in custom.css and not needed the error…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @greedyvegan what is the hard time?

                    the positions are the top left edge of each, and no clip or wrap on the right or bottom

                    bottom of screen has overflow hidden

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    G 2 Replies Last reply Reply Quote 0
                    • G Offline
                      greedyvegan @sdetweil
                      last edited by

                      @sdetweil said in Module Region question:

                      @greedyvegan what is the hard time?

                      well overall, I’m not as savvy as most; but I’m reading and learning.

                      • I try to stray away from modifying the module’s css & js,
                        but I edit the module’s css then copy it to the custom css and revert the file. - the default modules, I edited the js files to stop the fading.
                      • some modules work and when I add a new one, it stops
                        (MMM-GooglePhotos & MMM-text-clock) worked, but when I added MMM-NewsAPI, they both stopped and the NewsAPI never showed up.
                      • I can’t understand the one call api thing for the weather

                      what also doesn’t work is ipWhitelist [], (address: “0.0.0.0”)
                      I read a post where you explained you never used VNC
                      i’d love to configure my mirror from my computer and not through the pi
                      the webpage always says “safari can’t open the page”

                      • I’d love to access the pi hard drive from my computer, I think that would make things easy, ssh@raspberry pi works; so I have access via terminal.

                      control shift & I via VNC truncates the screen and makes it difficult to view, at that point the pi slows down (I am using a usb drive for the pi os, but I don’t notice any speed difference)
                      I THINK the more modules or text in the config & css file I add, the slower it gets.

                      sorry to dump

                      I installed bullseye on my pi 4 because bookworm wouldn’t allow me to rotate the screen on VNC

                      S 1 Reply Last reply Reply Quote 0
                      • G Offline
                        greedyvegan @sdetweil
                        last edited by

                        forgot to add, previously when I would modify the config file, any time I would make a change and save the file, MagicMirror would quit and reopen, that doesn’t happen anymore. I have to manually refresh the mirror

                        • I have a question:
                        {module: "monopoly",
                        position: "lower_third",
                        config: {
                        url: "https://monopoly.com"
                        }
                        },
                        

                        the last part of the code (url: “monopoly.com”)
                        doesn’t require a comma after it as long as the squiggly bracket closes the code?

                        S 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • 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