Overriding CSS on github pages using slate theme?

Question

I am trying to override the "forkme" banner on my github.io page to get a better understanding of how Jekyll, HTML, CSSand GitHub works.

For that purpose, I created my ./assets/css/style.css file as mentioned in the readme of the official documentation on how to customize the CSS of the officially supported GitHub themes. I added the following CSS to it:

#forkme_banner { display: none; }

However, no luck, the banner doesn't disappear. Even adding fictitious elements to the CSS file like #test {testing: testtest;} doesn't add the line to my CSS file.

Answer 1

rename assets/css/style.css to style.scss and change your scss code to :

---
---
@import "{{ site.theme }}";
#footer_wrap {display: none;}
#forkme_banner {display: none;}
#downloads {display: none;}
#whocares {haha: hehe;}

Answer 2

First and foremost thing is that the CSS changes takes time to update because it will be cached at their servers. It usually takes 15-45 minutes for me but for few, it is taking 3 hours. I think it depends on the server location that Github pages are hosed if I am not wrong.

Coming to issue

`./assets/css/style.css

 // change to 

./assets/css/style.scss`

it should be changed to .scss.

Another troubleshoot that I encountered is

---
---
@import "{{ site.theme }}";
/* "{{ site.theme }}" = Your theme name */
/* Eg: @import 'jekyll-theme-cayman'; */

/* Your css rules goes after this */
.page-header {
    background: #191c20;
}