“Blog Concept Front End Template” Documentation by “Sean Ngu” v4.7
Last Updated: 25/October/2020
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 #header --> <div id="header" class="header navbar navbar-default navbar-fixed-top"> <!-- header here --> </div> <!-- end #header --> <!-- begin #page-title --> <div id="page-title" class="page-title has-bg"> <!-- page-title here --> </pre> <!-- end #page-title --> <!-- begin #content --> <div id="content" 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 -->
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 | Blog Concept 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/blog/style.min.css" rel="stylesheet" />
<link href="../assets/css/blog/style-responsive.min.css" rel="stylesheet" />
<link href="../assets/css/blog/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-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="brand-logo"></span>
<span class="brand-text">
COLOR 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="dropdown">
<a href="javascript:;" data-toggle="dropdown">HOME <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index_transparent_header.html">Page with Transparent Header</a></li>
<li><a href="index_inverse_header.html">Page with Inverse Header</a></li>
<li><a href="index.html">Default Header</a></li>
</ul>
</li>
<li>
<a href="javascript:;" data-toggle="dropdown">POSTS <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="post_grid.html">Page with Grid View Blog Post</a></li>
<li><a href="post_without_sidebar.html">Page without Sidebar</a></li>
</ul>
</li>
<li><a href="about_me.html">ABOUT ME</a></li>
<li><a href="contact_us.html">CONTACT US</a></li>
<li><a href="https://wrapbootstrap.com/theme/color-admin-admin-template-front-end-WB0N89JMK">PURCHASE</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:
<!-- begin #page-title -->
<div id="page-title" class="page-title has-bg">
<div class="bg-cover"><img src="../assets/img/cover/cover-1.jpg" alt="" /></div>
<div class="container">
<!-- page-title here -->
</div>
</div>
<!-- end #page-title -->
<!-- begin content -->
<div class="content">
<!-- begin container -->
<div class="container">
<!-- your content here -->
</div>
<!-- end container -->
</div>
<!-- end content -->
<!-- begin #footer -->
<div id="footer" class="footer">
<!-- begin container -->
<div class="container">
<!-- begin row -->
<div class="row">
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<!-- begin section-container -->
<div class="section-container">
<h4 class="footer-title">Categories</h4>
<ul class="categories">
<li><a href="#">Sports</a></li>
<li><a href="#">Outdoor Sports</a></li>
<li><a href="#">Indoor Sports</a></li>
<li><a href="#">Video Shooting</a></li>
<li><a href="#">Drone</a></li>
<li><a href="#">Uncategorized</a></li>
</ul>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<!-- begin section-container -->
<div class="section-container">
<h4 class="footer-title">Archives</h4>
<ul class="archives">
<li><a href="#">June 2015</a> <span class="total">(102)</span></li>
<li><a href="#">May 2015</a> <span class="total">(46)</span></li>
<li><a href="#">April 2015</a> <span class="total">(84)</span></li>
<li><a href="#">March 2015</a> <span class="total">(67)</span></li>
<li><a href="#">February 2015</a> <span class="total">(99)</span></li>
<li><a href="#">January 2015</a> <span class="total">(113)</span></li>
<li><a href="#">December 2014</a> <span class="total">(25)</span></li>
</ul>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<!-- begin section-container -->
<div class="section-container">
<h4 class="footer-title">Recent Posts</h4>
<ul class="recent-post">
<li>
<h4>
<a href="#">Nam ut urna hendrerit</a>
<span class="time">February 22, 2015</span>
</h4>
</li>
<li>
<h4>
<a href="#">Class aptent taciti sociosqu</a>
<span class="time">July 15, 2015</span>
</h4>
</li>
<li>
<h4>
<a href="#">Donec rhoncus arcu</a>
<span class="time">March 21, 2015</span>
</h4>
</li>
</ul>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<div class="section-container">
<h4 class="footer-title">About Color Admin</h4>
<address>
<strong>Twitter, Inc.</strong><br />
795 Folsom Ave, Suite 600<br />
San Francisco, CA 94107<br />
P: (123) 456-7890<br />
<br />
<strong>Full Name</strong><br />
<a href="#">first.last@example.com</a>
</address>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end #footer -->
<!-- begin #footer-copyright -->
<div id="footer-copyright" class="footer-copyright">
<!-- begin container -->
<div class="container">
<span class="copyright">© 2019 SeanTheme All Right Reserved</span>
<ul class="social-media-list">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
<!-- end container -->
</div>
<!-- end #footer-copyright -->
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/blog/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/paroller/jquery.paroller.min.js"></script>
<script src="../assets/js/blog/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.
<!-- DEFAULT - TEAL --> <link href="../assets/css/blog/theme/default.css" rel="stylesheet" /> <!-- BLUE --> <link href="../assets/css/blog/theme/blue.css" rel="stylesheet" /> <!-- PURPLE --> <link href="../assets/css/blog/theme/purple.css" rel="stylesheet" /> <!-- RED --> <link href="../assets/css/blog/theme/red.css" rel="stylesheet" /> <!-- ORANGE --> <link href="../assets/css/blog/theme/orange.css" rel="stylesheet" /> <!-- PINK --> <link href="../assets/css/blog/theme/pink.css" rel="stylesheet" /> <!-- YELLOW --> <link href="../assets/css/blog/theme/yellow.css" rel="stylesheet" /> <!-- LIME --> <link href="../assets/css/blog/theme/lime.css" rel="stylesheet" /> <!-- GREEN --> <link href="../assets/css/blog/theme/green.css" rel="stylesheet" /> <!-- AQUA --> <link href="../assets/css/blog/theme/aqua.css" rel="stylesheet" /> <!-- INDIGO --> <link href="../assets/css/blog/theme/indigo.css" rel="stylesheet" /> <!-- BLACK --> <link href="../assets/css/blog/theme/black.css" rel="stylesheet" />
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: |
| 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: |
| Font Awesome |
Required CSS File <link rel="stylesheet" href="../assets/plugins/font-awesome/css/all.min.css" /> Official Link: |
| Animate.css |
Required CSS File <link rel="stylesheet" href="../assets/plugins/animate/animate.min.css" /> Official Link: |
| jQuery Cookie |
Required JS File <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script> Official Link: |
| Pace |
Required JS File <script src="assets/plugins/pace/pace.min.js"></script> Official Link: |
| Masonry |
Required JS File <script src="assets/plugins/masonry/masonry.min.js"></script> Official Link: |
| JS Cookie (Added in V4.0.0) |
Required JS File <script src="../assets/plugins/js-cookie/js.cookie.js"></script> Official Link: |
| 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: |
| Paroller (Added in V4.2.0) |
Required JS File <script="../assets/plugins/paroller/jquery.paroller.min.js"></script> Official Link: |
I've used the following images, icons or other files as listed.
jQuery Plugins
/assets/plugins/line-awesome//assets/plugins/js-cookie//assets/js/blog/apps.js/assets/js/blog/apps.min.js/assets/css/blog/style.css/assets/css/blog/style.min.css/assets/js/blog/apps.js/assets/js/blog/apps.min.js/assets/plugins/jQuery//assets/js/blog/apps.js/assets/js/blog/apps.min.js/assets/plugins/bootstrap//assets/plugins/bootstrap/