Forum HTML Template

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us here. Thank you very much!

Forum HTML Template is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Folder Structure

Here they are, sorted alphabetically:

  1. Documentation - Documentation for Forum HTML site template
  2. HTML - Main folder for template

HTML folder structure:

  • /HTML
    • /css (Template CSS)
    • /less (Template Less)
    • /fonts (Font Awesome)
    • /js (Template initialization js)
    • /images (All Images)
    • /vendor (All Plugins)

CONTENT

Content divided on pages:

  • index.html - Main page
  • single-topic.html - Single topic page
  • create-topic.html - Create topic page
  • simple-signup.html - Simple signup page

HTML Structure

Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    <!DOCTYPE html>
        <html lang="en">
            ...
        </html>

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

    <div class="row">
        <div class="col-lg-4">...</div>
        <div class="col-lg-8">...</div>
    </div>

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using .col-lg-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

    <div class="row">
            <div class="col-lg-4">...</div>
            <div class="col-lg-4 col-lg-offset-2">...</div>
        </div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Files

Css file located at css folder.

  • style.css - Theme main CSS file.

Less Files

All Less files located at less folder.

  • style.less - Theme main less file.
  • general/_variables.less - Variables less file.
  • general/_mixin.less - Mixins less file.
  • general/_modifiers.less - Modifiers less file.
  • general/_typography.less - Typography less file.
  • blocks/ - Blocks less folder
  • colorize/ - Colorize less folder

JavaScript

All JS files located at js folder.

  • js/app.js - Theme main JS file.
  • vendor/ - vendor plugins JS files

and other.

If you need more information, please visit plugins official sites.

Icons

FlatIcons is a free @font-face iconset. You can see all demo icons in file fonts/font-icon/demo.html.
Use the icon class on "display:inline" elements: 

          ...
          <i class="icon-Search"></i>
            ...
or 
          ...
          <span class="icon-Menu_Icon"></span>
            ...

Fonts

To change the custom font, please take a look in the Forum.css: 
  /* Google font */
To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.

PSD Files

You can purchase PSD files here.

Sources and Credits

We have used the following files as listed.

Hope that you will enjoy in Forum HTML as much as we've enjoyed making this template.