4. Module Regions - Tutorial Requested
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Module Regions - Tutorial Requested

  • V

    Can someone explain in basic conceptual terms how the module regions (’.top., .third., … etc.’) are designed to work? I am trying to understand so I can enlarge or shrink the 4 boundaries for a given region but don’t understand how the .css works in this case.

    I suspect that others might find this useful as well and appreciate the time anyone takes to put something together.

    Many thanks in advance.

    0
  • Module Developer

    You can find information about them here.

    0
    V
     1 Reply
  • V

    @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

    0 1 Reply

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

    0
    V
     1 Reply
  • V

    @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%;
    }

    0
  • Module Developer

    They have no defined size per say,

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

    1
    V
     1 Reply
  • V

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

    0 1 Reply
  • Module Developer

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

    1
    V
     1 Reply
  • V

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

    0