Customizing a Discourse Forum for Non-Coders and Designers

I’ve had the privilege of moderating, growing, and designing Discourse forums. I wanted to create this guide as a quick walkthrough to help non-coders and designers customize their Discourse forum’s look-and-feel and play with coding! You will need to have admin permissions to do this.

1. Create a Header With Links!

These icons are links to other places your community lives, your blog, website, social media channels, or help pages! You can do as many, or few as possible.

What it looks like.

The Code.

Other examples I’ve done.

A non-icon example from one of my favorite online communities, FeverBee.

Inspired? Cool. It’s all in the details. Let’s dissect one of the lines so you can learn how to customize it.

Go to Admin → Customize → CSS/HTML → create a New customization → click on the Header tab. This is where you will put the Header icon/s code. You can call it anything you want, I called mine “Header Icon.”

Step 1.

<a href=”https://www.dreamfactory.com/" target=”_blank”><i class=”fa fa-home fa-lg”></i><! — <span> DreamFactory.com</span> →</a>

Insert the URL you would like it directed to.

Step 2.

<a href=”https://www.dreamfactory.com/" target=”_blank”><i class=”fa fa-home fa-lg”></i><! — <span> DreamFactory.com</span> →</a>

_blank Opens the link in a new window or tab. This is a handy script to keep in mind.

Step 3.

<a href=”https://www.dreamfactory.com/" target=”_blank”><i class=”fa fa-home fa-lg”></i><! — <span> DreamFactory.com</span> →</a>

Find some cool icons that you want to use. I recommend using FontAwesome. Search or browse icons, and then click on the one you want to get the icon name. You can place FontAwesome icons just about anywhere with the <i> tag using the CSS Prefix fa and the icon’s name.

Optional: To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

Step 4.

<a href=”https://www.dreamfactory.com/" target=”_blank”><i class=”fa fa-home fa-lg”></i><! — <span> DreamFactory.com</span> →</a>

This is optional. If you would like the name to be displayed when someone hovers over the icon with their cursor, label it here. Sometimes if you have tons of icons, or you have an inexperienced community, they may not recognize what the icons represent. Having a label is usually always a safe bet.

Step 5.

Create as many of the above Icon links as you want! Just make sure to wrap them in this:

<div id=”top-navbar”>
 <div id=”top-navbar-links”>
 <span id=”navbar-right”>
YOUR LINK/S CODE HERE. One line per link/icon.
</span>
 </div>
</div>

Step 6.

Now, navigate to the CSS tab (next to the Header tab). This is where you will paste the below code. This code will help you customize the background color and which side you want the icons to start from.

/********** Nav Header **********/
#top-navbar {
 height:44px;
 background-color:#7093b5;
 width:100%;
 z-index: 1001;
}
div#top-navbar-links {
 width:99%;
 margin: 0 auto;
 padding-top:5px;
 max-width:1100px;
}
div#top-navbar-links a {
 color:#FFFFFF; 
 font-size: 18px;
 font-weight: lighter;
}

#navbar-left {
 float: left;
 margin-left: -15px;
 padding-top: 8px;
}
#navbar-left a {
 font-size: 20px;
 padding-left: 20px;
}
#navbar-right {
 float:right;
 padding-top: 8px;
}
#navbar-right a {
 padding-left: 20px; 
}

Step 7.

Check the Enabled box and hit Save! That’s it.

If you don’t see the changes right away, do a hard refresh of the page and/or clear your cache and cookies.

Want even more icon functionality, such as animated icons, fixed width or bordered? Check out more options and examples here.

2. Add a Logo!

Step 1.

Create a New style and name it something like “Company Logo Header”. Paste this code under the Header tab at the top:

<div id=”top-navbar” class=”container” style=”padding-left:5px; padding-top:5px;display:none;”><a target=”_blank” href=”http://www.dreamfactory.com/">DreamFactory Home</a></div>

Update the link you want the logo to redirect to in bold above and the name in italics.

Step 2.

Upload the logo image under a private category like Staff. Create a new thread and upload the image. Use this thread for storing images and files used in the forum design. Don’t delete it! This same method will be used to store your banner image outlined in the next section below.

1. Use the upload toolbar icon in the post editor, or drag-and-drop or paste images.
2. Submit your reply to post it.
3. Right-click the images in your new post to get the path to the uploaded images, or click the edit icon to edit your post and retrieve the path to the images. Copy the image paths.
4. Paste those image paths into basic settings:

http://YourForumURL.com/admin/site_settings/category/required

Or navigate to Settings → Required → Logo URL.

You’re all done!

3. Create a Banner!

Banners are great for onboarding users and highlighting important information. It also helps guide folks on how to use the forum and interact in your community! Usually, they include community guidelines, a way to learn how to use the forum or perhaps relevant company information like an upcoming event, bug or release. Here are some examples of banners I’ve created for DreamFactory Software and Codecademy.

Step 1.

Create a new style and name it something like “Banner.” Paste in the CSS code below:

Try this more simplified code:

// Banner
#banner {
 border-radius: 0;
 box-shadow: none;
 background: url(“IMAGE PATH URL HERE") no-repeat;
 padding: 2em 2em 1em 2em;
 max-height: inherit;
 background-size: cover;
 background-color: rgba(255, 255, 255, 0.7);
 background-blend-mode: color;
 color: rgba(0,0,0,0.8);
 margin-bottom: 20px;
}
#banner .close {
 color: #fff;
}
#banner #banner-content h2 {
 margin-bottom: 0.75em;
}

Step 2.

Now, you need to create a new thread that will serve as the text of the banner. Again, you will want to create a new thread under a private category like “staff.” See below my banner thread under Staff.

After you’ve posted it as a comment, you will need to click the wrench icon and select Pin Topic.

Then select the third option — Banner Topic.

When you do that, a yellow comment will appear:

Boom! As an FYI: Users will be able to exit out the banner at any time to remove it from view.

Congratulations! You’ve just customized your Discourse forum’s look and feel. Let me know what you thought about this tutorial, and if you have any suggestions or feedback leave them in the comments below. Or, join our thread where we talk about this and more on FeverBee here.