Add custom css to ghost theme

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

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

<style>
  body {

  }
</style>
2 Likes

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:

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. https://ghost.org/docs/api/v3/handlebars-themes/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). https://ghost.org/docs/api/v3/handlebars-themes/helpers/ghost_head_foot/
3 Likes

Thank You so much :slight_smile:

1 Like