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

Module Regions - Tutorial Requested

Scheduled Pinned Locked Moved Development
9 Posts 4 Posters 6.4k 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.
  • M Offline
    mochman Module Developer
    last edited by mochman Dec 20, 2016, 4:50 PM Dec 20, 2016, 4:49 PM

    You can find information about them here.

    V 1 Reply Last reply Dec 20, 2016, 4:51 PM Reply Quote 0
    • V Offline
      valid8r @mochman
      last edited by Dec 20, 2016, 4:51 PM

      @mochman Thanks, I had/have that link and it is useful. I am trying to understand the way in which main.css defines the regions and how that structure actually works. I’m new to .css and find the code hard to understand. How for example are the horizontal dimensions set for a given region?

      Thanks

      S 1 Reply Last reply Dec 20, 2016, 4:55 PM Reply Quote 0
      • S Offline
        strawberry 3.141 Project Sponsor Module Developer @valid8r
        last edited by Dec 20, 2016, 4:55 PM

        @valid8r a couple of regions as you can see on the picture have full width and the others are generic

        they are placed with top, left, right and bottom properties and position: absolute on the screen

        Please create a github issue if you need help, so I can keep track

        V 1 Reply Last reply Dec 20, 2016, 5:05 PM Reply Quote 0
        • V Offline
          valid8r @strawberry 3.141
          last edited by Dec 20, 2016, 5:05 PM

          @strawberry-3.141 If my questions get to be too frustrating, please feel free to say so and I will stop. So from this thread, how would I know what the right hand border size of a .top.left region was (in other words, how wide is the region)? The code I think from main.css for this is I believe the followingn, but it only defines the top for these regions is 100% of top, what are the width or border dimensions…?

          .region.top.right,
          .region.top.left,
          .region.top.center {
          top: 100%;
          }

          1 Reply Last reply Reply Quote 0
          • B Offline
            broberg Project Sponsor
            last edited by Dec 20, 2016, 5:14 PM

            They have no defined size per say,

            add
            outline: #fff solid;
            to all .regions, that will give you a sense of how they look.

            V 1 Reply Last reply Dec 20, 2016, 5:26 PM Reply Quote 1
            • V Offline
              valid8r @broberg
              last edited by Dec 20, 2016, 5:26 PM

              @broberg Thanks, will do so, but I don’t understand how they can not have a defined size??? how does that work? For example, I have calendar (.top.left), Advent (.top.center) and Weather (.top.right)… however, the default sizes of each region/module are not equal thirds… trying to understand this.

              B 1 Reply Last reply Dec 20, 2016, 5:34 PM Reply Quote 0
              • B Offline
                broberg Project Sponsor @valid8r
                last edited by broberg Dec 20, 2016, 5:36 PM Dec 20, 2016, 5:34 PM

                @valid8r they expand, adapting to the content of the


                They only need positioning and orientation.

                all

                without size constrains will adapt to it’s content and the
                or body it’s placed in.
                You can certainly add width and height constrains to the regions if you feel like it.

                The thing with

                is you can basically place them anywhere you want to, make them any size, make them lay over or under other
                and so on and so on.

                V 1 Reply Last reply Dec 20, 2016, 5:43 PM Reply Quote 1
                • V Offline
                  valid8r @broberg
                  last edited by Dec 20, 2016, 5:43 PM

                  @broberg Interesting… I didn’t know about

                  and am now reading up on it. Thanks for pointing me in the right direction that explains a lot. I’ll try to read up on this before asking any more questions!

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  1 / 1
                  • First post
                    6/9
                    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