# Pre-Built Theme?

**URL:** https://meta.discourse.org/t/pre-built-theme/77507
**Category:** Self-hosting
**Created:** [January 8, 2018, 8:08pm UTC](https://meta.discourse.org/t/pre-built-theme/77507 "2018-01-08T20:08:09Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![fazzio349](https://avatars.discourse-cdn.com/v4/letter/f/b9e5f3/32.png) [@fazzio349](https://meta.discourse.org/u/fazzio349)
#### Post date: [January 8, 2018, 8:08pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/1 "2018-01-08T20:08:09Z")

</div>

Discourse lists a bunch of websites on their customers page that use this theme layout: [https://discuss.codecademy.com/](https://discuss.codecademy.com/).

Is this a pre-built theme somewhere I can upload and customize?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 8, 2018, 8:12pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/2 "2018-01-08T20:12:17Z")

</div>

That seems to be out of the box theme with the Category page set as the Homepage, all Categories have a logo, and they have a global banner topic at the top.

**Edit:** Looking back, that banner may be customized.

---

<div class="post-metadata">

### Author: ![fazzio349](https://avatars.discourse-cdn.com/v4/letter/f/b9e5f3/32.png) [@fazzio349](https://meta.discourse.org/u/fazzio349)
#### Post date: [January 8, 2018, 8:24pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/3 "2018-01-08T20:24:00Z")

</div>

Thanks I was able to find how to change the category/topics layout, but couldn’t find out where to upload a header image and include the “additional resources.” I was wondering if that was custom, but it appears a lot of other sites use that type of layout so I assumed it’s a layout setting I’m missing it somewhere.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 8, 2018, 8:25pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/4 "2018-01-08T20:25:33Z")

</div>

Others might be using the Global Banner Topic option (built-in), it doesn’t seem to be what Code Academy is using though. Do you have other examples?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 8, 2018, 8:29pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/5 "2018-01-08T20:29:17Z")

</div>

It is built-in, no special plugins required.

Code Academy is using this logic (in `</body>` in Theme Customization)

```plaintext
<script type="text/javascript">
    Ember.Router.reopen({
      UrlChangeEventHandler: function() {
        Ember.run.schedule('afterRender', this, function () {
            if(['/', '/categories', '/latest', '/new', '/unread', '/bookmarks'].indexOf(window.location.pathname) >= 0 || window.location.pathname.split('/')[1] === 'top') {
                jQuery('#banner').show();
            } else {
                jQuery('#banner').hide();
            }
        });
      }.on('didTransition')
    });
</script>

```

`#banner` refers to (which is pasted in the After Header in Theme Customization)

```plaintext
<div id="banner">
	<div id="circle-img-welcome" style=""></div>
	<div id="welcome-message" style="">
		<h2>Codecademy Discuss</h2>
		
		<div id="welcome-text">
			<p>Welcome to Codecademy Discuss, the official forums for Codecademy! These forums are a place for learning, helping, and sharing experiences with all things Codecademy and coding in general. Note that this is a public forum - anyone can view the discussions here.</p>
			<p>Get started: <a href="https://discuss.codecademy.com/c/Codecademy-Community-Lounge/new-users?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">New User Resources</a>, <a href="https://discuss.codecademy.com/guidelines?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">Community Guidelines</a>, <a href="https://discuss.codecademy.com/t/how-to-use-the-codecademy-discuss-forums/78832?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">Forum How-To Guide</a></p>
		</div>
		
		<div id="welcome-resources">
			<p>Additional Resources:</p>
			<ul>
				<li><a href="https://help.codecademy.com/hc/en-us?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">Support Site &amp; Knowledge Base</a></li>
				<li><a href="https://discuss.codecademy.com/t/local-community-groups/79204?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">Local Community Meetup Groups</a></li>
				<li><a href="https://www.facebook.com/codecademy?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">Codecademy on Facebook</a></li>
				<li><a href="https://twitter.com/codecademy?utm_source=Forum_on-platform_FTUE&amp;utm_medium=homepage_banner">Codecademy on Twitter</a></li>
			</ul>
		</div>
	</div>
</div>

```

---

<div class="post-metadata">

### Author: ![fazzio349](https://avatars.discourse-cdn.com/v4/letter/f/b9e5f3/32.png) [@fazzio349](https://meta.discourse.org/u/fazzio349)
#### Post date: [January 8, 2018, 8:33pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/6 "2018-01-08T20:33:18Z")

</div>

[https://community.smartthings.com/](https://community.smartthings.com/) looks pretty similar. I don’t see other examples they list with the “additional resources” on the side. [https://community.unbounce.com/](https://community.unbounce.com/) has something a little different, but with buttons in the header image.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 8, 2018, 11:03pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/7 "2018-01-08T23:03:40Z")

</div>

With the above code snippets (and coming up with some CSS) you should be able to achieve the same results.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [January 9, 2018, 12:12pm UTC](https://meta.discourse.org/t/pre-built-theme/77507/8 "2018-01-09T12:12:11Z")

</div>

Hi @fazzio349, Codeacademy and many other site use this plugin to create that banner [https://meta.discourse.org/t/branding-custom-brand-header-with-logo-navigation-and-icons/53265](https://meta.discourse.org/t/branding-custom-brand-header-with-logo-navigation-and-icons/53265)  
.  
Unfortunately the plugin is currently broken on the latest versions of Discourse.  
@vinothkannans will turn it into a theme when he will have time, in this way it will be much more stable and can be added to the site customizations directly from the administrative panel.  
😉