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.

    MMM-Todoist

    Scheduled Pinned Locked Moved Troubleshooting
    23 Posts 4 Posters 6.6k Views 4 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
      last edited by

      the fastest way to learn what css needs to/can be changed, is to. open the developers window, select the elements tab and navigate the Dom to the element u want to modify.

      it’s css class tree is shown on the bottom of the dev window. nearer the element on the right.
      the individual classes are shown on the right, nearer to element on the top.
      one can add/edit/remove css entries to change the displayed behavior.

      once u figure out what u need (styles) and where (what element) it’s easy to create a custom css entry that looks like that

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • B Offline
        bdream
        last edited by

        oh Sam! what you are explaining here (…select the elements tab and navigate the Dom…), sound all Greek to me :man_zombie:
        How to do it via ssh?

        –
        cheers, bdream

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

          @bdream cannot. must do. on mirror app

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • B Offline
            bdream
            last edited by

            sounds that the blocking point.
            lets see if I get an keyboard connectet. That will be the right way?

            –
            cheers, bdream

            1 Reply Last reply Reply Quote 0
            • B Offline
              bdream
              last edited by

              @sdetweil Sam, can you please guide me a bit.
              Just connected the keyboard but as estimated after short thinking there is nothing I can do while MM is running … but I guess I need it running.

              –
              cheers, bdream

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

                @bdream

                before starting examine the ~/MagicMirror/index.html file, this is the layout of the page, and all content is inserted into these positions (position: of module definition in config.js)

                hit keyboard keys, ctrl, shift and letter i.

                dev window. opens on right side of screen
                select the tab labeled elements
                expand the tree to locate the module content. (module position is important)

                look at time value,
                Screenshot at 2020-05-25 17-09-40.png

                then select the time value in dom tree

                Screenshot at 2020-05-25 17-11-54.png

                notice the class list, bottom of the screen circled, and the individual classes are shown on the right, top is closest to the element, bottom is closest to t main.css

                u can edit the top right, and add element styles.

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • B Offline
                  bdream
                  last edited by

                  should “hit keyboard keys, ctrl, shift and letter i” be possible while my MM is running?
                  Doesn’t work…

                  –
                  cheers, bdream

                  S 1 Reply Last reply Reply Quote -1
                  • S Offline
                    sdetweil @bdream
                    last edited by

                    @bdream must be while mm is running
                    you can do it on a remote browser too (forgot that) using chrome

                    Windows PC to pi server

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

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

                      @bdream all 3 keys at once

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • B Offline
                        bdream
                        last edited by

                        @sdetweil 8f033e0d-f5e0-4e19-89cd-c47a4108de3f-grafik.png
                        such an awesome tool MagicMirror is.
                        Every time I’m in contact with this forum I learn new nice things.

                        Can’t see how to fix this the empty space mentioned by @Stoffbeuteluwe

                        –
                        cheers, bdream

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 2 / 3
                        • 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