Go East, young icon!

tosti007

The reason why it’s a bad practice to change the maker’s code is because you cannot do an easy git pull anymore due to the changes. That means that every time there is a new version of the module you will have to redownload it and then modify the code again.

That being said there is no way to get what you want without modifying the code, unless the maker adds this as a feature in the future.

To get what you want you only have to change code inside MMM-NetworkScanner.js.
Inside the getDom function you can find the lines:

// Icon
icon =  document.createElement("i");
icon.classList.add("fa-li", "fa", "fa-" + device.icon);
deviceItem.appendChild(icon);

// Name 
deviceItem.innerHTML += device.name;

All you have to do is change that part into:

// Name 
deviceItem.innerHTML += device.name;

// Icon
icon =  document.createElement("i");
icon.classList.add("fa-li", "fa", "fa-" + device.icon);
deviceItem.appendChild(icon);

So this is basically swapping the order in which the icon and the text are added to deviceItem.

Hope this helps :D

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)

Mykle1

@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)

It’s 7am here. I’m running off to work but I will try as soon as I get home. I will let you know. Many thanks.

strawberry 3.141

@Mykle1 you can achieve this without modifying the code

custom.css

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

if this ends up with a to big gap you can limit the wifht of the list with

.MMM-NetworkScanner .fa-ul {
  width: 200px;
}

Mykle1

@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;
}

Mykle1

@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

Mykle1

@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;
}

I dreamed it. He made it happen.

slametps

@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?

Mykle1

@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

strawberry 3.141

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

slametps

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

Mykle1

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

slametps

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

strawberry 3.141

@slametps for me this works

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

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.

strawberry 3.141

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

slametps

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

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

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?

strawberry 3.141

@slametps replace your rules with

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

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

slametps

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

Kimzer

How do i change the color of the names?

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