Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.

    For the life of me

    Troubleshooting
    4
    5
    1905
    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.
    • Mykle1
      Mykle1 Project Sponsor Module Developer last edited by

      Hi all.

      As you can see from the picture below, I was successful in getting the appearance of SystemStats to my liking. The alignment was more “centered”, but not exactly, so I moved the text to align to the left. Just the way I wanted it. Also, the default text was “dimmed” and I didn’t like that much either, so I changed that to “normal”. This I did on my own, without asking for help. No small feat for me and very satisfying. (Hold the applause)

      Also in the picture, below SystemStats, is NetworkScanner. (Here’s where the topic will make sense). You can see that NetworkScanner is slightly indented. Now, I have been trying but, (enter topic name here) I can’t find where to edit this as I did with SystemStats, so that I can align it to the left margin, as I did with SystemStats.

      0_1487021883675_IMG_1738edit.jpg

      If someone would point me in the right direction, I would be greatly obliged.

      ? strawberry 3.141 2 Replies Last reply Reply Quote 0
      • ?
        A Former User @Mykle1 last edited by

        @Mykle1 In your custom.css file add:

        .networkscanner {
            margin-left: -20px;
        }
        

        Replace the class “.networkscanner” with the actual class on the module wrapper. I just took a guess at it being .networkscanner.

        1 Reply Last reply Reply Quote 0
        • strawberry 3.141
          strawberry 3.141 Project Sponsor Module Developer @Mykle1 last edited by

          @Mykle1 he’s using the fontawesome class fa-ul, which has set a margin-left to (30em / 14)

          .MMM-NetworkScanner .fa-ul {
            margin-left: 0px;
          }
          
          Mykle1 1 Reply Last reply Reply Quote 1
          • Mykle1
            Mykle1 Project Sponsor Module Developer @strawberry 3.141 last edited by

            @strawberry-3.141 said in For the life of me:

            .MMM-NetworkScanner .fa-ul {
            margin-left: 0px;
            }

            First, thanks again

            This worked but it pushed the “mobile” icon to the very edge of the mirror, so I tried 10px, 20px and 30px, until I got this. Nice, but not exactly how I pictured it.
            0_1487026318051_IMG_1741edit.jpg

            So, I went to the config.js and removed “mobile” from the icon designation, so it looked like this, icon: “”}, That removed the icons but the names were still exactly where they were, as if the space for the icons was still occupied. So, I went back to the “margin-left: 0px;”. That was damn close! I wound up at margin-left: 2px;. Just right!
            0_1487029387090_IMG_1743edit.jpg

            Now I’m going to try to see if I can figure out how to put the mobile icon on the right of the name. I’m not asking for help on that, yet.

            1 Reply Last reply Reply Quote 2
            • I
              izanbard last edited by

              @Mykle1 lve your enthusiasm

              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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy