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

Module UI Design

  • How can I go about designing the UI for my module. Is there any site I can use as a playground to design the UI?


  • @Temisola1 nothing MM specific…

    just design your page like always… understanding that your ‘body’ content should be as specific as possible…

    a table, or some such, small, say 1/4 page width or smaller… my charts are 400x400 pixels on a 1920/1280 display.
    …the head, and body tags themselves are supplied my MM…

    look at the MM index.html
    each ‘position’: value matches with one of those areas… modules are placed from config.js, top to bottom, fifo.
    second module is pushed down by 1st in that same area…screen is clipped at the edges (main.css, body overflow:hidden)

  • @sdetweil said in Module UI Design:


    Okay, so I I have to create another html tag or will it inherit the master?

  • @Temisola1 what do you mean inherit the master?
    you don’t need to create any new tags…

    (the forum doesn’t like < , so I will skip it for this discussion)

    p>some text

    the part that starts with div, thru end div, you can insert into the wrapper div innerHtml

    head and body are controlled by MM

    there are default classes in ~/MagicMirror/css/main.css
    you can add more by adding them to ~/MagicMirror/css/custom.css

    you can also have a css file local to the module folder, and include it with the getStyles() method response
    (and those can be overridden in the custom.css)

    Give it a try, you’ll get it pretty quick

Log in to reply