MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

Adding new region positions top_center1 and top_center2



  • I use my magic mirror in landscape format. And I two place four modules side by side. My idea was to divide the top_center position in two.

    Therefore I added new region definitions in the custom.css:

    .region.top.center1 {
      left: 33%;
      -moz-transform: translateX(-33%);
      -o-transform: translateX(-33%);
      -webkit-transform: translateX(-33%);
      -ms-transform: translateX(-33%);
      transform: translateX(-33%);
    }
    
    .region.top.center2 {
      left: 60%;
      -moz-transform: translateX(-33%);
      -o-transform: translateX(-33%);
      -webkit-transform: translateX(-33%);
      -ms-transform: translateX(-33%);
      transform: translateX(-33%);
    }
    
    .region.top.center1,
    .region.top.center2 {
      top: 100%;
    }
    

    And use in the config.js

    module: 'MMM-Fuel',
    position: 'top_center1', 
    config: {
    

    Of course, this doesn’t work. I read something, about a region class definition. But I didn’t found, what else I have to do. Any ideas what is missing?


  • Moderator

    I never tried, but I guess you need to edit index.html located in MagicMirror root folder to define the new regions



  • @yawns : Thanks a lot, that’s it. Now it works.



  • @sindbad6 said in Adding new region positions top_center1 and top_center2:

    @yawns : Thanks a lot, that’s it. Now it works.

    Hi
    I can’t get it to work, what did you do in the index.html? My modules shows up and then dissapears…

    EDIT: Got it! If someone else want to know:

    		div class="region top center"><div></div>
    		div class="region top center1"><div></div>
    		div class="region top center2"><div></div>
    		div class="region top right"><div></div>
    
    


  • @zeular Yeah, that’s the way I did it too.