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

How to write and test CSS without going crazy..



  • Hey everyone,

    first post here so apologies if I’ve got some etiquite wrong or not been able to find a previous post that covers this.

    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…

    Can i run a windowed version of MagicMirror and change the CSS file? Is this an awful idea?

    Open to all suggestions!

    M



  • @cluelesscarter not windowed, but you can minimize. alt, spacebar, n. same as on windows.

    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



  • @sdetweil said in How to write and test CSS without going crazy..:

    @cluelesscarter not windowed, but you can minimize. alt, spacebar, n. same as on windows.
    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

    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 https://forum.magicmirror.builders/topic/548/building-mirror-without-programing/2



  • @cluelesscarter can u describe that again.

    clone mirror on your desktop?

    if u have the config set to

    address:"0.0.0.0",
    ipWhitelist:[],
    

    then u can open your PC browser on the pi mm site http://pi_ip:8080

    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.

    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

    all with only one copy of MagicMirror installed.



  • @sdetweil said in How to write and test CSS without going crazy..:

    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
    all with only one copy of MagicMirror installed.

    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!

    By ‘clone’, i meant there were effectively two completely seperate versions of the MM running…



  • @sdetweil said in How to write and test CSS without going crazy..:

    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

    If anyone is looking at this issue in the future and trying to do this on Mac see here: https://www.raspberrypi.org/documentation/remote-access/ssh/sshfs.md


Log in to reply