MagicMirror Forum

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

    MMM-SystemStatsHow to change color of the icons.

    Custom CSS
    2
    4
    379
    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.
    • C
      cdanielgallegos last edited by

      Hello. I’ve been trying to change the color of the icons in this module but I can’t find the way to do it. I can change the color of all the characters including the icons.

      But I want the possibility to even change the color per column.
      One color for cpu temp, system load, free ram, etc.
      One color for the icons.
      And one color for the values.

      eb072aed-8d70-4967-81c0-dbee37d9d262-image.png

      mumblebaj 1 Reply Last reply Reply Quote 0
      • mumblebaj
        mumblebaj Project Sponsor @cdanielgallegos last edited by

        @cdanielgallegos The module does not have a stylesheet and runs off the main.css. You could set the following in the custom.css but it will change the color for all the rows as they all have a class of “title” and the values have a class of “value”. That is about as much as I could get with it.

        .MMM-SystemStats .title {
         font-size: 25px;
         color: orangered;
        }
        
        .MMM-SystemStats .vlue {
        color: blue;
        }
        

        310d1b98-a939-49f4-af2f-515a91bdd5a2-image.png

        C 1 Reply Last reply Reply Quote 1
        • C
          cdanielgallegos @mumblebaj last edited by

          @mumblebaj I can work with just changing the title and value colors. It is a shame that I can’t change icons but this is better than what I had. I already tested and it works, you are just missing an “a” in “value” in the example code. Thank you so much for your help!

          mumblebaj 1 Reply Last reply Reply Quote 0
          • mumblebaj
            mumblebaj Project Sponsor @cdanielgallegos last edited by

            @cdanielgallegos You can change the icons as well. They have their own individual classes.

            ee7e9741-523b-4aab-a86d-a0a8f83e7079-image.png

            Open the Developer console, select the Elements tab and find the MMM-SystemStats module and check them out. You can set their individual colors from there in the custom.css using their class names.

            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