• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 953 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.
  • S Offline
    sdetweil @cluelesscarter
    last edited by Aug 26, 2020, 12:48 PM

    @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 Aug 27, 2020, 11:32 AM

      @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 Aug 27, 2020, 12:24 PM Reply Quote 0
      • S Offline
        sdetweil @cluelesscarter
        last edited by Aug 27, 2020, 12:24 PM

        @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 Aug 31, 2020, 1:25 PM Reply Quote 1
        • C Offline
          cluelesscarter
          last edited by Aug 30, 2020, 10:51 AM

          @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 Aug 31, 2020, 1:25 PM

            @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
            1 / 1
            • First post
              6/6
              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