MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Module UI Design

    Scheduled Pinned Locked Moved Development
    4 Posts 2 Posters 824 Views 2 Watching
    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.
    • T Offline
      Temisola1
      last edited by

      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?

      Thanks,

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

        @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)

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • T Offline
          Temisola1
          last edited by

          @sdetweil said in Module UI Design:

          n

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

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

            @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)

            head
            fddfd
            /head
            body
            div
            p>some text
            table
            tr
            td
            td
            td
            /tr
            /div
            

            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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            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 Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy