Color Admin

“One Page Parallax Template” Documentation by “Sean Ngu” v4.3

Created: 31/October/2014
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!

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 #page-container -->
<div id="page-container" class="fade">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-transparent navbar-fixed-top">
    <!-- header here -->
  </div>
  <!-- end #header -->
  
  <!-- begin #home -->
  <div id="home" class="content has-bg home">
    <!-- home here -->
  </div>
  <!-- end #home -->
  
  <!-- begin #about -->
  <div id="about" class="content" data-scrollview="true">
    <!-- about us here -->
  </div>
  <!-- end #about -->

  <!-- begin #milestone -->
  <div id="milestone" class="content bg-black-darker has-bg" data-scrollview="true">
    <!-- milestone here -->
  </div>
  <!-- end #milestone -->
  
  <!-- begin #team -->
  <div id="team" class="content" data-scrollview="true">
    <!-- team here -->
  </div>
  <!-- end #team -->
  
  <!-- begin #quote -->
  <div id="quote" class="content bg-black-darker has-bg" data-scrollview="true">
    <!-- quote here -->
  </div>
  <!-- end #quote -->
  
  <!-- beign #service -->
  <div id="service" class="content" data-scrollview="true">
    <!-- service here -->
  </div>
  <!-- end #about -->
  
  <!-- beign #action-box -->
  <div id="action-box" class="content has-bg" data-scrollview="true">
    <!-- action-box here -->
  </div>
  <!-- end #action-box -->
  
  <!-- begin #work -->
  <div id="work" class="content" data-scrollview="true">
    <!-- work here -->
  </div>
  <!-- end #work -->
  
  <!-- begin #client -->
  <div id="client" class="content has-bg bg-green" data-scrollview="true">
    <!-- client here -->
  </div>
  <!-- end #client -->
  
  <!-- begin #pricing -->
  <div id="pricing" class="content" data-scrollview="true">
    <!-- pricing here -->
  </div>
  <!-- end #pricing -->
  
  <!-- begin #contact -->
  <div id="contact" class="content bg-silver-lighter" data-scrollview="true">
    <!-- contact here -->
  </div>
  <!-- end #contact -->
  
  <!-- begin #footer -->
  <div id="footer" class="footer">
    <!-- footer here -->
  </div>
  <!-- end #footer -->
  
  <!-- begin theme-panel -->
  <div class="theme-panel">
    <!-- theme-panel here -->
  </div>
  <!-- end theme-panel -->
</div>
<!-- end #page-container -->

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

Page head contains metadata, javascript and css files:

<head>
  <meta charset="utf-8" />
  <title>Color Admin | One Page Parallax 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/one-page-parallax/style.min.css" rel="stylesheet" />
  <link href="../assets/css/one-page-parallax/style-responsive.min.css" rel="stylesheet" />
  <link href="../assets/css/one-page-parallax/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>
<!-- begin #header -->
<div id="header" class="header navbar navbar-transparent 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="brand-logo"></span>
        <span class="brand-text">
          <span class="text-theme">Color</span> Admin
        </span>
      </a>
    </div>
    <!-- end navbar-header -->
    <!-- begin navbar-collapse -->
    <div class="collapse navbar-collapse" id="header-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active dropdown">
          <a href="#home" data-click="scroll-to-target" data-toggle="dropdown">HOME <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-left animated fadeInDown">
            <li><a href="index.html">Page with Transparent Header</a></li>
            <li><a href="index_inverse_header.html">Page with Inverse Header</a></li>
            <li><a href="index_default_header.html">Page with White Header</a></li>
            <li><a href="extra_element.html">Extra Element</a></li>
          </ul>
        </li>
        <li><a href="#about" data-click="scroll-to-target">ABOUT</a></li>
        <li><a href="#team" data-click="scroll-to-target">TEAM</a></li>
        <li><a href="#service" data-click="scroll-to-target">SERVICES</a></li>
        <li><a href="#work" data-click="scroll-to-target">WORK</a></li>
        <li><a href="#client" data-click="scroll-to-target">CLIENT</a></li>
        <li><a href="#pricing" data-click="scroll-to-target">PRICING</a></li>
        <li><a href="#contact" data-click="scroll-to-target">CONTACT</a></li>
      </ul>
    </div>
    <!-- end navbar-collapse -->
  </div>
  <!-- end container -->
</div>
<!-- end #header -->

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

Page Content with Background

<!-- begin content -->
<div class="content has-bg">
  <!-- begin content-bg -->
  <div class="content-bg">
    <img src="../assets/img/cover/cover-1.jpg" alt="" />
  </div>
  <!-- end content-bg -->
  <!-- begin container -->
  <div class="container">
      <h2 class="content-title">
        <!-- content title here --->
      </h2>
      <p class="content-desc">
        <!-- content desc here --->
      </p>
    <!-- your content here -->
  </div>
  <!-- end container -->
</div>
<!-- end content -->

Page Content without Background

<!-- begin content -->
<div class="content">
  <!-- begin container -->
  <div class="container">
      <h2 class="content-title">
        <!-- content title here --->
      </h2>
      <p class="content-desc">
        <!-- content desc here --->
      </p>
    <!-- your content here -->
  </div>
  <!-- end container -->
