Pre-Built Theme?

Product Support Self-hosting

AI-generated summary

The discussion revolves around finding a pre-built theme similar to the one used by Codecademy’s forums. fazzio349 initially asks if the theme is available for upload and customization, and cpradio suggests that it’s likely a customized version of the out-of-the-box theme with specific settings.

fazzio349 is able to replicate some of the features but struggles to find the settings for the header image and additional resources section. [cpradio](/t/-/77507/4 and 5) provides code snippets that can be used to achieve similar results, including a script that controls the visibility of the banner.

fazzio349 points out that another site, SmartThings, has a similar layout, but doesn’t have the additional resources section. cpradio suggests that with the provided code snippets and some CSS, it’s possible to achieve the desired results.

dax reveals that Codecademy and other sites use a plugin that’s currently broken on the latest versions of Discourse. The plugin’s creator plans to turn it into a theme, making it more stable and easier to integrate into site customizations.

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.

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

8

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
.
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: