Package Contents
After downloading the Template package, you will find the following structures:
- css
- fonts
- images
- js
- And html files
Thank you for purchasing our Template and supporting us. If you have any questions that are beyond the scope of this help file, please feel free to post it on our forum here. Thanks so much! This documentation was made only with the Documenter (except the images)
To install this HTML template, you will need to upload all files and folders using an FTP client. We recommend you to use FileZilla FTP client. To upload your template, it is necessary for you to have:
Once connected, make sure to upload All files and folders within the "LIFEMAG" folder of your download package.
After downloading the Template package, you will find the following structures:
Below you will find the HTML files in groups:
container font-awesome, glyphicons
contain logo images files
You can easily create HTML pages, or whatever just by using this easy and clean Template. Code is clearly written and commented for each considerable part. When you open any HTML file, you will see that they are all have the same headers and footers; thus, they have the same HTML code and we'll explain both as follows:
The Head TAG ( All pages must have the following head tag ):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typography</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet" />
<link href="css/owl.theme.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<!--Header menu-->
<div class="tz-header-menu">
<div class="container">
<!--Main Menu-->
<nav class="nav-menu pull-left">
<ul class="tz-main-menu nav-collapse">
<li>
<a href="index.html">
HOME
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="home-video.html">
Home Video
</a>
</li>
<li>
<a href="home-tech.html">
Home Tech
</a>
</li>
<li>
<a href="home-sport.html">
Home Sport
</a>
</li>
<li>
<a href="home-fashion.html">
Home Fashion
</a>
</li>
<li>
<a href="home-rtl.html">
Home RTL
</a>
</li>
</ul>
</li>
<li class="active">
<a href="#">
CATEGORIES
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="#">
Categories Columns
<i class="fa fa-plus icon-submenu-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="categories-4column-grid.html">
4 Columns Grid
</a>
</li>
<li>
<a href="categories-4column-list.html">
4 Columns List
</a>
</li>
<li>
<a href="categories-3column-grid.html">
3 Columns Grid
</a>
</li>
<li>
<a href="categories-3column-list.html">
3 Columns List
</a>
</li>
<li>
<a href="categories-2column-grid.html">
2 Columns Grid
</a>
</li>
<li>
<a href="categories-2column-list.html">
2 Columns List
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Categories Sidebar
<i class="fa fa-plus icon-submenu-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="blog-2sidebar.html">
Categories 2 Sidebar
</a>
</li>
<li>
<a href="categories-leftsidebar.html">
Categories Left Sidebar
</a>
</li>
<li>
<a href="categories-rightsidebar.html">
Categories Right Sidebar
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Categories Style
<i class="fa fa-plus icon-submenu-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="categories-blogleftstyle.html">
Categories Left Style
</a>
</li>
<li>
<a href="categories-blogrightstyle.html">
Categories Right Style
</a>
</li>
</ul>
</li>
<li>
<a href="category-advaned.html">
Category Advaned
</a>
</li>
<li>
<a href="single-blog.html">
Single Post
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Joom Base
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="joom-editprofile.html">Edit Profile</a>
</li>
<li>
<a href="joom-login.html">Joom LogIn</a>
</li>
<li>
<a href="joom-newfeeds.html">Joom Newfeeds </a>
</li>
<li>
<a href="joom-newlink.html">Joom NewLink </a>
</li>
<li>
<a href="joom-register.html">Joom Register</a>
</li>
<li>
<a href="joom-reminduser.html">Joom Remind User</a>
</li>
<li>
<a href="joom-resetaccount.html">Reset Account</a>
</li>
</ul>
</li>
<li>
<a href="#">
Pages
<i class="fa fa-angle-down"></i>
</a>
<div class="tz-megamenu-wrap width500">
<div class="tz-megamenu menu-two-columns">
<div class="mega-item">
<ul class="sub-menu">
<li>
<a href="page-blog.html">
Page Blog
</a>
</li>
<li>
<a href="page-fashion.html">
Page Fashion
</a>
</li>
<li>
<a href="page-tech.html">
Page Tech
</a>
</li>
<li>
<a href="page-travel.html">
Page Travel
</a>
</li>
<li>
<a href="page-video.html">
Page Video
</a>
</li>
</ul>
</div>
<div class="mega-item">
<ul class="sub-menu">
<li>
<a href="about-us.html">About us</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="shortcode.html">Shortcode</a>
</li>
<li>
<a href="typography.html">Typography</a>
</li>
<li>
<a href="comingsoon.html">Coming soon</a>
</li>
<li>
<a href="404_page.html">404 page</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="#">
Mega Menu
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="megamenu-standard.html">Standard</a>
</li>
<li>
<a href="megamenu-advanced.html">Advanced</a>
</li>
<li>
<a href="megamenu-imagemenu.html">Image Menu</a>
</li>
<li>
<a href="megamenu-content.html">Menu Content</a>
</li>
<li>
<a href="megamenu-flyoutmenu.html">Fly OutMenu</a>
</li>
</ul>
</li>
<li>
<a href="#">
Theme color
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li>
<a href="theme-blue.html">
Theme Dark Blue
</a>
</li>
<li>
<a href="theme-darkblue.html">
Theme Blue
</a>
</li>
<li>
<a href="theme-gold.html">
Theme Gold
</a>
</li>
<li>
<a href="theme-red.html">
Theme Red
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!--End Main menu-->
<!--Start search-->
<div class="tz-search pull-right">
<form class="tz-form-search">
<input type="text" name="s" class="input-width" value="" placeholder="Search...">
<i class="fa fa-search tz-button-search"></i>
</form>
</div>
<!--End search-->
</div>
</div>
<!--End header menu-->
<!--Start header top-->
<div class="tz-header-top">
<div class="container">
<!--Header top left-->
<div class="tz-header-top-left pull-left">
<div class="tz-data-time pull-left">TUESDAY, MAY 5, 2015 </div>
<ul class="top-header-menu pull-left">
<li>
<a href="#" class="active"> SIGN IN / JOIN</a>
</li>
<li>
<a href="#">ADVERTISE</a>
</li>
<li>
<a href="contact.html">CONTACT</a>
</li>
<li>
<a href="#">BUY NOW</a>
</li>
</ul>
</div>
<!--End header top left-->
<div class="tz-header-top-right pull-right">
<ul class="top-header-social pull-right">
<li>
<a href="#"><i class="fa fa-facebook-square"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-dribbble"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-behance"></i></a>
</li>
</ul>
<div class="tz-hotline pull-right"><i class="fa fa-phone"></i>HOTLINE: +092 0192 3489 / +021 782 0191</div>
</div>
</div>
</div>
<!--End header top-->
<!--Header Content-->
<div class="tz-header-content">
<div class="tz-header-logo pull-left">
<a href="index.html">
<img src="images/LifeMag.png" alt="LifeMag">
</a>
</div>
<div class="tz-header-ads pull-right">
<a href="#">
<img src="images/data/header-replace.png" alt="ads">
</a>
</div>
<!--navigation mobi-->
<button data-target=".nav-collapse" class="btn-navbar tz_icon_menu" type="button">
<i class="fa fa-bars"></i>
</button>
<!--End navigation mobi-->
</div>
<!--Header end content-->
<!--Start Footer-->
<footer class="tz-footer">
<div class="container footer-content">
<div class="row">
<!--Footer one-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h4 class="widget_title">About Us</h4>
<div class="widget_about">
<h2>LifeMag</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptat accusantium doloremque laudantium, totam rem aperiam, </p>
<ul class="widget_about_meta">
<li>
<address>
122 Baker St, Marylebone London, W1U 6TX
</address>
</li>
<li>
0870 241 3300
</li>
<li>
<a href="#">support@theme.com</a>
</li>
</ul>
</div>
</div>
</div>
<!--End Footer one-->
<!--Footer Two-->
<div class="col-md-3 col-sm-6">
<div class="widget recent_post">
<h4 class="widget_title">Recent Posts</h4>
<ul>
<li>
<div class="recent-image">
<a href="single-blog.html">
<img src="images/data/post1-replace.png" alt="Travelling with kids on a Queensland’s">
</a>
</div>
<h5><a href="single-blog.html">Travelling with kids on a Queensland’s</a></h5>
<span class="recent-meta">
by <a href="page-blog.html">Doe /</a> 12 April 2015
</span>
</li>
<li>
<div class="recent-image">
<a href="single-blog.html">
<img src="images/data/post1-replace.png" alt="Travelling with kids on a Queensland’s">
</a>
</div>
<h5><a href="single-blog.html">Travelling with kids on a Queensland’s</a></h5>
<span class="recent-meta">
by <a href="page-blog.html">Doe /</a> 12 April 2015
</span>
</li>
<li>
<div class="recent-image">
<a href="single-blog.html">
<img src="images/data/post1-replace.png" alt="Travelling with kids on a Queensland’s">
</a>
</div>
<h5><a href="single-blog.html">Travelling with kids on a Queensland’s</a></h5>
<span class="recent-meta">
by <a href="page-blog.html">Doe /</a> 12 April 2015
</span>
</li>
</ul>
</div>
</div>
<!--End Footer two-->
<!--Footer Three-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h4 class="widget_title">Last tweets</h4>
<ul class="twitter_list">
<li class="twitter-item">
<i class="fa fa-twitter twitter-icon"></i>
<div class="twitter-content">
<a href="//twitter.com/rhettsoveran" class="twitter-user">@SedTeam</a>
ut perspiciatis unde omnis iste natus error sit vol <a href="#">http://co.nz</a>
</div>
</li>
<li class="twitter-item">
<i class="fa fa-twitter twitter-icon"></i>
<div class="twitter-content">
The Mathematical Symphony of Typoy As it turns out, this is omg. Deserunt posuere pellentesque porta ridiculus fugiat.
</div>
</li>
<li class="twitter-item">
<i class="fa fa-twitter twitter-icon"></i>
<div class="twitter-content">
<a href="//twitter.com/rhettsoveran" class="twitter-user">@SedTeam</a>
ut perspiciatis unde omnis iste natus error sit vol <a href="#">http://co.nz</a>
</div>
</li>
</ul>
</div>
</div>
<!--End Footer three-->
<!--Footer four-->
<div class="col-md-3 col-sm-6">
<div class="widget widget_menu">
<h4 class="widget_title">Information</h4>
<ul>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="index.html">Overview LifeMag</a>
</li>
<li>
<a href="index.html">All about Our Team</a>
</li>
<li>
<a href="index.html">Innovation</a>
</li>
<li>
<a href="index.html">Testimonials</a>
</li>
<li>
<a href="index.html">Project</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
<!--End Footer four-->
</div>
</div>
<div class="tz-copyright">
<div class="container">
<p class="pull-left copyright-content">© Copyrights 2015 TemPlaza, Inc. All rights reserved.</p>
<ul class="pull-right footer-social">
<li>
<a href="#"><i class="fa fa-facebook-square"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-dribbble"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-behance"></i></a>
</li>
</ul>
</div>
</div>
</footer>
<!--End Footer-->
The style.css file is the responsible for the Template styling as below:
/**
* Table of Contents:
* 1.0 - Typography
* 2.0 - Header
* 3.0 - Content
* 3.1 - Breaking
* 3.2 - Featured post
* 3.3 - Element Post
* 3.4 - Slider ADS
* 3.5 - Counter
* 3.6 - Lastests
* 3.7 - Post Photos
* 3.8 - Blog post
* 3.9 - Blog Sidebar post
* 3.10 - Single Post
* 3.11 - Blog Style Left
* 3.12 - About us
* 3.13 - Contact us
* 3.14 - 404 Page
* 3.15 - ComingSoon
* 3.16 - Joom Base
* 3.17 - Off canvas
* 0.0 - Theme color
* 0.1 - Color green
* 0.0 - Theme RTL
* 0.0 - Responsive
* 0.0 - Footer
* -----------------------------------------------------------------------------
*/
/**
All js used in homepage are stored in custom.js file. You can find some js as following:
// Breaking
jQuery(".tz-breaking-content").owlCarousel({
items : 1,
itemsDesktop : [1199, 1],
itemsDesktopSmall : [979, 1],
itemsTablet : [768, 1],
itemsTabletSmall : false,
itemsMobile : [479, 1],
slideSpeed:500,
paginationSpeed:800,
rewindSpeed:1000,
autoPlay:false,
stopOnHover: false,
singleItem:false,
rewindNav:false,
pagination:false,
paginationNumbers:false,
itemsScaleUp:false
});
jQuery(".breaking-prev").click(function(){
jQuery(".tz-breaking-content").trigger('owl.prev');
}) ;
jQuery(".breaking-next").click(function(){
jQuery(".tz-breaking-content").trigger('owl.next');
}) ;
HTML-Example
<!--Start Breaking-->
<div class="tz-breaking-news">
<div class="container">
<span class="breaking-title">BREAKING</span>
<ul class="tz-breaking-content pull-left">
<li>
<p>NBC made the right call to suspend Williams: Satu Maaranen Collaborates With Petit Bateau on Capsule</p>
</li>
<li>
<p>NBC made the right call to suspend Williams: Satu Maaranen Collaborates With Petit Bateau on Capsule</p>
</li>
<li>
<p>NBC made the right call to suspend Williams: Satu Maaranen Collaborates With Petit Bateau on Capsule</p>
</li>
<li>
<p>NBC made the right call to suspend Williams: Satu Maaranen Collaborates With Petit Bateau on Capsule</p>
</li>
</ul>
<div class="pull-right tz-control-news">
<button class="tz-button-next breaking-prev">
<i class="fa fa-angle-left"></i>
</button>
<button class="tz-button-prev breaking-next">
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
<!--End Breaking-->
// Features
jQuery(".featured-post").owlCarousel({
items : 1,
itemsDesktop : [1199, 1],
itemsDesktopSmall : [979, 1],
itemsTablet : [768, 1],
itemsTabletSmall : false,
itemsMobile : [479, 1],
slideSpeed:500,
paginationSpeed:800,
rewindSpeed:1000,
autoPlay:false,
stopOnHover: false,
singleItem:false,
rewindNav:false,
pagination:false,
paginationNumbers:false,
itemsScaleUp:false
});
HTML-Example
<!--Featured post-->
<div class="featured-post-wrap">
<div class="container">
<ul class="featured-post">
<li>
<!--Item zero-->
<div class="tz-grid-post-0">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/600x378.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="glod cat_name" href="page-blog.html">MOBILE</a>
<h3><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item-->
<!--Item One-->
<div class="tz-grid-post-1">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="red cat_name" href="page-blog.html">ELECTRIC</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item One-->
<!--Item Two-->
<div class="tz-grid-post-2">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="light-coral cat_name" href="page-blog.html">MOBILE</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item Two-->
<!--Item Three-->
<div class="tz-grid-post-3">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="blue-dark cat_name" href="page-blog.html">MOBILE</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item Three-->
<!--Item Four-->
<div class="tz-grid-post-4">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="blue-light cat_name" href="page-blog.html">ELECTRIC</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item Four-->
</li>
<li>
<!--Item zero-->
<div class="tz-grid-post-0">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/600x378.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="glod cat_name" href="page-blog.html">MOBILE</a>
<h3><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item-->
<!--Item One-->
<div class="tz-grid-post-1">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="red cat_name" href="page-blog.html">ELECTRIC</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item One-->
<!--Item Two-->
<div class="tz-grid-post-2">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="light-coral cat_name" href="page-blog.html">MOBILE</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item Two-->
<!--Item Three-->
<div class="tz-grid-post-3">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="blue-dark cat_name" href="page-blog.html">MOBILE</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item Three-->
<!--Item Four-->
<div class="tz-grid-post-4">
<div class="tz-featured-thumb">
<a href="single-blog.html">
<img src="images/data/image-demo/275x184.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-featured-info">
<a class="blue-light cat_name" href="page-blog.html">ELECTRIC</a>
<h3><a href="single-blog.html">Travelling with kids on Queensland’s Capricorn Coast</a></h3>
<span class="tz-featured-meta">by Jane <a href="page-blog.html">William Doe /</a> 12 April 2015 </span>
</div>
</div>
<!--End Item Four-->
</li>
</ul>
</div>
</div>
<!--End Featured post-->
ads
jQuery(".slider-ads").owlCarousel({
items : 1,
itemsDesktop : [1199, 1],
itemsDesktopSmall : [979, 1],
itemsTablet : [768, 1],
itemsTabletSmall : false,
itemsMobile : [479, 1],
slideSpeed:500,
paginationSpeed:800,
rewindSpeed:1000,
autoPlay:false,
stopOnHover: false,
singleItem:false,
rewindNav:false,
pagination:false,
paginationNumbers:false,
itemsScaleUp:false
});
jQuery(".prev-ads").click(function(){
jQuery(".slider-ads").trigger('owl.prev');
}) ;
jQuery(".next-ads").click(function(){
jQuery(".slider-ads").trigger('owl.next');
}) ;
HTML
<!--Shop images-->
<div class="shop-images">
<ul class="single-gallery">
<li>
<img src="images/product/single-p.jpg" alt="Propel Advanced Pro">
</li>
<li>
<img src="images/product/single-p.jpg" alt="Propel Advanced Pro">
</li>
<li>
<img src="images/product/single-p.jpg" alt="Propel Advanced Pro">
</li>
</ul>
<div class="product-social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google-plus"></a>
<a href="#" class="fa fa-dribbble"></a>
</div>
</div>
<!--End shop image-->
jQuery(window).bind('load',function(){
"use strict";
if( jQuery('.tzcontent').length > 0 ){
jQuery('.tzcontent, .tzsidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
}
});
HTML
<div class="col-md-8 col-sm-8 style-box1 tzcontent">
<!--Start Box-->
<div class="tz-box-three">
<!--Title-->
<div class="tz-title-filter">
<h3 class="tz-title">
<span>LIFE NEWS</span>
</h3>
<div class="tz-cat-filter">
<span>All</span>
</div>
</div>
<!--End title-->
<!--Content-->
<div class="row">
<div class="col-md-6">
<!--Item large-->
<div class="item-large">
<div class="tz-thumbnail">
<a href="single-blog.html">
<img src="images/data/image-demo/370x248.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-infomation">
<a class="glod cat_name" href="page-blog.html">MOBILE</a>
<h3 class="tz-post-title"><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="meta">by <a href="page-blog.html">Jane William Doe / </a> 12 April 2015 </span>
<p>It is a significant blessing that I am able to continue serving my community through SMUM. Founded in 1983 as an outreach ministry of...</p>
</div>
</div>
<!--Start item large-->
<!--Start item small-->
<div class="item-small">
<div class="tz-thumbnail">
<a href="single-blog.html">
<img src="images/data/image-demo/150x99.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-infomation">
<h3 class="tz-post-title"><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="meta">by <a href="page-blog.html">Jane William Doe / </a> 12 April 2015 </span>
</div>
</div>
<!--End item small-->
<!--Start item small-->
<div class="item-small">
<div class="tz-thumbnail">
<a href="single-blog.html">
<img src="images/data/image-demo/150x99.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-infomation">
<h3 class="tz-post-title"><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="meta">by <a href="page-blog.html">Jane William Doe / </a> 12 April 2015 </span>
</div>
</div>
<!--End item small-->
</div>
<div class="col-md-6">
<!--Item large-->
<div class="item-large responsive-top">
<div class="tz-thumbnail">
<a href="single-blog.html">
<img src="images/data/image-demo/370x248.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-infomation">
<a class="blue-dark cat_name" href="page-blog.html">MOBILE</a>
<h3 class="tz-post-title"><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="meta">by <a href="page-blog.html">Jane William Doe / </a> 12 April 2015 </span>
<p>It is a significant blessing that I am able to continue serving my community through SMUM. Founded in 1983 as an outreach ministry of...</p>
</div>
</div>
<!--Start item large-->
<!--Start item small-->
<div class="item-small">
<div class="tz-thumbnail">
<a href="single-blog.html">
<img src="images/data/image-demo/150x99.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-infomation">
<h3 class="tz-post-title"><a href="single-blog.html">Travelling with kids on Capricorn Coast</a></h3>
<span class="meta">by <a href="page-blog.html">Jane William Doe / </a> 12 April 2015 </span>
</div>
</div>
<!--End item small-->
<!--Start item small-->
<div class="item-small">
<div class="tz-thumbnail">
<a href="single-blog.html">
<img src="images/data/image-demo/150x99.png" alt="The 20 free things in Sydney with my girlfriend">
</a>
</div>
<div class="tz-infomation">
<h3 class="tz-post-title"><a href="single-blog.html">The 20 free things in Sydney with my girlfriend</a></h3>
<span class="meta">by <a href="page-blog.html">Jane William Doe / </a> 12 April 2015 </span>
</div>
</div>
<!--End item small-->
</div>
</div>
<!--End content-->
</div>
<!--End Box-->
</div>
Thanks for using our product. If you need any helps, you can send your questions to this email support@templaza.com