How to add a new template to the Ghost CMS and reflect on front-end?

[styxlab]

How to add a new template to the Ghost CMS and reflect on front-end?

[styxlab]

Welcome @machinelearnear! Cool that you are running your site with this repo. I must disappoint you now: this repo uses Ghost as a headless CMS: this means changing themes (i.e. the head) on Ghost CMS has zero effect here.

Currently this repo only supports one theme which is a Ghost Casper clone.

[nicolasmetallo]

Thanks! It's like I was missing some important bit of info about how Ghost API actually worked there 😄 . For anyone wondering about the same, this is a good place to start.

Any advice/tips on how to port a new theme? I know there's a lot of work already done when you ported Casper.

Thank you again for the great work!

[styxlab]

The answer to your question depends on what you want to achieve. A rough guidance would be:

1. If you want to make minor changes with no or little styling, such as extending the header or footer the best is to add a new option to this repository. Have a look at the customNavigation option to get an idea how this could be done. PRs are welcome.

2. If you just want to tweak styles but stay close to the original theme, you can simply swap stylesheets under the styles folder. Even better is to add your own themes that only override some parts of the existing screen.css. To get an idea how this can be accomplished have a look at styles/prism.css or styles/toc.css. This repository uses a global theme approach which is namespaced, so it does not conflict with other themes when using this project as part of a larger website.

3. If you want a completely new theme with different animations, toolbars etc. then you would also need to change React component logic. In this case, I recommend you create your own fork and use this repository as a boilerplate for your own, fully customized version.

[styxlab]

Closing as answered. As always, this thread can be re-opened if needed.