MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    MMM-Calendar Position

    Development
    3
    6
    658
    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.
    • R
      rastaa last edited by

      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?

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @rastaa last edited by

        @rastaa tell us more… show us the config setting

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • R
          rastaa last edited by rastaa

          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

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @rastaa last edited by

            @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"><d iv class="container">< /div>< /div>
            		< div class="region top right">< div class="container">< /div>< /div>
            	< /div>
            	< div class="region upper third"><div class="container">< /div>< /div>
            	< div class="region middle center"><div class="container">< /div>< /div>
            	< div class="region lower third"><div class="container">< 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

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • R
              rastaa last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • Mykle1
                Mykle1 Project Sponsor Module Developer last edited by

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

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy