Add custom css to ghost theme

Developer help
1

Hi,

I am new to Ghost. I have been using WordPress for quite long. In WordPress, i can add custom css to the theme using the admin login.
I Ghost admin UI, I don’t see any section to add custom css.
Can i add custom css using admin login ?

Thanks,
Ajeet

1 Like
2

You can add custom CSS in “Settings > Code injection > Site Header” field.

<style>
  body {

  }
</style>
4 Likes
3

Thanks :slight_smile:

Should I put the code in Header or Footer ? Which one is better ?

Also, Can I put a js file in the theme and use it like this in the Code section ( as you suggested) ?

<script defer src="/assets/js/flying-pages.min.js"></script>
<script>
  window.addEventListener("load", () => {
    flyingPages({
      delay: 0,
      ignoreKeywords: [],
      maxRPS: 3,
      hoverDelay: 50
    });
  });
</script>

Thanks so much :slight_smile:

4

CSS should be put in the Header section.

Yes, you can insert any JS code and the Footer section is more preferable. But,

  1. You should use {{asset}} helper to import JS file. Ghost Handlebars Theme Helpers: asset
<script defer src="{{asset "/assets/js/flying-pages.min.js"}}"></script>
  1. Make sure {{ghost_foot}} helper is right before the closing </body> tag (after loading the JS file). Ghost Handlebars Theme Helpers: ghost_head/foot
6 Likes
5

Thank You so much :slight_smile:

1 Like
6

Thanks for the advice. This is helpful. Do I need to ghost restart in the console after adding the custom CSS script into the header, or just press “Save” in the dashboard? How to make sure this new custom CSS script can be added to existing, already published blog posts?

7

Hey @zire, you don’t need to restart your Ghost instance. And the CSS added as code injection will be applied to your whole site, which means will also be applied to the existing posts.

8

Got it. Thanks for clarifying that.