MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    MMM-SystemStatsHow to change color of the icons.

    Custom CSS
    4
    6
    573
    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.

            E 1 Reply Last reply Reply Quote 0
            • E
              edd189 @mumblebaj last edited by

              @mumblebaj

              Could you describe a little more detail on how to find the individual class names within the Developer console? When I click on the js module, there are so many attributes, that I can’t find icon class definitions.

              2023-06-12 12_53_38-MagicMirror².jpg

              S 1 Reply Last reply Reply Quote 0
              • S
                sdetweil @edd189 last edited by

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

                Sam

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 1
                • 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