Let’s say you just started out building a GitHub page and you want to use one of the delightful Jekyll templates that comes with it. However, you aren’t a fan of the colors they use or the fonts that come with it. With just a little bit of CSS knowledge and some crafty Developer Console investigating, you can quickly make edits to your template!
Create the New CSS File
- Add a new file titled “/assets/css/style.scss” to your repository.
- Make the first 4 lines of the file:
---
---
@import "{{ site.theme }}"; - Now you can directly add the CSS you want for your site immediately below that code!
Spying on CSS with the Developer Console
If you aren’t familiar with CSS or how your site is structured, the Developer Console Elements inspector can give you all the information you need! To open the console in Google Chrome, hit control + shift + I and it will take over the right side of your browser.
In this window, you can select with section of the site you want to inspect. In this case I want to edit my site’s header so I click on that to show more details about the style along the bottom.
The inspector shows me that the header is in the class .page-header and then the details of the CSS applied to that. If I want to change those colors or the CSS for this section, I can copy that segment of CSS directly from the inspector and paste it into my style.scss file in the repository.
Changing the CSS
After pasting the CSS over into my style.scss file, I can change it however I want!
In this case, all I wanted to do was change the colors in the gradient, so I went to the handy-dandy Material Design color tool to grab some hex codes of colors I likes, pasted them into the CSS, and commit my changes.
Within a few moments, the colors on my example site were updated!
