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 15.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.
    • strawberry 3.141S Offline
      strawberry 3.141 Project Sponsor Module Developer @slametps
      last edited by

      @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

      slametpsS 1 Reply Last reply Reply Quote 0
      • slametpsS Offline
        slametps @strawberry 3.141
        last edited by slametps

        @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

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

          @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

          slametpsS 1 Reply Last reply Reply Quote 0
          • slametpsS Offline
            slametps @strawberry 3.141
            last edited by

            @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

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

              @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

              slametpsS 1 Reply Last reply Reply Quote 0
              • slametpsS Offline
                slametps @strawberry 3.141
                last edited by

                @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
                • KimzerK Offline
                  Kimzer
                  last edited by

                  How do i change the color of the names?

                  Mykle1M 1 Reply Last reply Reply Quote 0
                  • Mykle1M Offline
                    Mykle1 Project Sponsor Module Developer @Kimzer
                    last edited by Mykle1

                    @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

                    KimzerK 1 Reply Last reply Reply Quote 1
                    • KimzerK Offline
                      Kimzer @Mykle1
                      last edited by

                      @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