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.


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.