# Need help with theme component Github

**URL:** https://meta.discourse.org/t/need-help-with-theme-component-github/326873
**Category:** Development
**Created:** [September 17, 2024, 2:31pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873 "2024-09-17T14:31:25Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [September 17, 2024, 2:31pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/1 "2024-09-17T14:31:25Z")

</div>

I apologize as still a complete noob.

I am working in creating a theme component  
I have imported the theme component skeleton.

I have created a javascript and added the file to

Javascript\Discourse\Initializers\Discourse\_foo.js

From my understanding this file needs to be called by the script tag in header?

```plaintext
<script src="discours_foo.js"></script>

```

Looking over a few other theme components have not seen them have a file called header.css? Calling to the js scripts they are using.

Any guidance is really appreciated to improve my understanding

Thank you

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 17, 2024, 2:42pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/2 "2024-09-17T14:42:13Z")

</div>

This is my novice understanding, which may be helpful for your even-more-novice understanding, but is likely techically incorrect from the standpoint of someone who actually understands this stuff.

> [@Heliosurge](#):
>
> From my understanding this file needs to be called by the script tag in header?
> 
> ```plaintext
> 
> ```

I don’t believe so. I think it just works since its’ in that initializers directory. IIRC, the skeleton includes an initializer with a `console.log` so that you can see it’s running.

(I think) You only need to run them in a script if you add them in an old-school done-in-the-UX theme component rather than a new school put-the-files-in-the-right-place way of doing things.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [September 17, 2024, 2:51pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/3 "2024-09-17T14:51:47Z")

</div>

Okay that sounds like it makes sense.

One of the ones I looked at was your hide staff

So if you don’t have any CSS required then you only need to include your JScript file in the initializers directory and fill in the about.json details?

And the component should work without anything further? (Assuming the script is good that is)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 17, 2024, 3:03pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/4 "2024-09-17T15:03:54Z")

</div>

> [@Heliosurge](#):
>
> So if you don’t have any CSS required then you only need to include your JScript file in the initializers directory and fill in the about.json details?

I think that’s true. If you don’t want to add CSS, then you don’t need a CSS file. (Seems like a safe tautology.)

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [September 17, 2024, 3:06pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/5 "2024-09-17T15:06:36Z")

</div>

Always fun learning new things/procedures.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 17, 2024, 3:17pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/6 "2024-09-17T15:17:23Z")

</div>

these topics should help

> [@Theme Developer Quick Reference Guide](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#howto / #themes](https://meta.discourse.org/tags/c/howto/themes), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site…](https://meta.discourse.org/t/-/374376)

> [@Structure of themes and theme components](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848):
>
> Discourse supports [native themes](https://meta.discourse.org/t/native-theme-support/47494/26) that can be sourced from a .tar.gz archive or from a remote git repository including [private repositories](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). An example theme is at: [GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub](https://github.com/SamSaffron/discourse-simple-theme) The git repository will be checked for updates ([once a day](https://github.com/discourse/discourse/blob/main/app/jobs/scheduled/check_out_of_date_themes.rb)), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to foll…

> [@Split up theme Javascript into multiple files](https://meta.discourse.org/t/split-up-theme-javascript-into-multiple-files/119369):
>
> Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the [Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) or [source the theme from git](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match,…

> [@Split up theme SCSS into multiple files](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126):
>
> Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. [https://github.com/discourse/discourse/commit/268d4d4c828a0d9e3ca6b0b5b623db85eb32b9f3](https://github.com/discourse/discourse/commit/268d4d4c828a0d9e3ca6b0b5b623db85eb32b9f3) When creating a new theme with the [theme CLI](https://meta.discourse.org/t/beginners-guide-to-using-theme-creator-and-theme-cli-to-start-building-a-discourse-theme/108444), or sharing a theme [on github](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848), simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will b…

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [September 17, 2024, 3:26pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/7 "2024-09-17T15:26:40Z")

</div>

Thank you very kindly Lilly. I check these out. You help us as always greatly appreciated.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 17, 2024, 3:27pm UTC](https://meta.discourse.org/t/need-help-with-theme-component-github/326873/8 "2024-10-17T15:27:06Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
