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.

  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

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
Alexandra

Alexandra

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

More from Medium

PX to Rem Converter

The Best Way To Practise A Speech

Leveraging the full potential of tiered intervention systems can support recovery and redesign

5 easy ways to create a healthy work environment