• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Changing the colour of all text on screen

Scheduled Pinned Locked Moved Troubleshooting
21 Posts 7 Posters 5.0k Views 8 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.
  • B Offline
    boybay7
    last edited by boybay7 Oct 11, 2020, 10:03 AM Oct 11, 2020, 10:02 AM

    Still very new to this and know nothing about coding, I’ve seen a few posts regarding changing the colour of text but am still perplexed and need someone to explain it to me. Would just like all text to be white (currently struggling to see text when lights are on, attached a photo.) Also I couldn’t remove the fade off the weather forecast for some reason? Also I’m still confused with how to update the magicmirror, I think you need to use git stash? I don’t know :( Thanks in advance.

    PXL_20201011_094619865.jpg

    L 2 Replies Last reply Oct 12, 2020, 10:57 AM Reply Quote 0
    • M Offline
      MajorC Project Sponsor
      last edited by MajorC Oct 11, 2020, 11:41 AM Oct 11, 2020, 11:40 AM

      Add the following to the custom.css to make the text a little brighter:

      .normal,
      .dimmed,
      header,
      body {
          color: #fff;
      }
      
      B 1 Reply Last reply Oct 12, 2020, 10:56 AM Reply Quote 0
      • B Offline
        boybay7 @MajorC
        last edited by Oct 12, 2020, 10:56 AM

        @MajorC Thanks so much, I will make sure to add this! Also what is the right way to go about updating the MagicMirror program?

        1 Reply Last reply Reply Quote 0
        • L Offline
          lavolp3 Module Developer @boybay7
          last edited by Oct 12, 2020, 10:57 AM

          @boybay7 said in Changing the colour of all text on screen:

          Also I’m still confused with how to update the magicmirror, I think you need to use git stash? I don’t know

          You only need git stash when you have made changes to the source code that you want to keep while updating. So don’t worry about that for now.

          The usual update procedure is

          git pull
          npm install
          

          inside the MagicMirror folder.

          As a newbie you might want to check out @sdetweil 's scripts. Lots of automation in there.
          https://github.com/sdetweil/MagicMirror_scripts

          How to troubleshoot modules
          MMM-soccer v2, MMM-AVStock

          B 1 Reply Last reply Oct 12, 2020, 11:19 AM Reply Quote 1
          • L Offline
            lavolp3 Module Developer @boybay7
            last edited by Oct 12, 2020, 11:02 AM

            @boybay7 said in Changing the colour of all text on screen:

            Also I couldn’t remove the fade off the weather forecast for some reason?

            For that you need to have a look at the module docs
            https://docs.magicmirror.builders/modules/weather.html#weather-forecast-options
            The weather module is a “stock module”, the docs for all stock modules are placed in the official MagicMirror docs. Any 3rd party modules have their own docs on the respective github site.

            At the above link you find the fade: option. Set that to false in your config.js
            Or set the fadepoint to a higher value: fadePoint: 0.5

            How to troubleshoot modules
            MMM-soccer v2, MMM-AVStock

            B 1 Reply Last reply Oct 12, 2020, 11:21 AM Reply Quote 1
            • B Offline
              boybay7 @lavolp3
              last edited by Oct 12, 2020, 11:19 AM

              @lavolp3 So just to confirm, even though I have edited code in like modules or custom.css for the font colour, it won’t be replaced when I update with git pull?

              L B 3 Replies Last reply Oct 12, 2020, 11:21 AM Reply Quote 0
              • B Offline
                boybay7 @lavolp3
                last edited by Oct 12, 2020, 11:21 AM

                @lavolp3 Also thanks, I figured it out, I was editing the wrong module because there is like 3 modules on weather. Okay another question, I want to change the colour on weather forecast. Currently it’s red and blue, but I want it to go blue (min temp) and then red (max temp), so how would I do that? Appreciate all the help

                L 1 Reply Last reply Oct 12, 2020, 11:26 AM Reply Quote 0
                • L Offline
                  lavolp3 Module Developer @boybay7
                  last edited by Oct 12, 2020, 11:21 AM

                  @boybay7 The only files you should change are config.js and custom.css.
                  These are also disregarded in the updating procedure, so will remain as they are. Everything else will be checked against its version on the servers.

                  Usually there’s nothing to be done in the module folders as long as you don’t want to manipulate module code.

                  For all styling options you should use custom.css, e.g. like advised above

                  How to troubleshoot modules
                  MMM-soccer v2, MMM-AVStock

                  1 Reply Last reply Reply Quote 0
                  • L Offline
                    lavolp3 Module Developer @boybay7
                    last edited by lavolp3 Oct 12, 2020, 11:26 AM Oct 12, 2020, 11:26 AM

                    @boybay7 said in Changing the colour of all text on screen:

                    Okay another question, I want to change the colour on weather forecast. Currently it’s red and blue, but I want it to go blue (min temp) and then red (max temp), so how would I do that? Appreciate all the help

                    That’s a bit more complicated, but can be done via styling.

                    Without explaining too much, put that in your custom.css

                    .weatherforecast tr.colored .min-temp {
                      color: 'green';  
                    }
                    
                    .weatherforecast tr.colored .max-temp {
                      color: 'red';  
                    }
                    

                    or use hex codes (like ‘#00ff00’) for any color you like.

                    How to troubleshoot modules
                    MMM-soccer v2, MMM-AVStock

                    B 1 Reply Last reply Oct 18, 2020, 5:30 PM Reply Quote 2
                    • R Offline
                      ronw1309
                      last edited by Oct 14, 2020, 8:51 AM

                      thanks for this it really helped

                      https://www.buy.amardeepdesign.com/
                      https://amardeepdesign.com/

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 1 / 3
                      1 / 3
                      • First post
                        2/21
                        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