EDIT: June 2019
This approach is now out of date. For a more elegant banner solution check out https://meta.discourse.org/t/versatile-banner/109133
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.
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 Font Awesome 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 are representing. 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>
The first link line will be the left most icon. So for example, line 1 links to Facebook, line 2 links to twitter, line 3 links to your company home page, line 4 links to your blog. The icons will be displayed from left to right: Facebook, Twitter, Company home page, Blog. Facebook will be nearest to the center of the forum page if you start them on the right most side. In Step 6, you can change the side the icons start on, from right in my examples, to left.
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;
}
I suggest only customizing the above bolded Hex Color numbers. The first bolded Hex Code represents the color of the background.
#top-navbar {
height:44px;
background-color:#7093b5;
width:100%;
z-index: 1001;
}The second bolded Hex Code represents the color of the icon themselves.
div#top-navbar-links a {
color:#FFFFFF;
font-size: 18px;
font-weight: lighter;
}Get your unique company color’s Hex Code #’s. If you don’t have them, you can download an application that can allow you to pick colors straight from the internet. I use tools such ColorZilla or Eyedropper for Chrome. Then, you would just navigate to a page where the colors are, and click on the color using one of those tools to get the Hex Color #. Then, just copy and paste the number to replace it.
Note, you must keep the “#”.
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/"></a> DreamFactory Home
</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.
- Use the upload toolbar icon in the post editor, or drag-and-drop or paste images.
- Submit your reply to post it.
- 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.
- Paste those image paths into basic settings:
http://YourForumURL.com/admin/site_settings/category/requiredOr navigate to Settings → Required → Logo URL.
You’re all done!
3. Create a Banner!
Banners are great for on-boarding 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 a upcoming event, bug or release. Here’s some examples of banners I’ve created for DreamFactory Software and Codecademy.
Step 1.
Create a New style and name it something like “Banner”. Under CSS paste the code below:
// 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;
}
Change the bolded url to your image url. Upload it under a private area like Staff, and then right click to copy the image address. Remember we just did this above in section 2, under step 2.
EDIT: I’ve had feedback that the above code doesn’t work for some folks. So below is slightly more simplified code.
Try this more simplified code:
#banner {
border-radius: 0;
box-shadow: none;
background: url(“IMAGE PATH URL HERE”) no-repeat;
padding: 20px;
max-height: inherit;
background-size: cover;
background-color: rgba(255, 255, 255, .6);
background-blend-mode: color;
}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 anytime 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.
