MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    UNSOLVED MMM-network-signal coloring the icon

    Troubleshooting
    4
    8
    194
    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.
    • A
      alphanet last edited by

      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.

      B 1 Reply Last reply Reply Quote 0
      • B
        Bursucel @alphanet last edited by

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

        A 1 Reply Last reply Reply Quote 0
        • A
          alphanet @Bursucel last edited by

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

          S A 2 Replies Last reply Reply Quote 0
          • S
            sdetweil @alphanet last edited by 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

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • A
              alphanet @alphanet last edited by

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

              1 Reply Last reply Reply Quote 0
              • P
                plainbroke last edited by

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

                S 2 Replies Last reply Reply Quote 0
                • S
                  sdetweil @plainbroke last edited by 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…

                  Sam

                  Create a working config
                  How to add modules

                  1 Reply Last reply Reply Quote 0
                  • S
                    sdetweil @plainbroke last edited by 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!)

                    Sam

                    Create a working config
                    How to add modules

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy