MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-SystemStatsHow to change color of the icons.

    Scheduled Pinned Locked Moved Custom CSS
    6 Posts 4 Posters 1.6k Views 4 Watching
    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 Offline
      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

      mumblebajM 1 Reply Last reply Reply Quote 0
      • mumblebajM Offline
        mumblebaj Module Developer @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

        Check out my modules at: https://github.com/mumblebaj?tab=repositories

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

          mumblebajM 1 Reply Last reply Reply Quote 0
          • mumblebajM Offline
            mumblebaj Module Developer @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.

            Check out my modules at: https://github.com/mumblebaj?tab=repositories

            E 1 Reply Last reply Reply Quote 0
            • E Offline
              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 Offline
                sdetweil @edd189
                last edited by

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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                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 Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy
                  OSZAR »