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

Move a module with custom.css

  • 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:


    Here is the custom.css that I made:

     * Magic Mirror                                      *
     * Custom CSS                                        *
     *                                                   *
     * By Michael Teeuw           *
     * 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.

  • Module Developer

    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;

  • Project Sponsor

    .mmm-suncalc {
    	position: absolute;
    	top: 100px;
    	left: 30px;

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

Log in to reply