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