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.

    How to write and test CSS without going crazy..

    Scheduled Pinned Locked Moved Development
    6 Posts 2 Posters 1.1k 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.
    • C Offline
      cluelesscarter
      last edited by

      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

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

        @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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 2
        • C Offline
          cluelesscarter
          last edited by

          @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

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

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            C 1 Reply Last reply Reply Quote 1
            • C Offline
              cluelesscarter
              last edited by

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

              1 Reply Last reply Reply Quote 0
              • C Offline
                cluelesscarter @sdetweil
                last edited by

                @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

                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