Customizing a Discourse Forum for noncoders and designers.

1. Create a Header with links!

Step 1.

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

Step 2.

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

Step 3.

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

Step 4.

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

Step 5.

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

/********** 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;
}
#top-navbar {
height:44px;
background-color:#7093b5;
width:100%;
z-index: 1001;
}
div#top-navbar-links a {
color:#FFFFFF;
font-size: 18px;
font-weight: lighter;
}

Step 7.

2. Add a logo!

Step 1.

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

Step 2.

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

3. Create a Banner!

Step 1.

// 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;
}
#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.

--

--

Program Manager @ Google. I write stories around: Design, Community, Product, Sustainability, Philosophy, Work, Career.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store