MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    Need help with resizing regions

    Custom CSS
    7
    8
    502
    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.
    • T
      techlady last edited by

      Hi everyone,
      I have my magic mirror running on a PI 4. It is starting to look like I want, but I need help resizing everything so that it fits on my tv. The tv is 42 in. As you will see in the picture, I have the default weather module, weekly view of Cal Ext2 , and a different module in the top right region. In the top left region are the clock, NFL, and a Movie titles module. In that top bar are the newsfeed and compliments module. The bottom bar has the month view of Cal Ext 2. Any suggestions would be greatly appreciated.

      0476BD34-251B-4E5C-BAFE-CD784266CEC2.jpeg

      S mumblebaj M M ankonaskiff17 5 Replies Last reply Reply Quote 0
      • S
        sdetweil @techlady last edited by

        @techlady too much stuff. the regions grow longer as more stuff is added.

        u can make the font smaller, but makes it harder to read

        others have gone to pages, and rotate thru to manage all the info

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • mumblebaj
          mumblebaj Project Sponsor @techlady last edited by

          @techlady As Sam mentioned, MMM-Pages is good to use. I use this and split my modules over different pages and I use the MMM-page-indicator with it. Works best for me.

          1 Reply Last reply Reply Quote 0
          • M
            MMRIZE @techlady last edited by

            @techlady
            Unfortunately, MMM-CalendarExt2 doesn’t respect MM’s default show/hide mechanism, so you need some tweek to achieve your goal with some paging modules.
            I’m regretting that I made that way, I thought it was a nice idea at that time. Anyway CalExt2 is going to its life ends due to dying dependencies. So at this moment I have no plan to improve. (Maybe new module instead?)

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

              @techlady First of all I would adjust the borders at the custom.css

              :root {
              
                --gap-body-top: 40px;
                --gap-body-right: 40px;
                --gap-body-bottom: 40px;
                --gap-body-left: 40px;
                }
              

              The 40 pixels are examples.

              1 Reply Last reply Reply Quote 0
              • mumblebaj
                mumblebaj Project Sponsor @MMRIZE last edited by

                @mmrize I think the “fixed” feature should work for that?

                BKeyport 1 Reply Last reply Reply Quote 0
                • BKeyport
                  BKeyport Module Developer @mumblebaj last edited by BKeyport

                  Here’s a tip. The sizing is all within the main.css file.

                  do not adjust main.css

                  add your changes to custom.css in the same directory.

                  As an example, here’s how I adjusted mine on my mirror. It provides a thin left side, wide middle, and other minor changes without too much of a hassle.

                  The top blank area in my mirror is for an external ran instance of OMX for my security camera. The bottom blanks is currently unused because of how my mirror is set up.

                  /* Global changes */
                  /* Use the entire screen */
                  
                  html { 
                  	cursor: none;
                  }
                  
                  body {
                  	margin: 0px;
                  	height: 100vh;
                  	width: 100vw;
                   }
                  
                  /* Adjust all modules */ 
                   
                   .module {
                          padding: 2px;
                          margin-bottom: 0px;
                   }
                  
                  /* disable dimmed text */
                  
                  .dimmed {
                  	color: #FFFFFF
                  }
                  
                  
                  /* Region mods */
                  
                  .region.left {
                  	text-align:center;
                  	} 
                  
                  .region.right {
                  	right: 0%;
                  }
                  
                  .region.top.center {
                    left: 52%;
                    transform: translateX(-50%);
                  }
                  
                  .region.fullscreen {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;
                    pointer-events: none;
                   }
                   
                  .region.fullscreen * {
                  	background: rgba(0,0,0,0.7);
                  }
                  

                  Capture.PNG

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

                  1 Reply Last reply Reply Quote 0
                  • ankonaskiff17
                    ankonaskiff17 @techlady last edited by

                    @techlady Here is my project in progress. My intent is to mount Pi to back of TV and treat MM as another HDMI input.
                    As others have said, module writers that stick with the convention of using main.css to format their module make it real easy to format multiple modules by using the appropriate block of main.css and dropping it in custom.css.
                    Gets sticky when a module author does their own formatting top to bottom.
                    20210928_200307.jpg

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy