<?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[How to write and test CSS without going crazy..]]></title><description><![CDATA[<p dir="auto">Hey everyone,</p>
<p dir="auto">first post here so apologies if I’ve got some etiquite wrong or not been able to find a previous post that covers this.</p>
<p dir="auto">I’d like to get into customising the font, size etc. of my mirror and modules, but don’t know how to get a live ‘preview’ of the Mirror as I’m writing the code? I’ve recently learned CSS on Codepen, so I’m used to having the instant feedback…</p>
<p dir="auto">Can i run a windowed version of MagicMirror and change the CSS file? Is this an awful idea?</p>
<p dir="auto">Open to all suggestions!</p>
<p dir="auto">M</p>
]]></description><link>https://forum.magicmirror.builders/topic/13533/how-to-write-and-test-css-without-going-crazy</link><generator>RSS for Node</generator><lastBuildDate>Tue, 21 Apr 2026 00:33:30 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/13533.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 26 Aug 2020 09:37:40 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to How to write and test CSS without going crazy.. on Mon, 31 Aug 2020 13:25:28 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/80840">How to write and test CSS without going crazy..</a>:</p>
<blockquote>
<p dir="auto">if u install winscp or bitvise ssh client on your PC, then u can double click edit files on your pi, just like u do on windows</p>
</blockquote>
<p dir="auto">If anyone is looking at this issue in the future and trying to do this on Mac see here: <a href="https://www.raspberrypi.org/documentation/remote-access/ssh/sshfs.md" target="_blank" rel="noopener noreferrer nofollow ugc">https://www.raspberrypi.org/documentation/remote-access/ssh/sshfs.md</a></p>
]]></description><link>https://forum.magicmirror.builders/post/80982</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/80982</guid><dc:creator><![CDATA[cluelesscarter]]></dc:creator><pubDate>Mon, 31 Aug 2020 13:25:28 GMT</pubDate></item><item><title><![CDATA[Reply to How to write and test CSS without going crazy.. on Sun, 30 Aug 2020 10:51:12 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/80840">How to write and test CSS without going crazy..</a>:</p>
<blockquote>
<p dir="auto">so u can run mm on pi, view and edit styles on chrome/Firefox on PC, edit pi custom.css directly from PC, over ssh ( I use notepad++ as my PC editor), save custom.css, then refresh browser page to see new styles applied via custom.css<br />
all with only one copy of MagicMirror installed.</p>
</blockquote>
<p dir="auto">Nice! I hadn’t figured out how to edit the rpi files directly from PC without using VNC, which effectively means you are still using the pi… Thanks!</p>
<p dir="auto">By ‘clone’, i meant there were effectively two completely seperate versions of the MM running…</p>
]]></description><link>https://forum.magicmirror.builders/post/80935</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/80935</guid><dc:creator><![CDATA[cluelesscarter]]></dc:creator><pubDate>Sun, 30 Aug 2020 10:51:12 GMT</pubDate></item><item><title><![CDATA[Reply to How to write and test CSS without going crazy.. on Thu, 27 Aug 2020 12:24:28 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/cluelesscarter" aria-label="Profile: cluelesscarter">@<bdi>cluelesscarter</bdi></a> can u describe that again.</p>
<p dir="auto">clone mirror on your desktop?</p>
<p dir="auto">if u have the config set to</p>
<pre><code>address:"0.0.0.0",
ipWhitelist:[],
</code></pre>
<p dir="auto">then u can open your PC browser on the pi mm site http://pi_ip:8080</p>
<p dir="auto">if u install winscp or bitvise ssh client on your PC, then u can double click edit files on your pi, just like u do on windows.</p>
<p dir="auto">so u can run mm on pi, view and edit styles on chrome/Firefox on PC, edit pi custom.css directly from PC, over ssh ( I use notepad++ as my PC editor), save custom.css, then refresh browser page to see new styles applied via custom.css</p>
<p dir="auto">all with only one copy of MagicMirror installed.</p>
]]></description><link>https://forum.magicmirror.builders/post/80840</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/80840</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Thu, 27 Aug 2020 12:24:28 GMT</pubDate></item><item><title><![CDATA[Reply to How to write and test CSS without going crazy.. on Thu, 27 Aug 2020 11:32:23 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/80789">How to write and test CSS without going crazy..</a>:</p>
<blockquote>
<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/cluelesscarter" aria-label="Profile: cluelesscarter">@<bdi>cluelesscarter</bdi></a> not windowed, but you can minimize. alt, spacebar, n. same as on windows.<br />
but, if u open the developers window ctrl-shift-i on the keyboard, and select the elements tab, u can edit the styles directly. and then you know what to.put in css/custom.css.  then u can reload with ctrl-r or refresh in the developer’s pane</p>
</blockquote>
<p dir="auto">Thanks man! I actually found creating a ‘clone’ mirror on my desktop and editing it using localhost within chrome was a lot quicker, if anyone wants to find out how see this guide <a href="https://forum.magicmirror.builders/topic/548/building-mirror-without-programing/2">https://forum.magicmirror.builders/topic/548/building-mirror-without-programing/2</a></p>
]]></description><link>https://forum.magicmirror.builders/post/80838</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/80838</guid><dc:creator><![CDATA[cluelesscarter]]></dc:creator><pubDate>Thu, 27 Aug 2020 11:32:23 GMT</pubDate></item><item><title><![CDATA[Reply to How to write and test CSS without going crazy.. on Wed, 26 Aug 2020 12:48:47 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/cluelesscarter" aria-label="Profile: cluelesscarter">@<bdi>cluelesscarter</bdi></a> not windowed, but you can minimize. alt, spacebar, n. same as on windows.</p>
<p dir="auto">but, if u open the developers window ctrl-shift-i on the keyboard, and select the elements tab, u can edit the styles directly. and then you know what to.put in css/custom.css.  then u can reload with ctrl-r or refresh in the developers pane</p>
]]></description><link>https://forum.magicmirror.builders/post/80789</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/80789</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Wed, 26 Aug 2020 12:48:47 GMT</pubDate></item></channel></rss>