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

Go East, young icon!

Scheduled Pinned Locked Moved Solved Troubleshooting
22 Posts 5 Posters 14.7k Views 6 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
    slametps @Mykle1
    last edited by Mar 5, 2017, 10:41 PM

    @Mykle1 said in Go East, young icon!:

    @slametps said in Go East, young icon!:

    the space on the left of the icon. How to remove it?

    Strawberry helped me with this. I’m not trying to answer for him, but while you’re waiting, this is what he did for me.

    Add this to your custon.css file.

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

    /* This aligned NetworkScanner to the left margin. Thanks to Strawberry-3.141 */

    I’m using this on my custom.css, but still no luck.

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

    the icon still has space I mention earlier.

    regards,

    Slamet PS

    S 1 Reply Last reply Mar 6, 2017, 11:05 AM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @slametps
      last edited by Mar 6, 2017, 11:05 AM

      @slametps for me this works

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

      Please create a github issue if you need help, so I can keep track

      S 1 Reply Last reply Mar 6, 2017, 2:10 PM Reply Quote 0
      • S Offline
        slametps @strawberry 3.141
        last edited by slametps Mar 6, 2017, 2:10 PM Mar 6, 2017, 2:10 PM

        @strawberry-3.141 said in Go East, young icon!:

        @slametps for me this works

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

        this style will cause the icon has a left-margin about 35px. what I want is the icon is left-aligned without a margin, and set margin-left to 0 or 1px is not working as expected.

        regards,

        Slamet PS

        S 1 Reply Last reply Mar 6, 2017, 2:12 PM Reply Quote 0
        • S Offline
          strawberry 3.141 Project Sponsor Module Developer @slametps
          last edited by Mar 6, 2017, 2:12 PM

          @slametps can you share a screenshot? for me its aligned to the left

          Please create a github issue if you need help, so I can keep track

          S 1 Reply Last reply Mar 7, 2017, 12:21 AM Reply Quote 0
          • S Offline
            slametps @strawberry 3.141
            last edited by Mar 7, 2017, 12:21 AM

            @strawberry-3.141 said in Go East, young icon!:

            @slametps can you share a screenshot? for me its aligned to the left

            0_1488845973500_MM-network_scanner-align_left.jpg

            using following css:

            .MMM-NetworkScanner .fa-ul {
              margin-left: 0px; /* This aligned NetworkScanner to the left margin */
              width: 35 px; /* If you remove this line it will be the same width as the widest module in the region, this can lead to a big gap, thats why i limited it to 130px if you add devices with longer names you might want to increase this value */
            }
            
            .MMM-NetworkScanner .fa-li {
              position: relative; /* This put the icon on the right side */
              float: left;
              left: initial;
              margin-left: 0px;
            }
            

            There are spaces between icon in NetworkScanner module and the left-edge. Is it possible to make it full left-aligned?

            regards,

            Slamet PS

            S 1 Reply Last reply Mar 7, 2017, 10:25 AM Reply Quote 0
            • S Offline
              strawberry 3.141 Project Sponsor Module Developer @slametps
              last edited by Mar 7, 2017, 10:25 AM

              @slametps replace your rules with

              .MMM-NetworkScanner .fa-ul {
                  margin-left: 35px;
              }
              
              .MMM-NetworkScanner .fa-li {
                  left: -35px;
                  text-align: initial;
              }
              

              Please create a github issue if you need help, so I can keep track

              S 1 Reply Last reply Mar 7, 2017, 1:58 PM Reply Quote 0
              • S Offline
                slametps @strawberry 3.141
                last edited by Mar 7, 2017, 1:58 PM

                @strawberry-3.141 said in Go East, young icon!:

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

                .MMM-NetworkScanner .fa-li {
                left: -35px;
                text-align: initial;
                }

                Yap, this works. Thx a lot, @strawberry-3-141.

                regards,

                Slamet PS

                1 Reply Last reply Reply Quote 0
                • K Offline
                  Kimzer
                  last edited by Sep 4, 2017, 11:50 AM

                  How do i change the color of the names?

                  M 1 Reply Last reply Sep 4, 2017, 2:57 PM Reply Quote 0
                  • M Offline
                    Mykle1 Project Sponsor Module Developer @Kimzer
                    last edited by Mykle1 Sep 4, 2017, 2:57 PM Sep 4, 2017, 2:57 PM

                    @Kimzer said in Go East, young icon!:

                    How do i change the color of the names?

                    In custom.css:

                    .MMM-NetworkScanner {
                      width: 175px;  /* should control width of entire module */
                      color: #62FF00;  /* This may change the color of the icons, too */
                    }
                    

                    Create a working config
                    How to add modules

                    K 1 Reply Last reply Sep 4, 2017, 3:01 PM Reply Quote 1
                    • K Offline
                      Kimzer @Mykle1
                      last edited by Sep 4, 2017, 3:01 PM

                      @Mykle1 Figured it out. But thanks ;)

                      1 Reply Last reply Reply Quote 1
                      • 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