• 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.1k 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.
  • M Offline
    Mykle1 Project Sponsor Module Developer @strawberry 3.141
    last edited by Feb 15, 2017, 10:10 PM

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

    custom.css
    .MMM-NetworkScanner .fa-ul li .fa-li {
    float: right;
    }

    This did not work for me. The mobile icon remained on the left side of the device name. I should note that I already have an entry in custom.css for MMM-NetworkScanner. I tried your suggestion as a separate entry. Am I supposed to incorporate it into the existing entry?

    body {
    margin: 20px;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    }

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

    .MMM-WunderGround .max-temp {
    color: #f66;
    }

    Create a working config
    How to add modules

    1 Reply Last reply Reply Quote 0
    • M Offline
      Mykle1 Project Sponsor Module Developer @tosti007
      last edited by Feb 15, 2017, 10:11 PM

      @tosti007 said in Go East, young icon!:

      Note: I am currently on mobile so have no way of testing it. If it doesn’t work then let me know and i will search another solution (and I will be confused since I am pretty sure this works)

      I tried this after going the custom.css route and it did not work.

      Thank you for your suggestion

      Create a working config
      How to add modules

      1 Reply Last reply Reply Quote 0
      • M Offline
        Mykle1 Project Sponsor Module Developer @strawberry 3.141
        last edited by Mykle1 Feb 16, 2017, 2:37 AM Feb 16, 2017, 2:36 AM

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

        you can achieve this without modifying the code

        Strawberry-3.141 deserves an award. He went above and beyond in helping me customize the NetworkScanner module for me. Apparently, he is a genius, and willing to work well past midnight to help someone (me) with their MM. You have my highest praise.

        All credit for this custom.css goes to Strawberry-3.141
        }
        .MMM-NetworkScanner .fa-ul {
        margin-left: 2px; /* This aligned NetworkScanner to the left margin /
        width: 130px; /
        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: right;
        left: initial;
        }

        0_1487212483120_IMG_1749.JPG

        I dreamed it. He made it happen.

        Create a working config
        How to add modules

        S 1 Reply Last reply Mar 5, 2017, 3:35 PM Reply Quote 0
        • S Offline
          slametps @Mykle1
          last edited by Mar 5, 2017, 3:35 PM

          @Mykle1 said in Go East, young icon!:

          .MMM-NetworkScanner .fa-ul {
          margin-left: 2px; /* This aligned NetworkScanner to the left margin /
          width: 130px; / 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: right;
          left: initial;
          }

          @strawberry-3-141 : How to make icon on the left, but without margin?

          regards,

          Slamet PS

          M S 2 Replies Last reply Mar 5, 2017, 4:13 PM Reply Quote 0
          • M Offline
            Mykle1 Project Sponsor Module Developer @slametps
            last edited by Mar 5, 2017, 4:13 PM

            @slametps said in Go East, young icon!:

            How to make icon on the left, but without margin?

            The icon is on the left by default

            Create a working config
            How to add modules

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

              @slametps the space on the left ogf the icon or the space between the icon and the name?

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

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

                @strawberry-3.141 : the space on the left of the icon. How to remove it?

                regards,

                Slamet PS

                M 1 Reply Last reply Mar 5, 2017, 7:21 PM Reply Quote 0
                • M Offline
                  Mykle1 Project Sponsor Module Developer @slametps
                  last edited by Mykle1 Mar 5, 2017, 7:22 PM Mar 5, 2017, 7:21 PM

                  @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 */

                  Create a working config
                  How to add modules

                  S 1 Reply Last reply Mar 5, 2017, 10:41 PM Reply Quote 0
                  • 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
                      • 1
                      • 2
                      • 3
                      • 1 / 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