Navigation

    MagicMirror Forum

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

    Move a module with custom.css

    Development
    3
    4
    406
    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.
    • E
      Egnos last edited by Egnos

      Hello to all,
      I’m a beginner and I can’t move to positions other than the standard settable ones in config.js.
      For example “top_bar”, “bottom_bar”, “upper_third”, etc…

      I tried to build a “custom.css” to move the “mmm-suncalc” module down (the module pictured below left), as shown in the following image:

      2020-03-05-163618-1600x795-scrot-MOD

      Here is the custom.css that I made:

      /*****************************************************
       * Magic Mirror                                      *
       * Custom CSS                                        *
       *                                                   *
       * By Michael Teeuw http://michaelteeuw.nl           *
       * MIT Licensed.                                     *
       *                                                   *
       * Add any custom CSS below.                         *
       * Changes to this files will be ignored by GIT. *
       *****************************************************/
      
      header {
        text-transform: uppercase;
        font-size: 15px;
        font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
        font-weight: 400;
        border-bottom: 1px solid #666;
        line-height: 15px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #999;
      }
      
      body {
        margin: 60px;
        position: absolute;
        height: calc(100% - 120px);
        width: calc(100% - 120px);
        background: #000;
        color: #aaa;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;
        font-size: 2em;
        line-height: 1.5em;
        -webkit-font-smoothing: antialiased;
       }
      
      .mmm-suncalc, div#module_7_mmm-suncalc {
      	position: absolute;
      	top: 100px;
      	left: 30px;
      	bottom: 10px;
      	padding-left: 10px;
      }
      

      But the form does not move!

      Where am I wrong?
      Can you help me?

      Thanks so much.

      1 Reply Last reply Reply Quote 0
      • BKeyport
        BKeyport Module Developer last edited by

        You’re likely going to have to move the standard region to your liking. For example, I have set my left and right regions to a specific size to make things even (I’ve also centered everything)

        /* Left Regions adjustment */
        .region.left {
        	text-align: center;
        	min-width: 500px;
        }
        
        /* Right Regions - set minimum width */
        .region.right {
        	text-align: center;
        	min-width: 500px;
        }
        
        1 Reply Last reply Reply Quote 0
        • broberg
          broberg Project Sponsor last edited by

          .mmm-suncalc {
          	position: absolute;
          	top: 100px;
          	left: 30px;
          }
          
          1 Reply Last reply Reply Quote 0
          • E
            Egnos last edited by

            Ok then I try!
            Thanks guys for the support. 😉

            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