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

How to edit casper UI? #277

Closed RudyBekker closed 3 years ago

RudyBekker commented 3 years ago

Hey :)

I love this implementation on Gatsby...

But I am trying to implement some changes on the Casper UI, and I cannot figure out how you are pulling the UI?

Because its definitely not in the code you wrote...

How would I be able to edit the Casper UI

Thanks allot :)

styxlab commented 3 years ago

@RudyBekker: Welcome to this project.

The Casper UI styles are copied over from the source to here:

but those files shouldn't be modified directly (although you could make a fork, modify and re-build everything).

You can use component shadowing to overwrite those files directly in a clone of gatsby-starter-try-ghost. There are some answers on how to do this in the issue list. A good starting point might be #256.

styxlab commented 3 years ago

Closed as answered.

RudyBekker commented 3 years ago

So it copies the actual HTML/JS/CSS too?

Because I have a modified casper UI...

So if I target my casper build, it will pull the whole UI from there?

styxlab commented 3 years ago

You can put your own, modified CSS files in the following directory of your gatsby-starter-try-ghost clone:

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

This would overwrite the ones used in this project. Note however, that I pull those files directly from Ghost, but patch them to enhance it with dark mode and some other thing (better contrast, etc.). That means, if you exchange with your own versions, dark mode will be broken.

So I'd recommend you compare the changes you made with the files I listed above. Then make a modified version that you put in the src/gatsby-theme-try-ghost/styles/ directory.

Finally, no HTML or JS files are copied as this is a complete front-end replacement.