In this post we'll be seeing how to change your contribution on github to a nice colour scheme. It's an easy tutorial, detailed enough, feel free to clear up any doubt! Let us begin.
First this is what we mean by contribution graph. The green squares.
Now we need to see how github actually does it. Right click then choose inspect element.
Next we see a box has appeared. That shows us how the page is structured, as well as showing console messages. This is good for debugging.
Now if you want to change it's position, click on the dots, then select your preferred view.
Now we'll uncover the secret behind individual squares by using the selection tool.
Then we'll be looking at an individual square
Aha, so, we have an element with class day and the colour is in the fill attribute. Nice!
Tampermonkey is a tool that allows you to change/tamper with the codes found in your webpage. On opera it is available
as well as on chrome
If all went well, you should see a nice icon on the top right of the browser (I'm using opera)
Now let us create a new script
now let us match all domains on github
and change the script name
now if we press save, we'll be directed to this screen. just click on the name to return on your editor
upon inspection of our github page, we find two things
- there are 5 levels of colours
- they are graded according to data-count
so here is our starting point
now let us add grading of count
now go to github and press on the logo, you'll see our script active
now refresh the page and you'll see something like that:
just now we need to deal with the legend
inspecting the legend reveals a class legend with li children and background colour
we change our codes accordingly
now whenever we move around, our graphs are coloured the same. Ethan Furman's profile for example
You can find the source here (a gist would have been more appropriate)
also view it on greasyfork here
Feel free to propose more colour schemes below. Hope you enjoyed the article!