# Add custom css to ghost theme

**URL:** <https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970>\
**Category:** Developer help\
**Created:** [February 12, 2020, 10:35pm UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970 "2020-02-12T22:35:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajeet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ajeet/32/6345_2.png) [@ajeet](https://forum.ghost.org/u/ajeet)\
**Post date:** [February 12, 2020, 10:35pm UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/1 "2020-02-12T22:35:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [February 13, 2020, 2:22am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/2 "2020-02-13T02:22:43Z")

</div>

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

```auto
<style>
  body {

  }
</style>

```

---

<div class="post-metadata">

**Author:** ![ajeet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ajeet/32/6345_2.png) [@ajeet](https://forum.ghost.org/u/ajeet)\
**Post date:** [February 13, 2020, 7:53am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/3 "2020-02-13T07:53:14Z")

</div>

Thanks 🙂

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 🙂

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [February 13, 2020, 8:21am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/4 "2020-02-13T08:21:04Z")

</div>

> [@](#):
>
> Should I put the code in Header or Footer ? Which one is better ?

CSS should be put in the Header section.

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

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](https://ghost.org/docs/api/v3/handlebars-themes/helpers/asset/)

```auto
<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](https://ghost.org/docs/api/v3/handlebars-themes/helpers/ghost_head_foot/)

---

<div class="post-metadata">

**Author:** ![ajeet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ajeet/32/6345_2.png) [@ajeet](https://forum.ghost.org/u/ajeet)\
**Post date:** [February 13, 2020, 8:47am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/5 "2020-02-13T08:47:14Z")

</div>

Thank You so much 🙂

---

<div class="post-metadata">

**Author:** ![zire](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zire/32/13041_2.png) [@zire](https://forum.ghost.org/u/zire)\
**Post date:** [May 17, 2021, 12:38am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/6 "2021-05-17T00:38:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [May 17, 2021, 2:54am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/7 "2021-05-17T02:54:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zire](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zire/32/13041_2.png) [@zire](https://forum.ghost.org/u/zire)\
**Post date:** [May 17, 2021, 6:10am UTC](https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970/8 "2021-05-17T06:10:35Z")

</div>

Got it. Thanks for clarifying that.