MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

MMM-Calendar Position



  • Hey guys,
    i want to chnge the position of my calendar.
    I changed the position of the clock and it works fine, but the calendar keeps loading at the same place.

    How can i fix this?



  • @rastaa tell us more… show us the config setting



  • i edited the custom.css file:

    .clock{
    position: relative;
    left: 100px;
    top: 20px;
    }

    .calendar{
    position: relative;
    left: 100px;
    top: 100px;
    }

    I changed the pixlenumbers often and nothing changed. The clock works perfectly



  • @rastaa so, there are 2 position settings…

    in config.js is the gross position

    in custom .css is smaller adjustments from there…

    also, not every module has a BIG definition… calendar has 4

    from readme

    symbolClass	Add a class to the cell of symbol.
    titleClass	Add a class to the title's cell.
    timeClass	Add a class to the time's cell.
    tableClass
    

    this last one YOU need to name in the config.js
    and then USE in the custom.css

    you can also use the module position

    as shown in index.html
    
    	< div class="region fullscreen below">< div class="container">< /div>< /div>
    	< div class="region top bar">
    		< div class="container">< /div>
    		< div class="region top left">< div class="container">< /div>< /div>
    		< div class="region top center">< /div>< /div>
    		< div class="region top right">< div class="container">< /div>< /div>
    	< /div>
    	< div class="region upper third"><div>< /div>< /div>
    	< div class="region middle center"><div>< /div>< /div>
    	< div class="region lower third"><div>< br/>< /div>< /div>
    	< div class="region bottom bar">
    		< div class="container">< /div>
    		< div class="region bottom left">< div class="container">< /div>< /div>
    		< div class="region bottom center"><  div class="container">< /div>< /div>
    		< div class="region bottom right">< div class="container">< /div>< /div>
    	< /div>
    	< div class="region fullscreen above">< div class="container">< /div>< /div>
    

    the space in the names is replaced by an underscore when u use it in config.js
    bottom center = bottom_center



  • thank you very much 🙂

    I am a newbie, sorry for that.

    So i have to add all 4 classes in the custom.css and add some pixles ?

    I just want the whole calendar to be 100px more to the right.


  • Project Sponsor Module Developer

    @rastaa

    I just want the whole calendar to be 100px more to the right.

    In that case, assuming you mean the default “calendar” module, these values should move the entire module. Adjust to your liking in the custom.css file.

    .calendar {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
    }
    
    

Log in to reply