</div>
<!-- end content -->
<!-- begin #footer -->
<div id="footer" class="footer">
  <div class="container">
    <div class="footer-brand">
      <div class="footer-brand-logo"></div>
      Color Admin
    </div>
    <p>
      © Copyright Color Admin 2019 <br />
      An admin & front end theme with serious impact. Created by <a href="#">SeanTheme</a>
    </p>
    <p class="social-list">
      <a href="#"><i class="fa fa-facebook fa-fw"></i></a>
      <a href="#"><i class="fa fa-instagram fa-fw"></i></a>
      <a href="#"><i class="fa fa-twitter fa-fw"></i></a>
      <a href="#"><i class="fa fa-google-plus fa-fw"></i></a>
      <a href="#"><i class="fa fa-dribbble fa-fw"></i></a>
    </p>
  </div>
</div>
<!-- end #footer -->

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/one-page-parallax/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 -->

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/scrollMonitor/scrollMonitor.js"></script>
  <script src="../assets/plugins/paroller/jquery.paroller.min.js"></script>
  <script src="../assets/js/one-page-parallax/apps.min.js"></script>
  <!-- ================== END BASE JS ================== -->
  
  <script>  
    $(document).ready(function() {
      App.init();
    });
  </script>
</body>
</html>

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

Available Theme Options

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

Here is the general structure for the each case of page options.

Page with default small header navigation

<body class="page-navbar-fixed-top-sm">

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

scrollMonitor

Required JS File

<script src="../assets/plugins/scrollMonitor/scrollMonitor.js"></script>

Official Link:
https://github.com/sakabako/scrollMonitor

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/

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/one-page-parallax/apps.js
    • Modified File: /assets/js/one-page-parallax/apps.min.js
  • NEW: Wide Screen Support
    • Modified File: /assets/css/one-page-parallax/style.css
    • Modified File: /assets/css/one-page-parallax/style.min.css
  • FIX: Sticky Navbar
    • Modified File: /assets/js/one-page-parallax/apps.js
    • Modified File: /assets/js/one-page-parallax/apps.min.js
  • ENHANCE: Theme Panel CSS File Setting
    • Modified File: /assets/js/one-page-parallax/apps.js
    • Modified File: /assets/js/one-page-parallax/apps.min.js
  • UPDATE: jQuery 1.9.1 to jQuery 3.2.1
    • Updated Directory: /assets/plugins/jQuery/
    • Modified File: /assets/js/one-page-parallax/apps.js
    • Modified File: /assets/js/one-page-parallax/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/
  • FIX: Missing Panel Styling in LESS file
    • Updated Directory: /assets/less/
Version 1.8.0 - 30 June 2015
  • FIX: Youtube video full screen issues
    • Modified CSS Files: /assets/css/style.css
    • Modified CSS Files: /assets/css/style.min.css
    • Modified JS Files: /assets/js/apps.css
    • Modified JS Files: /assets/js/apps.min.css
  • UPDATE: Include Bootstrap LESS
    • Added Directory: /assets/less/bootstrap/
  • UPDATE: Bootstrap 3.3.4 to Bootstrap 3.3.5
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: Less 1.7.4 to Less 2.5.1
    • Updated Directory: /assets/plugins/less/
Version 1.7.0 - 1 May 2015
  • UPDATE: Bootstrap 3.3.3 to Bootstrap 3.3.4
    • Updated Directory: /assets/plugins/bootstrap/
Version 1.6.0 - 23 January 2015
  • UPDATE: Bootstrap 3.3.1 to Bootstrap 3.3.2
    • Updated Directory: /assets/plugins/bootstrap/
  • UPDATE: FontAwesome 4.2.0 to Bootstrap 4.3.0
    • Updated Directory: /assets/plugins/font-awesome/
Version 1.5.0 - 30 November 2014
  • UPDATE: Bootstrap 3.2.0 to Bootstrap 3.3.1
    • Modified Directory files: /assets/plugins/bootstrap-3.2.0/ to /assets/plugins/bootstrap/
    • Modified CSS Files: /assets/plugins/bootstrap/css/bootstrap.min.js
    • Modified JS Files: /assets/plugins/bootstrap/js/bootstrap.min.js
  • UPDATE: jQuery 1.8.2 to jQuery 1.9.1
    • Modified Directory files: /assets/plugins/jquery-1.8.1/ to /assets/plugins/jquery
    • Added JS Files: /assets/plugins/jquery/jquery-1.9.1.js
    • Added JS Files: /assets/plugins/jquery/jquery-1.9.1.min.js
    • Added JS Files: /assets/plugins/jquery/jquery-migrate-1.1.0.js
    • Added JS Files: /assets/plugins/jquery/jquery-migrate-1.1.0.min.js
  • MODIFY: FontAwesome Directory
    • Modified Directory files: /assets/plugins/font-awesome-4.2.0/ to /assets/plugins/font-awesome/
Version 1.4.0 - 31 October 2014
  • Initial Released