Pre-Built Theme?

Installation
1

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

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

2

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.

1 Like
3

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.

4

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?

5

It is built-in, no special plugins required.

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

<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)

<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>
7 Likes
6

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/ has something a little different, but with buttons in the header image.

7

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

5 Likes
8

Hi @fazzio349, Codeacademy and many other site use this plugin to create that banner Branding - Custom brand header with logo, navigation and icons
.
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.
:wink:

6 Likes