Frontend Theme

Color Admin

“Support Forum Template” Documentation by “Sean Ngu” v4.3

Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

A) HTML Structure - top

This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.

<!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-fixed-top">
  <!-- header here -->
</div>
<!-- end #header -->

<!-- begin search-banner -->
<div class="search-banner has-bg">
  <!-- search-banner here -->
</div>
<!-- end search-banner -->

<!-- begin content -->
<div class="content">
  <!-- content here -->
</div>
<!-- end content -->

<!-- begin #footer -->
<div id="footer" class="footer">
  <!-- footer here -->
</div>
<!-- end #footer -->

<!-- begin #footer-copyright -->
<div id="footer-copyright" class="footer-copyright">
  <!-- footer-copyright here -->
</div>
<!-- end #footer-copyright -->

B) Beginning of Page - top

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

C) Page Head - top

Page head contains metadata, javascript and css files:

<head>
  <meta charset="utf-8" />
  <title>Color Admin | Support Forum Front End Theme</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  
  <!-- ================== BEGIN BASE CSS STYLE ================== -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet" />
  <link href="../assets/plugins/animate/animate.min.css" rel="stylesheet" />
  <link href="../assets/css/forum/style.min.css" rel="stylesheet" />
  <link href="../assets/css/forum/style-responsive.min.css" rel="stylesheet" />
  <link href="../assets/css/forum/theme/default.css" id="theme" rel="stylesheet" />
  <!-- ================== END BASE CSS STYLE ================== -->
  
  <!-- ================== BEGIN BASE JS ================== -->
  <script src="../assets/plugins/pace/pace.min.js"></script>
  <!-- ================== END BASE JS ================== -->
</head>

D) Top Menu - top

<!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-fixed-top">
  <!-- begin container -->
  <div class="container">
    <!-- begin navbar-header -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">
        <span class="navbar-logo"></span>
        <span class="brand-text">
          Support Forum
        </span>
      </a>
    </div>
    <!-- end navbar-header -->
    <!-- begin #header-navbar -->
    <div class="collapse navbar-collapse" id="header-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <form class="navbar-form">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Enter Keywords..." />
              <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
            </div>
          </form>
        </li>
        <li><a href="javascript:;">Create Account</a></li>
        <li><a href="javascript:;">Sign In</a></li>
      </ul>
    </div>
    <!-- end #header-navbar -->
  </div>
  <!-- end container -->
</div>
<!-- end #header -->

E) Page Content - top

There have 2 options of page content. HTML code of Content container as shown below:

Page Content with Background

<!-- begin search-banner -->
<div class="search-banner has-bg">
  <!-- begin bg-cover -->
  <div class="bg-cover">
    <img src="../assets/img/cover/cover-1.jpg" alt="" />
  </div>
  <!-- end bg-cover -->
  <!-- begin container -->
  <div class="container">
    <!-- content here -->
  </div>
  <!-- end container -->
</div>
<!-- end search-banner -->

Page Content without Background

<!-- begin content -->
<div class="content">
  <!-- begin container -->
  <div class="container">
    <!-- content here -->
  </div>
  <!-- end container -->
</div>
<!-- end content -->

F) Page Footer - top

<!-- begin #footer -->
<div id="footer" class="footer">
  <!-- begin container -->
  <div class="container">
    <!-- begin row -->
    <div class="row">
      <!-- begin col-4 -->
      <div class="col-md-4">
        <!-- begin section-container -->
        <div class="section-container">
          <h4>About Color Admin</h4>
          <p>
            ...
          </p>
        </div>
        <!-- end section-container -->
      </div>
      <!-- end col-4 -->
      <!-- begin col-4 -->
      <div class="col-md-4">
        <!-- begin section-container -->
        <div class="section-container">
          <h4>Latest Post</h4>
          <ul class="latest-post">
            <li>
              <h4 class="title"><a href="#">Consectetur adipiscing elit ultrices</a></h4>
              <p class="time">yesterday 10:42am</p>
            </li>
            <li>
              <h4 class="title"><a href="#">Fusce ultrices ipsum porttitor</a></h4>
              <p class="time">10/04/2015</p>
            </li>
            <li>
              <h4 class="title"><a href="#">Cras porttitor fermentum adipiscing</a></h4>
              <p class="time">02/04/2015</p>
            </li>
          </ul>
        </div>
        <!-- end section-container -->
      </div>
      <!-- end col-4 -->
      <!-- begin col-4 -->
      <div class="col-md-4">
        <!-- begin section-container -->
        <div class="section-container">
          <h4>New Users</h4>
          <ul class="new-user">
            <li><a href="#"><img src="../assets/img/user/user-1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-2.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-4.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-5.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-6.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-7.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-8.jpg" alt="" /></a></li>
            <li><a href="#"><img src="../assets/img/user/user-9.jpg" alt="" /></a></li>
          </ul>
        </div>
        <!-- end section-container -->
      </div>
      <!-- end col-4 -->
    </div>
    <!-- end row -->
  </div>
  <!-- end container -->
