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

Custom CSS

  • I tried to do my one CSS and move the Modules in custom positions:
    I edited my css to the following:

      left : 100 px,
      top: 500 px

    But this doesn’t work, it changes nothing…

  • Project Sponsor Module Developer


    Use these. Adjust to your liking:

    .MMM-Mail {
      margin-right: 0px;
      margin-left: 0px;
      margin-top: 0px;
      margin-bottom: 0px;

  • @Mykle1 qwouldn’t both those also need

    position: absolute

    as the default is


  • Project Sponsor Module Developer


    I don’t know. I’m still guessing at this stuff. 🙂

  • @sdetweil where do I need to change that?

  • @Mykle1 magicMirror has a bunch of regions, containers of content, with defined positions.

    the browser doesn’t KNOW anything about MM design, its just html and css. just like a normal page

    so if u add content in a ‘position’, MM inserts the modules content (returned from getDom()) into the specific physical region… you would EXPECT the content to be positioned there… so relative to the container.

    if the user said top_right, and for whatever reason, the module developer wanted it to be top_left, by the time the module startup gets called, its too late, MM will put whatever content into the config.js ‘position’ container

    now, you have to tell the browser, no, not THERE… but HERE… position me where I tell you, in absolute coordinates… if u don’t SAY absolute, the your adjustments (x/y, width/height) are relative to the container the content is in

    this will lead to some crazy results…

    module x is in the uppoer right, but you firced YOUR module to the upper right, and well, you will get what you get… some overlay, some intermixed…

  • Project Sponsor Module Developer


    Thanks for the info. The entry I posted has always worked for me. Go figure.

  • @rxlDavid your proposed css class

      left : 100px;
      top: 500px;

    u also had syntax errors, spaces between number and px,
    each standalone item ends with ; not comma ,

    u can open the developers window, f12 or ctrl-shift-i on the keyboard) (and can open a browser on the page from your desktop and do the debug there), ’
    select the elements tab, and navigate thru the position area to find you module content, and click on an element and the dev window will show you the css class hierarchy (bottom at top of page). etc…

    u can fix the css file, and then refresh the page to examine the differences… repeat til you get what you want

Log in to reply