<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Module UI Design]]></title><description><![CDATA[<p dir="auto">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?</p>
<p dir="auto">Thanks,</p>
]]></description><link>https://forum.magicmirror.builders/topic/12477/module-ui-design</link><generator>RSS for Node</generator><lastBuildDate>Mon, 18 May 2026 10:02:37 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/12477.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 02 Apr 2020 20:02:43 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Module UI Design on Thu, 02 Apr 2020 22:00:01 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/temisola1" aria-label="Profile: Temisola1">@<bdi>Temisola1</bdi></a> what do you mean inherit the master?<br />
you don’t need to create any new tags…</p>
<p dir="auto">(the forum doesn’t like &lt; , so I will skip it for this discussion)</p>
<pre><code>head
fddfd
/head
body
div
p&gt;some text
table
tr
td
td
td
/tr
/div
</code></pre>
<p dir="auto">the part that starts with div, thru end div, you can insert into the wrapper div innerHtml</p>
<p dir="auto">head and body are controlled by MM</p>
<p dir="auto">there are default classes in ~/MagicMirror/css/main.css<br />
you can add more by adding them to  ~/MagicMirror/css/custom.css</p>
<p dir="auto">you can also have a css file local to the module folder, and include it with the getStyles() method response<br />
(and those can be overridden in the custom.css)</p>
<p dir="auto">Give it a try, you’ll get it pretty quick</p>
]]></description><link>https://forum.magicmirror.builders/post/71713</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/71713</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Thu, 02 Apr 2020 22:00:01 GMT</pubDate></item><item><title><![CDATA[Reply to Module UI Design on Thu, 02 Apr 2020 20:50:57 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a> said in <a href="/post/71710">Module UI Design</a>:</p>
<blockquote>
<p dir="auto">n</p>
</blockquote>
<p dir="auto">Okay, so I I have to create another html tag or will it inherit the master?</p>
]]></description><link>https://forum.magicmirror.builders/post/71712</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/71712</guid><dc:creator><![CDATA[Temisola1]]></dc:creator><pubDate>Thu, 02 Apr 2020 20:50:57 GMT</pubDate></item><item><title><![CDATA[Reply to Module UI Design on Thu, 02 Apr 2020 20:11:40 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/temisola1" aria-label="Profile: Temisola1">@<bdi>Temisola1</bdi></a> nothing MM specific…</p>
<p dir="auto">just design your page like always… understanding that your ‘body’ content should be as specific as possible…</p>
<p dir="auto">a table, or some such, small, say 1/4 page width or smaller… my charts are 400x400 pixels on a 1920/1280 display.<br />
…the head, and body tags themselves are supplied my MM…</p>
<p dir="auto">look at the MM index.html<br />
each ‘position’: value matches with one of those areas… modules are placed from config.js, top to bottom, fifo.<br />
second module is pushed down by 1st in that same area…screen is clipped at the edges (main.css, body overflow:hidden)</p>
]]></description><link>https://forum.magicmirror.builders/post/71710</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/71710</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Thu, 02 Apr 2020 20:11:40 GMT</pubDate></item></channel></rss>