</div>
<!-- end #footer -->

<!-- begin #footer-copyright -->
<div id="footer-copyright" class="footer-copyright">
  <div class="container">
    © 2014 - 2019 SeanTheme All Right Reserved
    <a href="#">Contact Us</a> 
    <a href="#">Knowledge Base</a>
  </div>
</div>
<!-- end #footer-copyright -->

G) Panel Theme - top

Panel Theme used to customize the overall layout options. 

<!-- begin theme-panel -->
<div class="theme-panel">
  <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
  <div class="theme-panel-content">
    <ul class="theme-list clearfix">
      <li>
        <a href="javascript:;" class="bg-purple" 
          data-theme="purple" 
          data-theme-file="../assets/css/forum/theme/purple.css"
          data-click="theme-selector" 
          data-toggle="tooltip" 
          data-trigger="hover" 
          data-container="body" 
          data-title="Purple"> </a>
      </li>
      ...
    </ul>
  </div>
</div>
<!-- end theme-panel -->

H) End of Page (Javascript) - top

Javascript files loaded in the end of page. This will reduce page load time. 

  <!-- ================== BEGIN BASE JS ================== -->
  <script src="../assets/plugins/jquery/jquery-3.3.1.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!--[if lt IE 9]>
    <script src="assets/crossbrowserjs/html5shiv.js"></script>
    <script src="assets/crossbrowserjs/respond.min.js"></script>
    <script src="assets/crossbrowserjs/excanvas.min.js"></script>
  <![endif]-->
  <script src="../assets/plugins/js-cookie/js.cookie.js"></script>
  <script src="../assets/plugins/paroller/jquery.paroller.min.js"></script>
  <script src="../assets/js/forum/apps.min.js"></script>
  <!-- ================== END BASE JS ================== -->
  
  <script>  
    $(document).ready(function() {
      App.init();
    });
  </script>
</body>
</html>

I) Page Theme Options - top

Select the css theme from the ../assets/css/forum/ folder.

Available Theme Options

<!-- DEFAULT - GREEN -->
<link href="../assets/css/forum/theme/default.css" rel="stylesheet" />
<!-- BLUE -->
<link href="../assets/css/forum/theme/blue.css" rel="stylesheet" />
<!-- PURPLE -->
<link href="../assets/css/forum/theme/purple.css" rel="stylesheet" />
<!-- RED -->
<link href="../assets/css/forum/theme/red.css" rel="stylesheet" />
<!-- ORANGE -->
<link href="../assets/css/forum/theme/orange.css" rel="stylesheet" />
<!-- PINK -->
<link href="../assets/css/forum/theme/pink.css" rel="stylesheet" />
<!-- YELLOW -->
<link href="../assets/css/forum/theme/yellow.css" rel="stylesheet" />
<!-- LIME -->
<link href="../assets/css/forum/theme/lime.css" rel="stylesheet" />
<!-- GREEN -->
<link href="../assets/css/forum/theme/green.css" rel="stylesheet" />
<!-- AQUA -->
<link href="../assets/css/forum/theme/aqua.css" rel="stylesheet" />
<!-- INDIGO -->
<link href="../assets/css/forum/theme/indigo.css" rel="stylesheet" />
<!-- BLACK -->
<link href="../assets/css/forum/theme/black.css" rel="stylesheet" />

J) Plugins & Resources - top

Below is the list of all plugins and external resources used to power this template.

Name CSS Files
jQuery
v3.3.1

Required JS File

<script src="../assets/plugins/jquery/jquery-3.3.1.min.js"></script>
v3.2.1

