Changing the Colour of NightScout’s BGClock Page

  1. EDITING THE TEXT COLOUR
    1. Go to your GitHub source code by heading to
      https://github.com/YOURUSERNAME/cgm-remote-monitor/blob/master/views/bgclock.html
      (replacing YOURUSERNAME with your username in lowercase)
    2. Click the ✏️ in the top right of the page
    3. Replace the word grey on line 28 which currently reads
      VIEW CODE
      color: grey;

      with any colour from https://en.wikipedia.org/wiki/Web_colors using the 6 character hexcode with a # before it, for example…

      VIEW CODE
      color: #800080;

      (this would be the colour purple)

  2. NOW WE CAN EDIT THE BACKGROUND COLOUR
    1. You can also then do the same on line 29 for the background color…
      VIEW CODE
      background-color: black;

      could be

      VIEW CODE
      background-color: #ffffff;

      (this would be a white background)

  3. NOW FOR THAT ARROW
    1. If you go for a light background you will not be able to see the white arrow, so we can add a background behind that arrow
    2. on lines 65-67 where is says
      VIEW CODE
      img#arrow {
      height: 15vmin;
      }

      make this read

      VIEW CODE
      img#arrow {
      height: 15vmin;
      -moz-border-radius: 50px; /* or 50% */
      border-radius: 50px; /* or 50% */
      background-color: black;
      padding-left:15px;
      }
    3. You can also change the colour of this background around the arrow by changing
      VIEW CODE
      background-color: black;

      to any colour you want with the same notation using  #000000 once again such as

      VIEW CODE
      background-color: #ffffff;

NOTE : THE SPELLING OF COLOUR IN CODING IS COLOR THE AMERICAN ENGLISH WAY

To save the changes tick Commit directly to the master branch at the bottom
then click the Commit Changes button

Finally then redeploy your build from either Heroku or Azure

  1. HOW TO REDEPLOY YOUR SITE
    1. HEROKU USERS
      1. If your site is hosted on HEROKU, head to https://heroku.com/ and login to your account
      2. Click on the name of your github installation
      3. Select the Deploy tab from the top menu
      4. Scroll down to Deployment Method
      5. Select GitHub
        NOTE : IF GITHUB IS ALREADY SELECTED WITH A TICK IN THE BOX AND IT SAYS “CONNECTED” SKIP TO SECTION 11
      6. Select the Connect to GitHub button
      7. You will then need to authenticate with GitHub, if you have not already done so before. Once complete it should take you back to the Heroku Site
      8. Scroll down to the bottom and under Connect to GitHub select YOURUSERNAME from the list of repositories
      9. now type the name you gave your github NightScout fork (again this will probably be cgm-remote-monitor)
      10. Select Search & it should appear below with the option to click connect. Click connect here.
      11. Finally, under Manual deploy select master from the dropdown list of branches & select the Deploy Branch button.
        NOTE : THIS WILL TAKE A FEW MINUTES TO RUN & WILL SAY “Your app was successfully deployed” ONCE COMPLETE
        (in future you can use this same method to redeploy your NightScout site from GitHub any time you make a change there)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: