search

styxlab / gatsby-theme-try-ghost

A Gatsby theme to build flaring fast blogs from headless Ghost CMS
MIT License
136 stars 56 forks source link

custom css not being applied using shadowing? #256

Closed Buda9 closed 3 years ago

Buda9 commented 3 years ago

Dear styxlab,

Thank you for this wonderful repo.

I'm trying to change css using shadowing but it's not being reflected on live site. I'm using path as this: src/gatsby-theme-try-ghost/src/styles/screen.css

E.g. On live site css property "html.casper .site-header-background" has "background: #0a0b0c no-repeat 50%;" but in shadowing files I've set this to be "background: #e60000;"

Would you mind taking a quick look why it's not working? I'd be very grateful 🙏🏻 https://github.com/Buda9/vokabulablog

styxlab commented 3 years ago

Have a look at the article I wrote about adding and modifying a Table of Contents which also explains how to use Gatsby component shadowing.

The problem is your path, you must drop the second src. So in your case, the correct path is:

src/gatsby-theme-try-ghost/styles/screen.css

Please be aware that by shadowing screen.css and global.css you are opting out of any style updates of the base project. Unless you want a completely different style, it's better to shadow and amend one of the smaller stylesheets, e.g. the fluid.css stylesheet and use it to overwrite styles of screen.css.

styxlab commented 3 years ago

Closed as answered.