Required JS File

<script src="../assets/plugins/jquery/jquery-3.2.1.min.js"></script>
v1.9.1

Required JS File

<script src="../assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="../assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>

Official Link:
http://jquery.com/
Bootstrap

Required CSS File

<link rel="stylesheet" href="../assets/plugins/bootstrap/css/bootstrap.min.css" />

Required JS File

<script src="../assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

Official Link:
http://getbootstrap.com/
Font Awesome

Required CSS File

<link rel="stylesheet" href="../assets/plugins/font-awesome/css/all.min.css" />

Official Link:
https://fontawesome.com/
Animate.css

Required CSS File

<link rel="stylesheet" href="../assets/plugins/animate/animate.min.css" />

Official Link:
http://daneden.github.io/animate.css/
jQuery Cookie

Required JS File

<script src="../assets/plugins/jquery-cookie/jquery.cookie.js"></script>

Official Link:
https://github.com/carhartl/jquery-cookie
Pace

Required JS File

<script src="../assets/plugins/pace/pace.min.js"></script>

Official Link:
http://github.hubspot.com/pace/
JS Cookie (Added in V4.0.0)

Required JS File

<script src="../assets/plugins/js-cookie/js.cookie.js"></script>

Official Link:
https://github.com/js-cookie/js-cookie
Line Awesome (Added in V4.0.0)

Required CSS File

<link rel="stylesheet" href="../assets/plugins/line-awesome/css/line-awesome-font-awesome.min.css" />

Official Link:
https://icons8.com/line-awesome
Paroller (Added in V4.2.0)

Required JS File

<script="../assets/plugins/paroller/jquery.paroller.min.js"></script>

Official Link:
https://tgomilar.github.io/paroller.js/

K) References - top

I've used the following images, icons or other files as listed.

jQuery Plugins

  1. jQuery:http://jquery.com/
  2. jQuery UI:http://jqueryui.com/
  3. Bootstrap:http://getbootstrap.com/
  4. Font Awesome:http://fortawesome.github.io/Font-Awesome/
  5. Animate.css:http://daneden.github.io/animate.css/
  6. Pace:http://github.hubspot.com/pace/
  7. jQuery Cookie:https://github.com/carhartl/jquery-cookie
  8. JS Cookie:https://github.com/js-cookie/js-cookie
  9. Line Awesome:https://icons8.com/line-awesome
  10. Paroller:https://tgomilar.github.io/paroller.js/

L) Change Log - top

Version 4.3.0 - 31 January 2019
  • UPDATE: Bootstrap 4.2.1
  • UPDATE: FontAwesome 5.7.0
Version 4.2.0 - 16 September 2018
  • NEW: 7 Color Scheme (Pink / Yellow / Lime / Green / Aqua / Indigo / Black)
  • NEW: Paroller Plugins Compatibility
  • UPDATE: Bootstrap 4.1.3
  • UPDATE: jQuery 3.3.1
  • UPDATE: FontAwesome 5.3.1
  • ENHANCE: Remove mixed space / tabs
Version 4.0.0 - 01 March 2018
  • NEW: Line Awesome
    • Added Directory: /assets/plugins/line-awesome/
  • NEW: JS Cookie
    • Added Directory: /assets/plugins/js-cookie/
    • Modified File: /assets/js/forum/apps.js
    • Modified File: /assets/js/forum/apps.min.js
  • NEW: Wide Screen Support
    • Modified File: /assets/css/forum/style.css
    • Modified File: /assets/css/forum/style.min.css
  • ENHANCE: Theme Panel CSS File Setting
    • Modified File: /assets/js/forum/apps.js
    • Modified File: /assets/js/forum/apps.min.js
  • UPDATE: jQuery 1.9.1 to jQuery 3.2.1
    • Updated Directory: /assets/plugins/jQuery/
    • Modified File: /assets/js/blog/apps.js
    • Modified File: /assets/js/blog/apps.min.js
Version 2.0.0 - 30 April 2016
  • UPDATE: Bootstrap 3.3.5 to Bootstrap 3.3.6
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: FontAwesome 4.3.0 to 4.6.1
    • Updated Directory: /assets/plugins/bootstrap/
Version 1.8.0 - 30 June 2015
  • Initial Released