MMM-network-signal coloring the icon

[alphanet]

Hello,
I have just installed the MMM-network-signal module.
It’s working fine.
But I would like to have the connection icon in green color instread of grey.
Do I have to change the icons .png used by the module in the MMM-network-signal/icons subdirectory ?
Or is there another way to change their color ?
Thank you very much for your help.

[Bursucel]

@alphanet
Look inside the MMM-network-signal.js and add a colour code there ( RGB format # xxxxxx).
Try at line 58.

[alphanet]

@Bursucel
Thank you very much for your reply.
Here’s the 58 line of the MMM-network-signal .js file :
connStatus.style = “text-align:center;font-size:0.65”;
Should I add a key:value like : color:#00FF00 ->
connStatus.style = “text-align:center;font-size:0.65;color:#00FF00”;
Thank you in advance for your confirmation.

[sdetweil]

@alphanet never edit the code. u can do this in custom.css

sometimes there is a class to override, sometimes not, but you can use html tag names, IDs …

see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1673214232124

[alphanet]

@alphanet

Thank you very much for your reply and recommandation sdetweil.

Your link seems very interesting and should help me to learn plenty of things about the Magic Mirror and to solve the color of MMM_network-signal.

[plainbroke]

Wish I could figure out the CSS stuff. Sometimes it seems so simple and others I have no clue how to even begin.

[sdetweil]

@plainbroke use my link above, its really very easy to use… KNOWing what to SET things too is the hard part…

its a whole nother language all its own…

selecting the element is the key, and then applying the style to that element…

this is the selector cheat-sheet I like to use

https://www.w3schools.com/cssref/css_selectors.php

this is the set of things to the left of { in the thing in custom.css

.modulename .class  div >ul {
   color: blue;
}

so leading dot means class name
no dot means html tag img, div, span ul, li, table, tr, whatever

leading # means id

 <div id="something"

#something

then u can find children or anyhow…

the dev window tool will allow you select the content element u want, and see the css tree on the right column.
css is inheritance based…

main.css is the base
module provided css is next, (may replace/override) prior instances
then custom.css is last , always wins (well, sometimes!)

so the right column is base at the bottom and then things on top of it…
each ‘thing’ will tell u where it came from (file, main.css, modulename.css, or custom.css

you can type new styles in the top right window,click, type color enter and then u will be in the value side and there will be a dropdown of possible predefined values…

you can control anything and everything from here
and then you can copy paste everything in that top box to custom.css and then u put the selector wrapper around it…

[sdetweil]

@plainbroke the other thing is positioning

there are two modes relative and absolute

a web page is layed out with 0 in the top left corner (0,0) (or right in rtl languages)

in relative mode, content is positioned RELATIVE to the containing element it is in

text in a div , if centered, is in the center of the div space, wherever it is.

there are different measurement types
pixels, physical (absolute)
els(element size), content relative (size of text)
%, shape relative. (size of div)
vh/vw% - size of the visible page h= height w= width

pixels is easy but if the screen size changes, the pixels don’t.

in absolute mode, everything is relative to the 0,0 corner.

by default content is top down , FIFO.
first in, first out.

but you can use flex to change the preference from vertical to horizontal. and which end is the start or end.

and then there is grid. yikes!

fonts and colors and shadings and animations (fade and zoom and transparency!)