Changing the Colour of NightScout’s BGClock Page
- EDITING THE TEXT COLOUR
- 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) - Click the ✏️ in the top right of the page
- Replace the word grey on line 28 which currently reads
VIEW CODEcolor: grey;
with any colour from https://en.wikipedia.org/wiki/Web_colors using the 6 character hexcode with a # before it, for example…
VIEW CODEcolor: #800080;(this would be the colour purple)
- Go to your GitHub source code by heading to
- NOW WE CAN EDIT THE BACKGROUND COLOUR
- You can also then do the same on line 29 for the background color…
VIEW CODEbackground-color: black;
could be
VIEW CODEbackground-color: #ffffff;(this would be a white background)
- You can also then do the same on line 29 for the background color…
- NOW FOR THAT ARROW
- 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
- on lines 65-67 where is says
VIEW CODEimg#arrow {
height: 15vmin;
}make this read
VIEW CODEimg#arrow {
height: 15vmin;
-moz-border-radius: 50px; /* or 50% */
border-radius: 50px; /* or 50% */
background-color: black;
padding-left:15px;
} - You can also change the colour of this background around the arrow by changing
VIEW CODEbackground-color: black;
to any colour you want with the same notation using #000000 once again such as
VIEW CODEbackground-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
- HOW TO REDEPLOY YOUR SITE
- HEROKU USERS
- If your site is hosted on HEROKU, head to https://heroku.com/ and login to your account
- Click on the name of your github installation
- Select the Deploy tab from the top menu
- Scroll down to Deployment Method
- Select GitHub
NOTE : IF GITHUB IS ALREADY SELECTED WITH A TICK IN THE BOX AND IT SAYS “CONNECTED” SKIP TO SECTION 11 - Select the Connect to GitHub button
- 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
- Scroll down to the bottom and under Connect to GitHub select YOURUSERNAME from the list of repositories
- now type the name you gave your github NightScout fork (again this will probably be cgm-remote-monitor)
- Select Search & it should appear below with the option to click connect. Click connect here.
- 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)
- HEROKU USERS
You must log in to post a comment.