Created: 20 April 2013
By: Morad
Email: moradxD@gmail.com
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 via my user page contact form here. Thanks so much!
Lumenosity is a clean, creative and minimal Multipurpose HTML5 template for showcase, portfolio and also business use with beautiful features. It has the ability to make unlimited colors. It has a 20 ready samples skins and also over 290 beautiful background patterns for the boxed layout style. Very easy method to deal with its styling options It's very simple, flexible and easy to customize
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <!-- TITLE --> <title>:: Lumenosity :: Accordions | New HTML Template</title> <!-- CSS --> <link rel="stylesheet" media="screen" type="text/css" href="css/css_structure_and_styles_imports.css" /> <!-- JAVASCRIPT [ other js files are existed at the bottom ] --> <script src="js/modernizr.js"></script>and add this also at the bottom, actually before </body>
<!-- JAVASCRIPT -->
<script src="js/jquery.js"></script>
<script src="js/selectnav.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<script src="js/jquery-css-transform.js"></script>
<script src="js/audioplayer.js"></script>
<script src="js/scroll.top.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.validate.pack.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.tweet.js"></script>
<script src="js/jflickrfeed.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/custom.js"></script>
<script>
//<![CDATA[
// FitVids
$("#full_container").fitVids();
//]]>
</script>
In HTML Structure, we will talk about every structure of all content used. These content are as following:
There are nowadays useful responsive frameworks such as Bootstrap, Foundation, 960gs, ... and more. In this Template, i have depended on The Foundation framework. I used the 3rd version of it, and only used the Grid features with 12 Columns, not all the features included in the original framework. You can find the full details about the grid details Here!
If you have read the documentation grid details you will understand that when you want to make a consecutive any columns, they must be wrapped with
<div class="row"> </div> like this idea:
<div class="row">
<div class="three columns">
<!-- end three columns -->
</div>
<div class="three columns">
<!-- end three columns -->
</div>
<div class="three columns">
<!-- end three columns -->
</div>
<!-- end row -->
</div>
Each of the inner columns must have class="columns" and then also add the columns size you want of the 12 columns from one to twelve
The General Layout for all pages has the following structure:
<!-- start full_container -->
<div id="full_container">
<!-- start header -->
<header>
<div class="row">
<div class="three columns">
<a id="logo" href="#">
<h2 class="website_title">Lumenosity</h2>
<span class="website_title_description">Clean, Creative and Minimal Template</span>
<img src="images/general_elements/logo.png" alt="Lominosity - New Design">
</a>
<!-- end logo grid container [ three columns ] -->
</div>
<div class="eight columns offset-by-one">
<nav id="main_nav">
<ul id="menu">
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
</ul>
<!-- end main nav -->
</nav>
<!-- end main nav grid container [ eight columns ] -->
</div>
<!-- end row -->
</div>
</header>
<!-- end header -->
<!-- start website_header_message section -->
<section id="general_website_page_title">
<div class="row">
<div class="twelve columns">
<h2>Our <span class="colored">Blog</span></h2>
<h4 class="subheader">Wite here a subheader title</h4>
<p class="breadcrumb">
<a href="index.html"><i class="icon-home"></i>Home</a>
<span class="bread_arrow">/</span>
<span class="current_crumb">Blog</span>
</p>
<!-- end twelve columns -->
</div>
<!-- end row -->
</div>
</section>
<!-- end general_website_page_title section -->
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="nine columns">
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
<!-- start footer -->
<footer>
<div class="row">
<div class="eight columns">
<div class="row">
<div class="three columns">
</div>
<div class="three columns">
</div>
<div class="three columns">
</div>
<div class="three columns">
</div>
</div>
<!-- end left part footer content -->
</div>
<div class="three columns offset-by-one">
<div class="right_part">
<a id="footer_logo" href="#">
<h2 class="footer_website_title">Lumenosity</h2>
<span class="footer_website_title_description">Creative and Minimal Template</span>
<img src="images/general_elements/footer_logo.png" alt="Lominosity - New Design">
</a>
<div id="copyright_message">
Copyrights © 2013 <span class="copyright_website_title">Lumenosity.</span>
All Rights Reserved.
</div>
<!-- end right_part -->
</div>
<!-- end logo and copyright right part in footer -->
</div>
<!-- end row -->
</div>
</footer>
<!-- end footer -->
</div>
<!-- end full_container -->
This is was the layout construction of a page with sidebar. For fullwidth pages you will need to change <section id="content" class="nine columns"> to <section id="content" class="twelve columns"> and remove the full sidebar content
Header is containing Logo and Main Navigation, it's as following:
<!-- start header -->
<header>
<div class="row">
<div class="three columns">
<a id="logo" href="#">
<h2 class="website_title">Lumenosity</h2>
<span class="website_title_description">Clean, Creative and Minimal Template</span>
<img src="images/general_elements/logo.png" alt="Lominosity - New Design">
</a>
<!-- end logo grid container [ three columns ] -->
</div>
<div class="eight columns offset-by-one">
<nav id="main_nav">
<ul id="menu">
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
</ul>
<!-- end main nav -->
</nav>
<!-- end main nav grid container [ eight columns ] -->
</div>
<!-- end row -->
</div>
</header>
<!-- end header -->
Now, i will talk about the Logo and Main Navigation as following:
Here is the structure for the logo layout:
<div class="three columns">
<a id="logo" href="#">
<h2 class="website_title">Lumenosity</h2>
<span class="website_title_description">Clean, Creative and Minimal Template</span>
<img src="images/general_elements/logo.png" alt="Lominosity - New Design">
</a>
<!-- end logo grid container [ three columns ] -->
</div>
There are 2 options of using the logo. You can use it as text logo or image logo. There is a very easy way to change between using one of them in the styling part. All Styles options will be explained in the Styling Section
Here is the structure of main navigation layout:
<div class="eight columns offset-by-one">
<nav id="main_nav">
<ul id="menu">
<li><a class="current" href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
</ul>
<!-- end main nav -->
</nav>
<!-- end main nav grid container [ eight columns ] -->
</div>
Add class="current" to <a> of the current page previewed. To add a second levels menu, you just need to add this menu as the following form:
<div class="eight columns offset-by-one">
<nav id="main_nav">
<ul id="menu">
<li><a class="current" href="#">Navigation Link Title</a></li>
<li>
<a href="#">Navigation Link Title</a>
<ul>
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
<li><a href="#">Navigation Link Title</a></li>
</ul>
</li>
<li><a href="#">Navigation Link Title</a></li>
</ul>
<!-- end main nav -->
</nav>
<!-- end main nav grid container [ eight columns ] -->
</div>
There are 2 style of the frontpage website header message, they are as following
Here is the first Frontpage Website Header Message structure:
<section class="row text_center" id="frontpage_website_header_message_style1">
<div class="twelve columns">
<h1>Hello There, We Are <span><a href="#">Lumenosity</a></span> Website !</h1>
<h3 class="subheader">It's a New HTML Template for Portfolio and Creative Stuffs!</h3>
</div>
</section>
Here is the second Frontpage Website Header Message structure:
<section class="row" id="frontpage_website_header_message_style2">
<div class="eight columns">
<h3>Hello There, We Are <span><a href="#">Lumenosity</a></span> Website !</h3>
<p>
Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero euismod quam sodales sen.
</p>
<!-- end eight columns -->
</div>
<div class="four columns">
<h3><span class="colored">Follow</span> Us On</h3>
<ul class="social_icons">
<li class="twitter"><a href="#">twitter</a></li>
<li class="facebook"><a href="#">facebook</a></li>
<li class="dribbble"><a href="#">dribbble</a></li>
<li class="rss"><a href="#">rss</a></li>
<li class="flickr"><a href="#">flickr</a></li>
<li class="googleplus"><a href="#">googleplus</a></li>
</ul><!--END SOCIAL-BOOKMARKS-->
<!-- end four columns -->
</div>
</section>
The General Website Page Title is used for all pages except the homepage, it has the following structure:
<!-- start website_header_message section -->
<section id="general_website_page_title">
<div class="row">
<div class="twelve columns">
<h2>Our <span class="colored">Blog</span></h2>
<h4 class="subheader">Wite here a subheader title</h4>
<p class="breadcrumb">
<a href="index.html"><i class="icon-home"></i>Home</a>
<span class="bread_arrow">/</span>
<span class="current_crumb">Blog</span>
</p>
<!-- end twelve columns -->
</div>
<!-- end row -->
</div>
</section>
<!-- end general_website_page_title section -->
The slider used is Flexslider, it has the following structure:
<section id="slider_container">
<div class="row">
<div class="twelve columns">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/files/slider/image.jpg">
<p class="simple_flex_caption">
Captions and cupcakes. <a href="#">Winning</a> combination.
</p>
</li>
<li>
<img src="images/files/slider/image.jpg">
<div class="flex_caption">
<div class="flex_caption_title">
<h4><a href="#">Here is a Flex Slide Caption</a></h4>
<h6 class="subheader">
Cum sociis natoque penatibus et magnis dis parturient
</h6>
<!-- end flex_caption_title -->
</div>
<div class="flex_caption_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</p>
<!-- end flex_caption_content -->
</div>
<!-- end flex_caption -->
</div>
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
</ul>
<!-- end flexslider -->
</div>
<!-- end twelve columns -->
</div>
<!-- end row -->
</div>
</section>
<!-- end slider_container section -->
You can use lightbox as a slide image. You can also use simple caption or detailed caption for a slide. They will be as following:
It has the following structure with the slide:
<section id="slider_container">
<div class="row">
<div class="twelve columns">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/files/slider/image.jpg">
<p class="simple_flex_caption">
Captions and cupcakes. <a href="#">Winning</a> combination.
</p>
</li>
.
.
.
<li>
<img src="images/files/slider/image.jpg">
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
</ul>
<!-- end flexslider -->
</div>
<!-- end twelve columns -->
</div>
<!-- end row -->
</div>
</section>
<!-- end slider_container section -->
It has the following structure with the slide:
<section id="slider_container">
<div class="row">
<div class="twelve columns">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/files/slider/image.jpg">
<div class="flex_caption">
<div class="flex_caption_title">
<h4><a href="#">Here is a Flex Slide Caption</a></h4>
<h6 class="subheader">
Cum sociis natoque penatibus et magnis dis parturient
</h6>
<!-- end flex_caption_title -->
</div>
<div class="flex_caption_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</p>
<!-- end flex_caption_content -->
</div>
<!-- end flex_caption -->
</div>
</li>
.
.
.
<li>
<img src="images/files/slider/image.jpg">
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
<li>
<img src="images/files/slider/image.jpg">
</li>
</ul>
<!-- end flexslider -->
</div>
<!-- end twelve columns -->
</div>
<!-- end row -->
</div>
</section>
<!-- end slider_container section -->
I will talk now about the construction of main section. It's the same as explained in General Layout Construction, it has the following structure:
<section id="main_container">
<div id="main" class="row">
<section id="content" class="nine columns">
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
This is the structure of main section when used with sidebar. For the fullwidth main content, you will need to remove the full sidebar content and change nine columns to twelve columns class of the content section, so it will be as following:
<section id="main_container">
<div id="main" class="row">
<section id="content" class="twelve columns">
<!-- end content [ nine columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
And for using 2 sidebars, you will need to make the content section with six columns instead of nine columns class, and also you will need to make a copy of sidebar section and paste it in the order you want equivelant to the content section, before or after it, it will be like this
<section id="main_container">
<div id="main" class="row">
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<section id="content" class="six columns">
<!-- end content [ six columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
There are many features and high usability used for the portfolio in this theme. There are 2 styles of portfolio items. 2, 3 and 4 columns porftolio pages. Also 2 and 3 columns portfolio pages with sidebar. And sure category filtering is used.
Now all portfolio details will be explained as following:
There are 2 styles of portfolio items used, they will be as following
This is the form of portfolio item 1 used for the 2 and 3 columns styles:
<div class="portfolio_item1">
<img src="images/files/portfolio/image.jpg" />
<div class="portfolio_item1_overlay_content">
<h4 class="portfolio_item1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<a class="preview" href="images/files/portfolio/preview/image1.jpg"><i class="icon-eye-open"></i></a>
<div class="portfolio_item1_categories">
<a href="#">Web-Design</a><a href="#">Entertainnments</a>
</div>
<!-- end portfolio item overlay content -->
</div>
<!-- end portfolio item1 -->
</div>
And for the 4 columns style, we have to use different form because the first form will look not good to be showed with the 4 columns style. Here is the construction of portfolio iten for the 4 columns portfolio style:
<div class="portfolio_item1">
<div class="lightbox_item_style2">
<img src="images/files/portfolio/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end portfolio item1 -->
</div>
This is the form of portfolio item 2 used for the 2, 3 and 4 columns styles:
<div class="lightbox_item_style2">
<img src="images/files/portfolio/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
Now i will show the construction of the portfolio page with category filtering
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="twelve columns">
<div class="row">
<ul id="portfolio_categories" class="twelve columns">
<li><i class="icon-reorder"></i></li>
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="Photoshop">Photoshop</a></li>
<li><a href="#" class="Web-Design">Web Design</a></li>
<li><a href="#" class="Inspiration">Inspiration</a></li>
<li><a href="#" class="Graphics">Graphics</a></li>
<!-- end portfolio_category [ twelve_columns ] -->
</ul>
<!-- end row -->
</div>
<div class="row">
<div class="twelve columns">
<ul class="portfolio_items_container row">
<li class="four columns" data-id="id-1" data-type="Graphics Inspiration">
<div class="portfolio_item1">
<img src="images/files/portfolio/image.jpg" />
<div class="portfolio_item1_overlay_content">
<h4 class="portfolio_item1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<a class="preview" href="images/files/portfolio/preview/image1.jpg"><i class="icon-eye-open"></i></a>
<div class="portfolio_item1_categories">
<a href="#">Web-Design</a><a href="#">Entertainnments</a>
</div>
<!-- end portfolio item overlay content -->
</div>
<!-- end portfolio item1 -->
</div>
</li>
<li class="four columns" data-id="id-2" data-type="Photoshop">
</li>
<li class="four columns" data-id="id-3" data-type="Inspiration">
</li>
<li class="four columns" data-id="id-4" data-type="Web-Design">
</li>
<li class="four columns" data-id="id-5" data-type="Web-Design">
</li>
<li class="four columns" data-id="id-6" data-type="Graphics Inspiration">
</li>
<li class="four columns" data-id="id-7" data-type="Photoshop">
.
.
.
</li>
<li class="four columns" data-id="id-11" data-type="Photoshop Inspiration">
</li>
<li class="four columns" data-id="id-12" data-type="Graphics Photoshop Inspiration Web-Design">
</li>
<!-- end portfolio_items_container -->
</ul>
<!-- end twelve columns [ outer "div" of portfolio item container ] -->
</div>
<!-- end row -->
</div>
<!-- end content -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
Here is the construction of any portfolio page throw the main structure. For the section of portfolio categories, it has this construction:
<ul id="portfolio_categories" class="twelve columns">
<li><i class="icon-reorder"></i></li>
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="Photoshop">Photoshop</a></li>
<li><a href="#" class="Web-Design">Web Design</a></li>
<li><a href="#" class="Inspiration">Inspiration</a></li>
<li><a href="#" class="Graphics">Graphics</a></li>
<!-- end portfolio_category [ twelve_columns ] -->
</ul>
This list containing the category names of the portfolio, so to make a category name just make a copy of <li> line and write the category name you want
For the other part of portfolio page which is portfolio item container has the following construction:
<ul class="portfolio_items_container row">
<li class="four columns" data-id="id-1" data-type="Graphics Inspiration">
<div class="portfolio_item1">
<img src="images/files/portfolio/image.jpg" />
<div class="portfolio_item1_overlay_content">
<h4 class="portfolio_item1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<a class="preview" href="images/files/portfolio/preview/image1.jpg"><i class="icon-eye-open"></i></a>
<div class="portfolio_item1_categories">
<a href="#">Web-Design</a><a href="#">Entertainnments</a>
</div>
<!-- end portfolio item overlay content -->
</div>
<!-- end portfolio item1 -->
</div>
</li>
<li class="four columns" data-id="id-2" data-type="Photoshop">
</li>
<li class="four columns" data-id="id-3" data-type="Inspiration">
</li>
<li class="four columns" data-id="id-4" data-type="Web-Design">
</li>
<li class="four columns" data-id="id-5" data-type="Web-Design">
</li>
<li class="four columns" data-id="id-6" data-type="Graphics Inspiration">
</li>
<li class="four columns" data-id="id-7" data-type="Photoshop">
.
.
.
</li>
<li class="four columns" data-id="id-11" data-type="Photoshop Inspiration">
</li>
<li class="four columns" data-id="id-12" data-type="Graphics Photoshop Inspiration Web-Design">
</li>
<!-- end portfolio_items_container -->
</ul>
Each <li> has data-id with consecutive values, like data-id="id-1", data-id="id-2" and so on. To add portfolio item to the category you set, so add data-type=" " with the name of the category you made, like data-type="Photoshop", data-type="Inspiration" and so on. And to make a specific portfolio item shared with another category, you just need to add the other categories names in the data-type=" " with space between them, like data-type="Photoshop Inspiration Web-Design". You can clearly understand these point throw the code.
For the explained portfolio, it's with 3 columns style. The idea of setting the number of portfolio columns is just throw the class of <li> which is set for the explained code with class="four columns". Just to change to 2 columns portfolio style, change the class of li from class="four columns" to class="six columns", and to get the four columns just change it to class="three columns"
For portfolio page with sidebar, what just you need to do is to change <section id="content" class="twelve columns"> to <section id="content" class="nine columns">. It will has the following construction:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="nine columns">
<div class="row">
<ul id="portfolio_categories" class="twelve columns">
<li><i class="icon-reorder"></i></li>
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="Photoshop">Photoshop</a></li>
<li><a href="#" class="Web-Design">Web Design</a></li>
<li><a href="#" class="Inspiration">Inspiration</a></li>
<li><a href="#" class="Graphics">Graphics</a></li>
<!-- end portfolio_category [ twelve_columns ] -->
</ul>
<!-- end row -->
</div>
<div class="row">
<div class="twelve columns">
<ul class="portfolio_items_container row">
<li class="four columns" data-id="id-1" data-type="Graphics Inspiration">
<div class="portfolio_item1">
<img src="images/files/portfolio/image.jpg" />
<div class="portfolio_item1_overlay_content">
<h4 class="portfolio_item1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<a class="preview" href="images/files/portfolio/preview/image1.jpg"><i class="icon-eye-open"></i></a>
<div class="portfolio_item1_categories">
<a href="#">Web-Design</a><a href="#">Entertainnments</a>
</div>
<!-- end portfolio item overlay content -->
</div>
<!-- end portfolio item1 -->
</div>
</li>
<li class="four columns" data-id="id-2" data-type="Photoshop">
</li>
<li class="four columns" data-id="id-3" data-type="Inspiration">
</li>
<li class="four columns" data-id="id-4" data-type="Web-Design">
</li>
<li class="four columns" data-id="id-5" data-type="Web-Design">
</li>
<li class="four columns" data-id="id-6" data-type="Graphics Inspiration">
</li>
<li class="four columns" data-id="id-7" data-type="Photoshop">
.
.
.
</li>
<li class="four columns" data-id="id-11" data-type="Photoshop Inspiration">
</li>
<li class="four columns" data-id="id-12" data-type="Graphics Photoshop Inspiration Web-Design">
</li>
<!-- end portfolio_items_container -->
</ul>
<!-- end twelve columns [ outer "div" of portfolio item container ] -->
</div>
<!-- end row -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
There are about 18 blog page styles in the theme, 7 large blog styles, 5 small blog styles, 5 grid columns blog styles and last blog page with 2 sidebars. They will be as following:
The differences between each style is just with the order of main sections of single post. For large blog pages stlye, it has the following construction:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="nine columns">
<article class="single_post">
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
Each single post construction will be shown as following:
The 1st single post is the default one used for the default blog page. It's constructed as following:
<article class="single_post">
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
For the 2nd single post, you will need to add a class value blog2 to <section id="content" class="nine columns"> to be like this <section id="content" class="blog2 nine columns"> . And the 2nd large blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="blog2 nine columns">
<article class="single_post">
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 3rd single post, you will need to add a class value blog3 to <section id="content" class="nine columns"> to be like this <section id="content" class="blog3 nine columns"> . And the 3rd large blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="blog3 nine columns">
<article class="single_post">
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 4th single post, you will need to add a class value blog4 to <section id="content" class="nine columns"> to be like this <section id="content" class="blog4 nine columns"> . And the 4th large blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="blog4 nine columns">
<article class="single_post">
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 5th single post, you will need to add a class value blog5 to <section id="content" class="nine columns"> to be like this <section id="content" class="blog5 nine columns"> . And the 5th large blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="blog5 nine columns">
<article class="single_post">
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 6th single post, you will need to add a class value blog6 to <section id="content" class="nine columns"> to be like this <section id="content" class="blog6 nine columns"> . And the 6th large blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="blog6 nine columns">
<article class="single_post">
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 7th single post, you will need to add a class value blog7 to <section id="content" class="nine columns"> to be like this <section id="content" class="blog7 nine columns"> . And the 7th large blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="blog7 nine columns">
<article class="single_post">
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
The differences between each style is just with the order of main sections of single post. For small blog pages stlye, it has the following construction:
The 1st single post is the default one used for the default small blog page. It's constructed as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="small_blog nine columns">
<article class="single_post">
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 2nd single post, you will need to add a class value blog9 to <section id="content" class="small_blog nine columns"> to be like this <section id="content" class="small_blog blog9 nine columns"> . And the 2nd small blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="small_blog blog9 nine columns">
<article class="single_post">
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 3rd single post, you will need to add a class value blog10 to <section id="content" class="small_blog nine columns"> to be like this <section id="content" class="small_blog blog10 nine columns"> . And the 3rd small blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="small_blog blog10 nine columns">
<article class="single_post">
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 4th single post, you will need to add a class value blog11 to <section id="content" class="small_blog nine columns"> to be like this <section id="content" class="small_blog blog11 nine columns"> . And the 4th small blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="small_blog blog11 nine columns">
<article class="single_post">
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For the 5th single post, you will need to add a class value blog12 to <section id="content" class="small_blog nine columns"> to be like this <section id="content" class="small_blog blog12 nine columns"> . And the 5th small blog page construction will be as following:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="small_blog blog12 nine columns">
<article class="single_post">
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span>Comments</a>
<!-- end post_info -->
</div>
<div class="post_title">
<h3><a href="#">Omnis iste natus sit accusantium.</a></h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis dis parturient montes natoque.</h5>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<div class="post_tags"><i class="icon-tags"></i>Tags:
<a href="#">Photoshop</a>,
<a href="#">Illustrator</a>,
<a href="#">Graphics</a>
</div>
<!-- end post_meta -->
</div>
<div class="post_media">
<div class="lightbox_item_style1">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post_media -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<article class="single_post">
<!-- end single_post -->
</article>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
There are 5 style for the grid columns blog style, 1, 2 and 3 columns, and 1 and 2 columns with sidebar. They will explained as following
For 1 column blog style, you will need to add a class value grid_blog to <section id="content" class="twelve columns"> to be like this <section id="content" class="grid_blog twelve columns">
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="grid_blog twelve columns">
<div class="row">
<div class="twelve columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end twelve columns -->
</div>
<!-- end row -->
</div>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For 2 columns blog style, you will need to add a class value grid_blog to <section id="content" class="twelve columns"> to be like this <section id="content" class="grid_blog twelve columns">. And then it's divided into 2 six columns, and each column contain the single posts columns
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="grid_blog twelve columns">
<div class="row">
<div class="six columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end six columns -->
</div>
<div class="six columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end six columns -->
</div>
<!-- end row -->
</div>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
For 3 columns blog style, you will need to add a class value grid_blog to <section id="content" class="twelve columns"> to be like this <section id="content" class="grid_blog twelve columns">. And then it's divided into 3 four columns, and each column contain the single posts columns
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="grid_blog twelve columns">
<div class="row">
<div class="four columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end four columns -->
</div>
<div class="four columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end four columns -->
</div>
<div class="four columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end four columns -->
</div>
<!-- end row -->
</div>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
Also for the 1 and 2 columns grid blog style with sidebar, you just need to change <section id="content" class="grid_blog twelve columns"> to <section id="content" class="grid_blog nine columns"> and add <section class="sidebar three columns"> after the content section.
The 2 columns grid blog style with sidebar has this construction:
<!-- start main_container section -->
<section id="main_container">
<div id="main" class="row">
<section id="content" class="grid_blog twelve columns">
<div class="row">
<div class="six columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end six columns -->
</div>
<div class="six columns">
<article class="single_post_column">
<div class="teaser">
<div class="teaser_preview_box">
<div class="post_media">
<div class="lightbox_item_style2">
<img src="images/files/blog/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg" title="Here Is a Description Message for This Lightbox Image !!">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end post media -->
</div>
<!-- end teaser preview box -->
</div>
<div class="post_title">
<h5><a href="#">Single Post Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<!-- end post_title -->
</div>
<div class="post_meta">
<div class="post_category">
<i class="icon-folder-open"></i>posted in:
<a href="#">Off-Topics</a>, <a href="#">Cards Design</a>
</div>
<div class="post_date"><i class="icon-time"></i>13 April 2011</div>
<div class="posted_by"><i class="icon-user"></i>Posted by: <a href="#">Admin</a></div>
<!-- end post_meta -->
</div>
<div class="post_info">
<a class="post_format" href="#"><i class="icon-picture"></i></a>
<a class="comments_number" href="#"><span class="number">2</span></a>
<!-- end post_info -->
</div>
<div class="post_content">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<a class="readmore_link" href="#">Continue Reading →</a>
<!-- end post_content -->
</div>
<!-- end teaser -->
</div>
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<article class="single_post_column">
<!-- end single post column -->
</article>
<!-- end six columns -->
</div>
<!-- end row -->
</div>
<div id="pagination">
<div id="pagination_description">Page <span class="colored">1</span> of 2</div>
<a class="current_page" href="#">1</a><a href="#">2</a><a href="#">»</a>
<!-- end pagination -->
</div>
<!-- end content [ nine columns ] -->
</section>
<section class="sidebar three columns">
<!-- end sidebar [ three columns ] -->
</section>
<!-- end main [ row ] -->
</div>
</section>
<!-- end main_container section -->
Footer is consists of 2 section, the left section for the footer content, and the right section for the footer website logo and copy right message. For the left section footer content, you can divide its column as you like, but my recommedation is at most use 4 columns for best preview content as use in the theme. Footer has this following construction;
<!-- start footer -->
<footer>
<div class="row">
<div class="eight columns">
<div class="row">
<div class="three columns">
</div>
<div class="three columns">
</div>
<div class="three columns">
</div>
<div class="three columns">
</div>
</div>
<!-- end left part footer content -->
</div>
<div class="three columns offset-by-one">
<div class="right_part">
<a id="footer_logo" href="#">
<h2 class="footer_website_title">Lumenosity</h2>
<span class="footer_website_title_description">Creative and Minimal Template</span>
<img src="images/general_elements/footer_logo.png" alt="Lominosity - New Design">
</a>
<div id="copyright_message">
Copyrights © 2013 <span class="copyright_website_title">Lumenosity.</span>
All Rights Reserved.
</div>
<!-- end right_part -->
</div>
<!-- end logo and copyright right part in footer -->
</div>
<!-- end row -->
</div>
</footer>
<!-- end footer -->
There are all possible shortcodes dragged in this theme. I will explain each one of them as following:
Accordions has the following construction:
<div class="accordion accordion_style">
<span class="title"><span class="title_content">First pane</span></span>
<div class="pane">
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentum
<!-- end pane -->
</div>
<span class="title"><span class="title_content">Second pane</span></span>
<div class="pane">
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentum
<!-- end pane -->
</div>
<span class="title"><span class="title_content">Third pane</span></span>
<div class="pane">
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id.
<!-- end pane -->
</div>
<!-- end accordion -->
</div>
Tabs has the following construction:
<div class="tabs">
<ul class="tabs">
<li><a href="#"><span class="title_content">Tab 1</span></a></li>
<li><a href="#"><span class="title_content">Tab 2</span></a></li>
<li><a href="#"><span class="title_content">Tab 3</span></a></li>
<!-- end tabs -->
</ul>
<div class="panes">
<div>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentum
</div>
<div>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentum
</div>
<div>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id.
</div>
<!-- end panes -->
</div>
<!-- end tabs -->
</div>
Toggles has the following construction:
Toggle header
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id.
Toggle header
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id.
There are 2 style of testmonial and also you can use the 2nd style as testmonial slider. They will be as following:
For the 1st testmonial style, it has the following construction:
<div class="single_testmonial_style1">
<p>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam.
</p>
<span class="single_testmonial_style1_person">Eric Mark</span>
<span class="single_testmonial_style1_person_info">Graphic and HTML Web Designer</span>
<!-- end single testmonial style1 -->
</div>
For the 2nd testmonial style, it has the following construction:
<div class="single_testmonial_style2">
<p>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sagittis, dolor nec tempor condimentumlibero quam euismod quam.
</p>
<span class="single_testmonial_style2_person">Eric Mark</span>
<span class="single_testmonial_style2_person_info">Graphic and HTML Web Designer</span>
<!-- end single testmonial style2 -->
</div>
You can also use the 2nd testmonial style as testmonial slider, it has the following construction:
<div class="testmonial_slider">
<ul class="slides">
<li>
<div class="single_testmonial_style2">
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</p>
<span class="single_testmonial_style2_person">Eric Mark</span>
<span class="single_testmonial_style2_person_info">Graphic and HTML Web Designer</span>
<!-- end testmonial -->
</div>
</li>
<li>
<div class="single_testmonial_style2">
<p>
Aenean commodo ligula eget dolor. Aenean massa.
</p>
<span class="single_testmonial_style2_person">John Doe</span>
<span class="single_testmonial_style2_person_info">CEO Engineer</span>
<!-- end testmonial -->
</div>
</li>
<li>
<div class="single_testmonial_style2">
<p>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id.
</p>
<span class="single_testmonial_style2_person">Roro Still</span>
<span class="single_testmonial_style2_person_info">New In Field</span>
<!-- end testmonial -->
</div>
</li>
</ul>
<!-- end testmonial slider -->
</div>
Tabs has the following construction:
There are 4 style of with 3 sizes the buttons used. Normal button style, button with right icon style, button with left icon style and button with rounded style.Just to choose between the 3 sizes, you will need to add class= small, medium and large. Also you can choose between 3 color, just by adding class= primary for the dark color, secondary for the white color and colorful for the colored button with the general color used. The 4 buttons styles will be explained as following:
The normal button style has this construction
<a class="button primary small" href="#">Primary Button Small</a> <a class="button secondary small" href="#">Secondary Button Small</a> <a class="button colorful small" href="#">Colorful Button Small</a> <a class="button primary medium" href="#">Primary Button Medium</a> <a class="button secondary medium" href="#">Secondary Button Medium</a> <a class="button colorful medium" href="#">Colorful Button Medium</a> <a class="button primary large" href="#">Primary Button Large</a> <a class="button secondary large" href="#">Secondary Button Large</a> <a class="button colorful large" href="#">Colorful Button Large</a>
For button with right icon style, it's the same for normal button style but just add class value with right_icon and then add after the inner content of the button <i class="icon-ok align_right"></i> and change the icon name which is use in this current example as ok to the name you want. Button with right icon style has the following construction:
<a class="button primary small right_icon" href="#"><i class="icon-ok align_right"></i>Primary Button Small</a> <a class="button secondary small right_icon" href="#"><i class="icon-ok align_right"></i>Secondary Button Small</a> <a class="button colorful small right_icon" href="#"><i class="icon-ok align_right"></i>Colorful Button Small</a> <a class="button primary medium right_icon" href="#"><i class="icon-ok align_right"></i>Primary Button Medium</a> <a class="button secondary medium right_icon" href="#"><i class="icon-ok align_right"></i>Secondary Button Medium</a> <a class="button colorful medium right_icon" href="#"><i class="icon-ok align_right"></i>Colorful Button Medium</a> <a class="button primary large right_icon" href="#"><i class="icon-ok align_right"></i>Primary Button Large</a> <a class="button secondary large right_icon" href="#"><i class="icon-ok align_right"></i>Secondary Button Large</a> <a class="button colorful large right_icon" href="#"><i class="icon-ok align_right"></i>Colorful Button Large</a>
For button with left icon style, it's the same for normal button style but just add class value with left_icon and then add before the inner content of the button <i class="icon-ok align_left"></i> and change the icon name which is use in this current example as ok to the name you want. Button with left icon style has the following construction:
<a class="button primary small left_icon" href="#"><i class="icon-ok align_left"></i>Primary Button Small</a> <a class="button secondary small left_icon" href="#"><i class="icon-ok align_left"></i>Secondary Button Small</a> <a class="button colorful small left_icon" href="#"><i class="icon-ok align_left"></i>Colorful Button Small</a> <a class="button primary medium left_icon" href="#"><i class="icon-ok align_left"></i>Primary Button Medium</a> <a class="button secondary medium left_icon" href="#"><i class="icon-ok align_left"></i>Secondary Button Medium</a> <a class="button colorful medium left_icon" href="#"><i class="icon-ok align_left"></i>Colorful Button Medium</a> <a class="button primary large left_icon" href="#"><i class="icon-ok align_left"></i>Primary Button Large</a> <a class="button secondary large left_icon" href="#"><i class="icon-ok align_left"></i>Secondary Button Large</a> <a class="button colorful large left_icon" href="#"><i class="icon-ok align_left"></i>Colorful Button Large</a>
For the rounded button stlye, it's with all the previous button feature mentioned before, but just with adding class= rounded. Button with rounded style has the following construction:
<a class="button primary small rounded right_icon" href="#"><i class="icon-ok align_right"></i>Primary Button Small</a> <a class="button secondary small rounded right_icon" href="#"><i class="icon-ok align_right"></i>Secondary Button Small</a> <a class="button colorful small rounded right_icon" href="#"><i class="icon-ok align_right"></i>Colorful Button Small</a> <a class="button primary medium rounded right_icon" href="#"><i class="icon-ok align_right"></i>Primary Button Medium</a> <a class="button secondary medium rounded right_icon" href="#"><i class="icon-ok align_right"></i>Secondary Button Medium</a> <a class="button colorful medium rounded right_icon" href="#"><i class="icon-ok align_right"></i>Colorful Button Medium</a> <a class="button primary large rounded right_icon" href="#"><i class="icon-ok align_right"></i>Primary Button Large</a> <a class="button secondary large rounded right_icon" href="#"><i class="icon-ok align_right"></i>Secondary Button Large</a> <a class="button colorful large rounded right_icon" href="#"><i class="icon-ok align_right"></i>Colorful Button Large</a>
There are 30 different lists style in this theme. All <ul> has class list and then add the class of the list style type you want like used in the next example:
<ul class="list ok_list">
<li>List Line 1</li>
<li>List Line 2</li>
<!-- end list -->
</ul>
And to choose you list style, just change ok_list in the example with your list style chose, such to be as <ul class="list star_list">. Now i will mention the 30 list styles name, they will be as following:
There are 2 styles of icons used with 2 colors [ black and white ] normal or rounded with 10 sizes. It has like this example construction:
<i class="icon_style1 icon_rounded icon-gift icon-4x"></i>
To change between the 2 colors style, just change between class icon_style1 and icon_style2. Also to choose rounded icon or normal, just add class rounded for rounded style or remove it for the normal style. Also to choose between the 10 sizes options, you just need to change the class value icon-4x used in the mentioned example from icon-1x to icon-10x. You can find the icons categories which is Awesome Font Here!
There are 8 info boxes styles dragged in this theme. You can choose your column width style as it's clear for the framework grid system. They will be explained as following:
The 1st info box style construction is as following:
<div class="three columns info_box_style1 text_center">
<h5><a href="#">Smart Touches</a></h5>
<i class="icon_style1 icon_rounded icon-ok icon-4x"></i>
<p>
The files are completely editable in Photoshop so you can change sizes, colors, typefaces, etc.
</p>
<a class="button secondary small right_icon" href="#">
<i class="icon-share-alt align_right"></i>
Read More
</a>
<!-- end three columns [ info box style1 ] -->
</div>
The 2nd info box style construction is as following:
<div class="three columns info_box_style2">
<h5><i class="icon_style1 icon_rounded icon-ok icon-1x"></i><a href="#">Smart Touches</a></h5>
<p>
The files are completely editable in Photoshop so you can change sizes, colors, typefaces, etc.
</p>
<a class="readmore_link align_right" href="#">Read More →</a>
<!-- end three columns [ info box style2 ] -->
</div>
The 3rd info box style construction is as following:
<div class="info_box_style3 six columns">
<i class="icon_style1 icon_rounded icon-bolt icon-1x"></i>
<div class="info_box_style3_content">
<h4><a href="#">Aliquam erat</a></h4>
<h6 class="subheader">Integer commodo tristique quis</h6>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut.
</p>
<ul class="list check_list">
<li>Sed consectetur suscipit nunc et</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Aliquam erat volutpat quis fringilla ligula ut</li>
</ul>
<a class="button secondary small right_icon" href="#">
<i class="icon-share-alt align_right"></i>
More Details
</a>
<!-- end info box style 3 content -->
</div>
<!-- end info box style 3 -->
</div>
The 4th info box style construction is as following:
<div class="info_box_style4 six columns">
<i class="icon_style1 icon_rounded icon-bolt icon-2x"></i>
<div class="info_box_style4_content">
<h4><a href="#">Aliquam erat</a></h4>
<h6 class="subheader">Integer commodo tristique quis</h6>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut.
</p>
<ul class="list check_list">
<li>Sed consectetur suscipit nunc et</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Aliquam erat volutpat quis fringilla ligula ut</li>
</ul>
<a class="button secondary small right_icon" href="#">
<i class="icon-share-alt align_right"></i>
More Details
</a>
<!-- end info box style 4 content -->
</div>
<!-- end info box style 4 -->
</div>
The 5th info box style construction is as following:
<div class="info_box_style5 six columns">
<i class="icon_style1 icon_rounded icon-bolt icon-3x "></i>
<div class="info_box_style5_content">
<h4><a href="#">Aliquam erat</a></h4>
<h6 class="subheader">Integer commodo tristique quis</h6>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut.
</p>
<ul class="list check_list">
<li>Sed consectetur suscipit nunc et</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Aliquam erat volutpat quis fringilla ligula ut</li>
</ul>
<a class="button secondary small right_icon" href="#">
<i class="icon-share-alt align_right"></i>
More Details
</a>
<!-- end info box style 5 content -->
</div>
<!-- end info box style 5 -->
</div>
The 6th info box style construction is as following:
<div class="info_box_style6 six columns">
<i class="icon_style1 icon_rounded icon-bolt icon-4x"></i>
<div class="info_box_style6_content">
<h3><a href="#">Aliquam erat</a></h3>
<h5 class="subheader">Integer commodo tristique quis</h5>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut.
</p>
<ul class="list check_list">
<li>Sed consectetur suscipit nunc et</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Aliquam erat volutpat quis fringilla ligula ut</li>
</ul>
<a class="button secondary medium right_icon align_left" href="#">
<i class="icon-share-alt align_right"></i>
More Details
</a>
<!-- end info box style 6 content -->
</div>
<!-- end info box style 6 -->
</div>
The 7th info box style construction is as following:
<div class="info_box_style7 six columns">
<i class="icon_style1 icon_rounded icon-bolt icon-5x"></i>
<div class="info_box_style7_content">
<h3><a href="#">Aliquam erat</a></h3>
<h5 class="subheader">Integer commodo tristique quis</h5>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut.
</p>
<ul class="list check_list">
<li>Sed consectetur suscipit nunc et</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Aliquam erat volutpat quis fringilla ligula ut</li>
</ul>
<a class="button secondary medium right_icon" href="#">
<i class="icon-share-alt align_right"></i>
More Details
</a>
<!-- end info box style 7 content -->
</div>
<!-- end info box style 7 -->
</div>
The 8th info box style construction is as following:
<div class="info_box_style8 six columns">
<i class="icon_style1 icon_rounded icon-bolt icon-6x"></i>
<div class="info_box_style8_content">
<h3><a href="#">Aliquam erat</a></h3>
<h5 class="subheader">Integer commodo tristique quis</h5>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut.
</p>
<ul class="list check_list">
<li>Sed consectetur suscipit nunc et</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Aliquam erat volutpat quis fringilla ligula ut</li>
</ul>
<a class="button secondary medium right_icon align_left" href="#">
<i class="icon-share-alt align_right"></i>
More Details
</a>
<!-- end info box style 8 content -->
</div>
<!-- end info box style 8 -->
</div>
There are 3 types of blockqoutes, they will be as following:
For the fullwidth blockqoute, it has the following construction
<blockquote class="pquote">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam
<!-- end fullwidth_blockquote -->
</blockquote>
For the left blockqoute, it has the following construction
<blockquote class="pquote_left">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam
<!-- end left_blockquote -->
</blockquote>
For the right blockqoute, it has the following construction
<blockquote class="pquote_right">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam
<!-- end right_blockquote -->
</blockquote>
There are 4 dropcaps style. You just need to change the class value from drocap1 to drocap4 to choose the style you want. And here is an example:
<div class="three columns">
<h4>DropCaps 1</h4>
<h5 class="subheader">Lorem ipsum dolor sit</h5>
<p>
<span class="dropcap1">W</span>
libero quam euismod quam, sed sodales purus nisl eget felis. Pellentesque elit massa, cursus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<!-- end three columns -->
</div>
The teaser box content style also dragged in the theme, you can use it with the form you want:
<div class="teaser">
<div class="teaser_preview_box">
<div class="lightbox_item_style2">
<img src="images/files/portfolio/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
<!-- end preview box -->
</div>
<h5><a href="#">Teaser Title 1</a></h5>
<h6 class="subheader">Small Subheader Here</h6>
<p>
These matters to this principle of selection: he rejects <a href="#">pleasures</a> to secure other greater pleasures.
</p>
<a class="button secondary" href="#">Read More →</a>
<!-- end teaser -->
</div>
There are 2 styles of lightboxes, they will be as following:
The 1st lightbox style connstruction is as following:
<div class="lightbox_item_style1">
<img src="images/files/portfolio/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
The 2nd lightbox style connstruction is as following:
<div class="lightbox_item_style2">
<img src="images/files/portfolio/image.jpg" alt="Post Image">
<div class="lightbox_item_style2_overlay_content">
<a class="preview" href="images/files/portfolio/preview/image1.jpg">
<i class="icon-eye-open"></i>
</a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
The pricing table has very flexibility with use, you can use any column width you want, just take in mind the combined columns widths must equal to 12 columns. Also you can spacify featured pricing table column and free pricing table column, and also you can make features list column. Also you have options to use right and wrong icons in the pricing table. To add the right sign use <li><i class="icon-ok"></i></li>, and to add the wrong sign use <li><i class="icon-remove"></i></li>
Now i will show pricing table columns with 4 columns. To make any pricing table columns as a free pricing table columns, you need just to change the class vlaue pricing_table_column to free_pricing_table_column to be from <div class="pricing_table_column"> to <div class="free_pricing_table_column"> and the button used in pricing table column footer is primary button style with icon.
Also to make any pricing table columns as a featured pricing table columns, you need just to change the class vlaue pricing_table_column to featured_pricing_table_column to be from <div class="pricing_table_column"> to <div class="free_pricing_table_column"> and the button used in pricing table column footer is colorful button style with icon.
<div class="pricing_table twelve columns">
<div class="row">
<div class="three columns">
<div class="pricing_table_column free_pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Basic</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>0<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button medium right_icon" href="#">Sign Up Now!<i class="icon-gift align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end three columns -->
</div>
<div class="three columns">
<div class="pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Medium</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>17<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button medium right_icon" href="#">Sign Up Now!<i class="icon-share-alt align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end three columns -->
</div>
<div class="three columns">
<div class="pricing_table_column featured_pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Professional</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>35<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button colorful medium right_icon" href="#">Sign Up Now!<i class="icon-star align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end three columns -->
</div>
<div class="three columns">
<div class="pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Premium</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>48<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button medium right_icon" href="#">Sign Up Now!<i class="icon-share-alt align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end three columns -->
</div>
<!-- end row -->
</div>
<!-- end pricing table [ twelve columns ] -->
</div>
This example is using 6 pricing table columns with features column list. Just to make features column list, change <div class="pricing_table_column"> to <div class="pricing_table_column_features"> and change the column header content as shown in the example.
To make only 4 pricing table columns and features column, just make the features columns with class value four columns and the other columns with two columns
<div class="pricing_table twelve columns">
<div class="row">
<div class="two columns">
<div class="pricing_table_column_features">
<div class="pricing_table_column_header">
<h2>Choose <span class="colored">Your</span> Plan</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>Amount of space</li>
<li>Bandwidth per month</li>
<li>No. of e-mail accounts</li>
<li>No. of MySql databases</li>
<li>24h support</li>
<li><span class="check">Support tickets per mo.</span></li>
<li>Widget tracking</li>
<li>30 day trial</li>
<li>Sign-in / singup options</li>
<li>Domain aliasing</li>
<!-- end features -->
</ul>
<!-- end pricing table column -->
</div>
<!-- end two columns -->
</div>
<div class="two columns">
<div class="pricing_table_column free_pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Basic</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>0<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button small right_icon" href="#">Sign Up<i class="icon-gift align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end two columns -->
</div>
<div class="two columns">
<div class="pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Mini</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>10<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button small right_icon" href="#">Sign Up<i class="icon-share-alt align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end two columns -->
</div>
<div class="two columns">
<div class="pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Medium</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>17<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button small right_icon" href="#">Sign Up<i class="icon-share-alt align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end two columns -->
</div>
<div class="two columns">
<div class="pricing_table_column featured_pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Professional</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>35<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-remove"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button colorful small right_icon" href="#">Sign Up<i class="icon-star align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end two columns -->
</div>
<div class="two columns">
<div class="pricing_table_column">
<div class="pricing_table_column_header">
<h3 class="column_title">Premium</h3>
<h2 class="column_price">
<span class="currency_sign">$</span>48<small>Mo</small>
</h2>
<!-- end pricing table column header -->
</div>
<ul class="column_features clearfix">
<li>10GB</li>
<li>100GB</li>
<li>1</li>
<li>1</li>
<li>Yes</li>
<li><span class="check">1</span></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<li><i class="icon-ok"></i></li>
<!-- end features -->
</ul>
<div class="pricing_table_column_footer">
<a class="button small right_icon" href="#">Sign Up<i class="icon-share-alt align_right"></i></a>
<!-- end pricing table column footer -->
</div>
<!-- end pricing table column -->
</div>
<!-- end two columns -->
</div>
<!-- end row -->
</div>
<!-- end pricing table [ twelve columns ] -->
</div>
Thre are 2 styles of tables, just table with content and features list with table. The next example is for table without features list, but to add features list, just change <table> to <table class="table_with_features_list"> and then fill the content of the table and features list
<table>
<thead>
<tr>
<th>iPhone 3GS</th>
<th>iPad</th>
<th>iPod Nano</th>
<th>MacBook</th>
</tr>
</thead>
<tbody>
<tr>
<td>10GB</td>
<td>10GB</td>
<td>10GB</td>
<td>10GB</td>
</tr>
<tr>
<td>100GB</td>
<td>100GB</td>
<td>100GB</td>
<td>100GB</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><i class="icon-ok"></i></td>
<td><i class="icon-ok"></i></td>
<td><i class="icon-ok"></i></td>
<td><i class="icon-ok"></i></td>
</tr>
<tr>
<td><i class="icon-remove"></i></td>
<td><i class="icon-remove"></i></td>
<td><i class="icon-remove"></i></td>
<td><i class="icon-remove"></i></td>
</tr>
</tbody>
</table>
And here is an example of tables with features list
<table class="table_with_features_list">
<thead>
<tr>
<th>Features <span class="colored">List</span></th>
<th>iPhone 3GS</th>
<th>iPad</th>
<th>iPod Nano</th>
<th>MacBook</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amount of space</td>
<td>10GB</td>
<td>10GB</td>
<td>10GB</td>
<td>10GB</td>
</tr>
<tr>
<td>Bandwidth per month</td>
<td>100GB</td>
<td>100GB</td>
<td>100GB</td>
<td>100GB</td>
</tr>
<tr>
<td>24h support</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>No. of e-mail accounts</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Widget tracking</td>
<td><i class="icon-remove"></i></td>
<td><i class="icon-ok"></i></td>
<td><i class="icon-remove"></i></td>
<td><i class="icon-ok"></i></td>
</tr>
<tr>
<td>30 day trial</td>
<td><i class="icon-remove"></i></td>
<td><i class="icon-remove"></i></td>
<td><i class="icon-ok"></i></td>
<td><i class="icon-ok"></i></td>
</tr>
</tbody>
</table>
Also social icons is dragged in this theme. All possible almost social bookmarks available. It has this construction as following:
<ul class="social_icons">
<li class="rss"><a href="#">rss</a></li>
<li class="skype"><a href="#">skype</a></li>
<li class="stumbleupon"><a href="#">stumbleupon</a></li>
<li class="technorati"><a href="#">technorati</a></li>
<li class="tumblr"><a href="#">tumblr</a></li>
<li class="twitter"><a href="#">twitter</a></li>
<li class="vimeo"><a href="#">vimeo</a></li>
<li class="wordpress"><a href="#">wordpress</a></li>
<li class="yahoo"><a href="#">yahoo</a></li>
<li class="yelp"><a href="#">yelp</a></li>
<li class="youtube"><a href="#">youtube</a></li>
<li class="zerply"><a href="#">zerply</a></li>
<li class="zootool"><a href="#">zootool</a></li>
<li class="aim"><a href="#">aim</a></li>
<li class="apple"><a href="#">apple</a></li>
<li class="behance"><a href="#">behance</a></li>
<li class="blogger"><a href="#">blogger</a></li>
<li class="cargo"><a href="#">cargo</a></li>
<li class="delicious"><a href="#">delicious</a></li>
<li class="deviantart"><a href="#">deviantart</a></li>
<li class="digg"><a href="#">digg</a></li>
<li class="dopplr"><a href="#">dopplr</a></li>
<li class="dribbble"><a href="#">dribbble</a></li>
<li class="ember"><a href="#">ember</a></li>
<li class="evernote"><a href="#">evernote</a></li>
<li class="facebook"><a href="#">facebook</a></li>
<li class="flickr"><a href="#">flickr</a></li>
<li class="forrst"><a href="#">forrst</a></li>
<li class="github"><a href="#">github</a></li>
<li class="google"><a href="#">google</a></li>
<li class="googleplus"><a href="#">googleplus</a></li>
<li class="gowalla"><a href="#">gowalla</a></li>
<li class="grooveshark"><a href="#">grooveshark</a></li>
<li class="html5"><a href="#">html5</a></li>
<li class="icloud"><a href="#">icloud</a></li>
<li class="lastfm"><a href="#">lastfm</a></li>
<li class="linkedin"><a href="#">linkedin</a></li>
<li class="metacafe"><a href="#">metacafe</a></li>
<li class="mixx"><a href="#">mixx</a></li>
<li class="myspace"><a href="#">myspace</a></li>
<li class="netvibes"><a href="#">netvibes</a></li>
<li class="newsvine"><a href="#">newsvine</a></li>
<li class="orkut"><a href="#">orkut</a></li>
<li class="paypal"><a href="#">paypal</a></li>
<li class="picasa"><a href="#">picasa</a></li>
<li class="pinterest"><a href="#">pinterest</a></li>
<li class="plurk"><a href="#">plurk</a></li>
<li class="posterous"><a href="#">posterous</a></li>
<li class="reddit"><a href="#">reddit</a></li>
</ul><!--END SOCIAL-BOOKMARKS-->
There are 3 styles of section titles. They will be as following:
The 1st section title style
<div class="section_title_style1_container">
<div class="section_title_style1">
<span>From Portfolio</span>
</div>
<!-- section_title_style1 -->
</div>
The 2nd section title style
<div class="section_title_style2_container">
<div class="section_title_style2">
<span>From Portfolio</span>
</div>
<!-- section_title_style2 -->
</div>
The 3rd section title style
<div class="section_title_style3_container">
<div class="section_title_style3">
<span>From Portfolio</span>
</div>
<!-- section_title_style3 -->
</div>
You can also use skills graph in this theme. It has this following construction:
<ul class="skills-graph" id="graph1">
<li><p>Web design <strong>70%</strong></p><span class="70"></span></li>
<li><p>Wordpress <strong>100%</strong></p><span class="100"></span></li>
<li><p>Jquery <strong>85%</strong></p><span class="85"></span></li>
<li><p>Print <strong>31%</strong></p><span class="31"></span></li>
<li><p>Logo design <strong>51%</strong></p><span class="50"></span></li>
<li><p>Seo <strong>75%</strong></p><span class="75"></span></li>
</ul><!--END SKILLS-GRAPH-->
There are 4 types of dividers, 2 with only spaces and the other 2 with line. They will be as following:
The 1st is mini divider space with 25px space
<div class="mini_divider_space"></div>
The 2nd is divider space with 50px space
<div class="divider_space"></div>
The 3rd divider space with line with 50px space
<div class="divider_space_container">
<div class="divider_space_with_line"></div>
</div>
The 4th divider space with two lines with 50px space
<div class="divider_space_container">
<div class="divider_space_with_two_line"></div>
</div>
There are 3 styles of texts highlight. Just you can change between class value highlight_grey, highlight_dark and highlight_colored. They are all as following:
<p> Vivamus nec sapien massa, a imperdiet diam. <span class="highlight_grey">Clieuam</span> erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer <span class="highlight_dark">commodo</span> tristique odio, quis fringilla ligula aliquet ut. Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer <span class="highlight_colored">consectetur</span> tristique odio, quis fringilla ligula aliquet ut. </p>
There are 4 types of alert boxes. They will be as following:
<div class="error">
<strong>Error</strong> - On the other hand, we denounce with righteous!
<!-- end error alert box -->
</div>
<div class="success">
<strong>Success</strong> - On the other hand, we denounce with righteous!
<!-- end error alert box -->
</div>
<div class="info">
<strong>Info</strong> - On the other hand, we denounce with righteous!
<!-- end error alert box -->
</div>
<div class="notice">
<strong>Notice</strong> - On the other hand, we denounce with righteous!
<!-- end error alert box -->
</div>
Also you can use reading box in this theme. It has the following construction:
<div class="reading_box">
<div class="row">
<div class="nine columns">
<h2>Let's <span class="colored">Explore</span> More About Us!</h2>
<h4 class="subheader">We Denounce With Righteous Indignation and Dislike Men Who</h4>
<!-- end nine columns -->
</div>
<div class="three columns">
<a class="button colorful large left_icon" href="#">
<i class="icon-gift align_left"></i>
Read More
</a>
<!-- end three columns -->
</div>
<!-- end row -->
</div>
<!-- end reading box -->
</div>
Generally, widgets always used in sidebar. Sidebar consists of block of <div class="sidebar_box"> and each sidebar_box has its <div class="sidebar_box_title">. Sidebar has this construction:
<section class="sidebar three columns">
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Get In</span> Touch
<!-- end sidebar box title -->
</div>
<ul class="social_icons">
<li class="twitter"><a href="#">twitter</a></li>
<li class="facebook"><a href="#">facebook</a></li>
<li class="dribbble"><a href="#">dribbble</a></li>
<li class="rss"><a href="#">rss</a></li>
<li class="flickr"><a href="#">flickr</a></li>
</ul><!--END SOCIAL-BOOKMARKS-->
<!-- end sidebar box -->
</div>
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Search</span> Form
<!-- end sidebar box title -->
</div>
<!-- end sidebar box -->
</div>
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Ar</span>chives
<!-- end sidebar box title -->
</div>
<!-- end sidebar box -->
</div>
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Contact</span> Info
<!-- end sidebar box title -->
</div>
<!-- end sidebar box -->
</div>
<!-- end sidebar [ three columns ] -->
</section>
Now i will explain widgets as following
It has the following construction:
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Ar</span>chives
<!-- end sidebar box title -->
</div>
<ul class="sidebar_menu">
<li><a href="#">July 2011</a> (11)</li>
<li><a href="#">June 2011</a> (21)</li>
<li><a href="#">May 2011</a> (3)</li>
<li><a href="#">April 2011</a> (5)</li>
<li><a href="#">March 2011</a> (9)</li>
<!-- end sidebar menu -->
</ul>
<!-- end sidebar box -->
</div>
Twitter Widget is used in sidebar and footer, also can be used anywhere. After the udate from Twitter to API v1.1, we will need to deal with very simple php needs. At first, you need to go to https://dev.twitter.com/apps and make a new app and after finishing you will find at bottom a button to make the access token contents to get the last content to fill the index.php file that is existed in twitter/js folder. You will need to fill the 4 place with the contents you get after making the application. This is the content of the index.php file you will see and that you will need to fill it with the content mentioned.
. . . // Your Twitter App Consumer Key private $consumer_key = 'YOUR_CONSUMER_KEY'; // Your Twitter App Consumer Secret private $consumer_secret = 'YOUR_CONSUMER_SECRET'; // Your Twitter App Access Token private $user_token = 'YOUR_ACCESS_TOKEN'; // Your Twitter App Access Token Secret private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET'; . . .
For twitter widget in sidebar, it has the following construction:
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Twitter</span> Widget
<!-- end sidebar box title -->
</div>
<div class="twitter_widget tweet"></div>
<!-- end sidebar box -->
</div>
For twitter widget in footer, it has the following construction:
<div class="footer_column_content"> <div class="footer_column_title"> Flickr Stream <!-- end footer_column_title --> </div> <div class='twitter_widget tweet'></div> <!-- end footer_column_content --> </div>
Tabs has the following construction:
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Flickr</span> Widget
<!-- end sidebar box title -->
</div>
<ul class="flickr_widget"></ul>
<!-- end sidebar box -->
</div>
Contact Form Widget has the following construction:
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Contact</span> Form
<!-- end sidebar box title -->
</div>
<form class="contact_form_widget cmxform" method="post" action="">
<div class="row">
<div class="twelve columns">
<input id="cname" type="text" placeholder="Name (*)" name="name" class="required ten">
</div>
<div class="twelve columns">
<input id="cemail" type="text" placeholder="E-mail (*)" name="email" class="required email ten">
</div>
<div class="twelve columns">
<input id="curl" type="text" placeholder="Website" name="url" class="ten">
</div>
<div class="twelve columns">
<textarea id="ccomment" name="comment" placeholder="Message (*)" class="required twelve" cols="" rows=""></textarea>
</div>
<div class="twelve columns">
<input class="submit" type="submit" value="Submit">
</div>
</div>
<!-- end contact form -->
</form>
<!-- end sidebar box -->
</div>
Contact Info Widget has the following construction:
<div class="sidebar_box">
<div class="sidebar_box_title">
<span class="colored">Contact</span> Info
<!-- end sidebar box title -->
</div>
<ul class="contact_info">
<li><i class="icon-road"></i><strong>Freelancer Street.</strong> 36/2 No:430 – <strong>New York, NYC</strong> 0000 / <strong>USA</strong></li>
<li><i class="icon-phone"></i><strong>Phone :</strong> +00 (0) 000 00 00</li>
<li><i class="icon-file-alt"></i><strong>Fax :</strong> +00 (0) 000 00 00</li>
<li><i class="icon-bullhorn"></i><a href="#">support@domain.com</a></li>
<li><i class="icon-map-marker"></i><a href="#">Find us on Google Maps</a></li>
<!-- end sidebar menu -->
</ul>
<!-- end sidebar box -->
</div>
In this section, i will show all other content that not explained before. They will be as following;
There are services boxes that you can use to make a service page. It can be with any column width you want. We used three and four columns width in our current example. It has like this construction:
<div class="service_box four columns text_center">
<div class="teaser">
<div class="teaser_preview_box">
<i class="icon-cloud icon-6x"></i>
</div>
<h5><a href="#">Premium Experience</a></h5>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat. Sed consectetur suscipit nunc et rutrum.
</p>
<a class="button secondary small" href="#">More Details</a>
<!-- end teaser -->
</div>
<!-- end service box [ four columns ] -->
</div>
.
.
.
<div class="service_box three columns text_center">
<div class="teaser">
<div class="teaser_preview_box">
<i class="icon-cloud icon-5x"></i>
</div>
<h5><a href="#">Premium Experience</a></h5>
<p>
Vivamus nec sapien massa, a imperdiet diam. Aliquam erat volutpat Sed
</p>
<a class="button secondary small" href="#">More Details</a>
<!-- end teaser -->
</div>
<!-- end service box [ three columns ] -->
</div>
There are Team boxes that you can use to make a team page. It can be with any column width you want. We used three and four columns width in our current example. It has like this construction:
<div class="team_member three columns text_center">
<div class="teaser">
<div class="teaser_preview_box">
<img src="images/files/image.jpg" alt="">
</div>
<h5><a href="#">John Doe</a></h5>
<h6 class="subheader">CEO / Founder</h6>
<ul class="team_member_social_icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin-sign"></i></a></li>
<li><a href="#"><i class="icon-google-plus"></i></a></li>
<li><a href="#"><i class="icon-rss"></i></a></li>
</ul>
<!-- end teaser -->
</div>
<!-- end team member [ three columns ] -->
</div>
.
.
.
<div class="team_member four columns text_center">
<div class="teaser">
<div class="teaser_preview_box">
<img src="images/files/image.jpg" alt="">
</div>
<h5><a href="#">John Doe</a></h5>
<h6 class="subheader">CEO / Founder</h6>
<ul class="team_member_social_icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin-sign"></i></a></li>
<li><a href="#"><i class="icon-google-plus"></i></a></li>
<li><a href="#"><i class="icon-rss"></i></a></li>
</ul>
<!-- end teaser -->
</div>
<!-- end team member [ four columns ] -->
</div>
The contact page has contact form with validation, and also google map is included. It has the following construction:
<h3>Get In Touch</h3>
<h5 class="subheader">Cum sociis natoque penatibus et magnis</h5>
<p>
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<div id="map_canvas"></div>
<form class="contact_form cmxform" method="post" action="">
<div class="row">
<div class="two columns">
<label for="cname">Name</label>
<span>(*)</span>
</div>
<div class="ten columns">
<input id="cname" type="text" name="name" class="required nine">
</div>
</div>
<div class="row">
<div class="two columns">
<label for="cemail">E-mail</label>
<span>(*)</span>
</div>
<div class="ten columns">
<input id="cemail" type="text" name="email" class="required email nine">
</div>
</div>
<div class="row">
<div class="two columns">
<label for="curl">Website</label>
</div>
<div class="ten columns">
<input id="curl" type="text" name="url" class="nine">
</div>
</div>
<div class="row">
<div class="two columns">
<label for="ccomment">Message</label>
<span>(*)</span>
</div>
<div class="ten columns">
<textarea id="ccomment" name="comment" class="required ten" cols="" rows=""></textarea>
</div>
</div>
<div class="row">
<div class="two columns">
<label></label>
</div>
<div class="ten columns">
<input class="submit" type="submit" value="Submit">
</div>
</div>
<!-- end contact form -->
</form>
To specify latitude and longitude, you can go to http://www.findlatitudeandlongitude.com/ and find your location and copy your location latitude and longitude and paste them in the related js code in custom.js. Also you can add information of your location when clicking on the map anchor, to edit this information, just also go to the same js code and you will find these information content start by var contentString = '<div id="content">'+. It has the following code:
// -------------------------------------------------------------------------------------------
// Google Map
// -------------------------------------------------------------------------------------------
function initialize() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116); //Here set latitude and longitude values
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
});
var contentString = ''+
''+
''+
'Høgenhaug
'+
''+
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
'+
''+
'';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
}
You can use multi slider in the theme, add it throw any column container. This multislider as example like used in Homepage 1 is wrapped with seven columns width. Multi slider has the following structure:
<div class="multi_flexslider">
<ul class="slides">
<li>
<div class="lightbox_item_style1">
<img src="images/files/portfolio/image.jpg" alt="Post Image">
<div class="lightbox_item_style1_overlay_content">
<h4 class="lightbox_item_style1_title"><a href="#">Omnis iste natus</a></h4>
<h6 class="subheader">Cum sociis natoque</h6>
<a class="preview" href="images/files/portfolio/preview/image1.jpg"><i class="icon-eye-open"></i></a>
<a class="permalink" href="#"><i class="icon-link"></i></a>
<!-- end lightbox item overlay content -->
</div>
<!-- end lightbox item -->
</div>
</li>
<li>
<img src="images/files/portfolio/image.jpg">
</li>
<li>
<img src="images/files/portfolio/image.jpg">
<p class="simple_flex_caption">
Captions and cupcakes. <a href="#">Winning</a> combination.
</p>
</li>
<li>
<img src="images/files/portfolio/image.jpg">
</li>
</ul>
<!-- end multi_flexslider -->
</div>
<audio preload="auto" controls>
<source src="audio/BlueDucks_FourFlossFiveSix.mp3">
<source src="audio/BlueDucks_FourFlossFiveSix.ogg">
<source src="audio/BlueDucks_FourFlossFiveSix.wav">
</audio>
You can also use audioplayer with this theme. You can find the folder of sound files in audio folder. You can find more info about the audioplayer Here!. Here is the audioplayer construction:
<audio preload="auto" controls>
<source src="audio/BlueDucks_FourFlossFiveSix.mp3">
<source src="audio/BlueDucks_FourFlossFiveSix.ogg">
<source src="audio/BlueDucks_FourFlossFiveSix.wav">
</audio>
Headings is sure common. You can use headings from <h1> to <h6>. Also you can use subheaders by adding class="subheader" to headings to be like from <h1 class="subheader"> to <h6 class="subheader">. They will be like this:
<h1>h1 Heading Title</h1> <h2>h2 Heading Title</h2> <h3>h3 Heading Title</h3> <h4>h4 Heading Title</h4> <h5>h5 Heading Title</h5> <h6>h6 Heading Title</h6> <h1 class="subheader">h1 subeader Title</h1> <h2 class="subheader">h2 subeader Title</h2> <h3 class="subheader">h3 subeader Title</h3> <h4 class="subheader">h4 subeader Title</h4> <h5 class="subheader">h5 subeader Title</h5> <h6 class="subheader">h6 subeader Title</h6>
You can make any text colored with theme general color just by adding class="colored" to any text like this:
<p> Vivamus nec sapien massa, a imperdiet diam. <span class="colored">Clieuam</span> erat volutpat. Sed consectetur suscipit nunc et rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
To make any element left or right aligned, just add class value = align_left for left alignment and class value = align_right for right alignment, like used in this link:
<a class="readmore_link align_left" href="#">Read More →</a> <a class="readmore_link align_right" href="#">Read More →</a>
You also can make text to be align to left, right or center. Just ad class vlaue = text_left for text aligned left, text_right for text aligned right and text_center for text aligned center. Text center lignment is used for the info box style 1 like this:
<div class="three columns info_box_style1 text_center">
<h5><a href="#">Smart Touches</a></h5>
<i class="icon_style1 icon_rounded icon-ok icon-4x"></i>
<p>
The files are completely editable in Photoshop so you can change sizes, colors, typefaces, etc.
</p>
<a class="button secondary small right_icon" href="#">
<i class="icon-share-alt align_right"></i>
Read More
</a>
<!-- end three columns [ info box style1 ] -->
</div>
All CSS are controlled through only one files which is css/css_structure_and_styles_imports.css. And this file containing imports to css files. I used this way of dealing with the css part because i see that it's very helpful and fast to make any very quickly css customization, and if you anytime wanted to attach a new css file in the case of using many HTML pages published, so you will need to go to each HTML page and write the line of attaching this css file, so it will be so hard and annoying. Although for the way of using css imports method, you just will need to a 1 line in the file that containing imports of the template, so it will be very flexible, qiuck and easy.
You can find many styles options, like text logo or image logo style option, boxed or fullwidth layout style option, +290 pattern background for boxed layout style, 20 ready skins, and last, importing for google fonts for both general font and headings
When you go to css/css_structure_and_styles_imports.css, you can easily take a look and under everything about stylings because it's organized and detailed mapped. for custom_separated_css_file_for_custom_specific_optimizations.css file is useful if you would like to make any specific change in the css feature like layout or like header font size throw increase or decrease and so on, and preventing to make changes in the default css file
Here is the structure of the main css file css_structure_and_styles_imports.css :
/* THIS FILE CONTAINS ALL CSS FILES IMPORTS. IT CONSISTS OF CSS FILES WITH NO CHANGE WITH THEM, AND THE OTHER PART IS FOR STYLES OPTIONS OF THE THEME */
/*
---------------------------------------------------------------------------------------------------------------------------------
"CSS FILES" MAP
---------------------------------------------------------------------------------------------------------------------------------
A) HTML5 DISPLAY DEFINITIONS
1. normalize.css
B) THE FOUNDATION FRAMEWORK CSS FILE
1. foundation.css
C) IE CSS FIXES NEEDS
1. ie.css
D) FLEXSLIDER CSS FILE
1. flexslider.css
E) BLOG CSS FILE
1. blog.css
F) SHORTCODES CSS FILE
1. shortcodes.css
G) THE ICONS FONT CSS FILE
1. font-awesome.min.css
H) SOCIAL BOOKMARKS CSS FILE
1. social_icons.css
I) AUDIO PLAYER CSS FILE
1. audioplayer.css
J) COLORBOX CSS FILE
1. colorbox/colorbox_skin4.css
K) RESPONSIVE SPECIFICATIONS CSS FILE
1. responsive_specifications.css
L) COLORS AND BACKGROUNDS OPTIONS CSS FILE
1. colors_and_backgrounds_options.css
M) LOGO STLYES OPTIONS
1. text_logo.css
2. image_logo.css
N) LAYOUT WIDTH OPTIONS
1. boxed_layout_style.css
2. fullwidth_layout_style.css
O) SKINS OPTIONS
1. skin1.css
2. skin2.css
3. skin3.css
.
.
.
.
20. skin20.css
P) BACKGROUND PATTERN OPTION OF BOXED LAYOUT
(1)- TEXTURE PATTERN [ take in mind to change the previous floder name in the import line to "texture_pattern" ]
1. texture_pattern/1.css
2. texture_pattern/2.css
3. texture_pattern/3.css
.
.
.
.
294. texture_pattern/294.css
(2)- GRID PATTERN [ take in mind to change the previous floder name in the import line to "grid_pattern" ]
1. grid_pattern/1.css
2. grid_pattern/2.css
3. grid_pattern/3.css
.
.
.
.
18. grid_pattern/18.css
Q) CUSTOM SEPARATED CSS FILES FOR CUSTOM SEPARATED OTIMIZATIONS [ this is for a quick change any element separately ]
1. custom_separated_css_file_for_custom_specific_optimizations.css
R) GENERAL FONT [ google font import ]
S) HEADING FONT [ google font import ]
*/
/* ### HOW TO USE ###
To change between the styles specified elements, just go to the "CSS MAP" and see the style you would like to choose and apply and go down to the "IMPORTS PART" and past the css file name in the suitable place. It's comented, so you can simply specify where to paste your changes!
*/
/* ###### IMPORTS PART ###### */
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF CSS FILES IMPORTS THAT SHOULD BE LEFT AS WITHOUT CHANGING THEM
----------------------------------------------------------------------------------------------------------------------------- */
/* HTML5 DISPLAY DEFINITIONS [ no change with import ] */
@import url("normalize.css");
/* LAYOUT AND ELEMENTS STRUCTURES [ no change with import ] */
@import url("styles.css");
/* THE FOUNDATION FRAMEWORK CSS FILE. IT'S CONTAINING THE RESPONSIVE LAYOUT SEPCIFICATIONS [ no change with import ] */
@import url("foundation.css");
/* IE CSS FIXES NEEDS [ no change with import ] */
@import url("ie.css");
/* FLEXSLIDER CSS FILE [ no change with import ] */
@import url("flexslider.css");
/* BLOG CSS FILE [ no change with import ] */
@import url("blog.css");
/* SHORTCODES CSS FILE [ no change with import ] */
@import url("shortcodes.css");
/* THE ICONS FONT CSS FILE [ no change with import ] */
@import url("font-awesome.min.css");
/* SOCIAL BOOKMARKS CSS FILE [ no change with import ] */
@import url("social_icons.css");
/* AUDIO PLAYER CSS FILE [ no change with import ] */
@import url("audioplayer.css");
/* COLORBOX CSS FILE [ no change with import ] */
@import url("colorbox/colorbox_skin4.css");
/* RESPONSIVE SPECIFICATIONS CSS FILE [ no change with import ] */
@import url("responsive_specifications.css");
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
/* COLORS AND BACKGROUNDS OPTIONS */
@import url("colors_and_backgrounds_options.css");
/* LOGO STLYES OPTIONS */
@import url("logo_styles_options/text_logo.css");
/* LAYOUT WIDTH OPTIONS */
@import url("layout_width_style_options/fullwidth_layout_style.css");
/* SKINS OPTIONS */
/* @import url("skins/skin14.css"); */
/* BACKGROUND PATTERN OPTION OF BOXED LAYOUT */
@import url("layout_width_style_options/background_pattern_style_options/texture_pattern/20.css");
/* CUSTOM SEPARATED CSS FILES FOR CUSTOM SEPARATED OPTIMIZATIONS */
@import url("custom_separated_css_file_for_custom_specific_optimizations.css");
/* GENERAL FONT */
@import url("");
/* HEADING FONT */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic");
You can easily choose between logo styles to be text or image style. Just go to css/css_structure_and_styles_imports.css and change betweentext_logo and image_logo, or you can read the map and you will find all details about styling explained there.
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* LOGO STLYES OPTIONS */
@import url("logo_styles_options/text_logo.css");
.
.
.
.
You can easily choose between layout width styles to be boxed or fullwidth layout style. Just go to css/css_structure_and_styles_imports.css and change betweenboxed_layout_style and fullwidth_layout_style, or you can read the map and you will find all details about styling explained there.
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* LAYOUT WIDTH OPTIONS */
@import url("layout_width_style_options/boxed_layout_style.css");
.
.
.
.
There are 2 types of background patterns, 294 texture background pattern that you can choose from texture_pattern/1 to texture_pattern/294. Or 18 grid background pattern that you can choose from grid_pattern/1 to grid_pattern/18.
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* BACKGROUND PATTERN OPTION OF BOXED LAYOUT */
@import url("layout_width_style_options/background_pattern_style_options/texture_pattern/20.css");
.
.
.
.
There are 20 ready sample skins that you can use. You can choose from skin1 to skin20.
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* SKINS OPTIONS */
@import url("skins/skin14.css");
.
.
.
.
If you want to make your custom skin, then you will need to go to css/skins and make a new copy of any css file [ let's call it like custom_skin_style1.css ] and then open it and change the value there to get your custom skin and then relpace the currently skin css imported file used such as skin1.css with custom_skin_style1.css
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* SKINS OPTIONS */
@import url("skins/custom_skin_style1.css");
.
.
.
.
Each skin css file has its custom background pattern, so you will need to add comment on the import line of background pattern style, because if the import of pattern background is apllied, it will force the background pattern of the skin file applied to take the background pattern value of the imported css file of pattern background.
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* SKINS OPTIONS */
@import url("skins/custom_skin_style1.css");
/* BACKGROUND PATTERN OPTION OF BOXED LAYOUT */
/* @import url("layout_width_style_options/background_pattern_style_options/texture_pattern/20.css"); */
.
.
.
.
Google font is used here for headings, and Open Sans is what i'm using with weight 300, 300 italic, 400, 400 italic, 700 and 700 italic. If you want to use another font, just go to google font website and choose your preferred font with the same weights, and then copy the import line and paste it instead of the current font. And the same idea for the general font.
/* ###### IMPORTS PART ###### */
.
.
.
.
/* --------------------------------------------------------------------------------------------------------------------------
HERE IS THE SECTION OF STYLING FEATURES OF THE THEME THAT YOU CAN CHANGE ITS VALUES TO GET THE STYLES YOU WANT
----------------------------------------------------------------------------------------------------------------------------- */
.
.
.
/* GENERAL FONT */
@import url("");
/* HEADING FONT */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic");
And add this code in custom_separated_css_file_for_custom_specific_optimizations.css and change "open sans" font name used to the new font name you chosed. And the same with the general font
/* headings fonts */
.sidebar_box_title {
font-family: 'Open Sans', Arial, serif;
}
.footer_column_title {
font-family: "Open Sans", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', Arial, serif; /*OFL Sorts Mill Goudy TT*/
}
.lightbox_item_style1 .subheader {
font-family: 'Open Sans',Arial,serif !important;
}
/* general font */
body {
font-family: "Segoe UI",Frutiger,"Frutiger Linotype","dejavu sans","helvetica neue",arial,sans-serif;
}
.teaser .subheader {
font-family: "Segoe UI", "helvetica neue", arial, sans-serif;
}
.pricing_table .pricing_table_column_header .column_title {
font-family: "Segoe UI", "helvetica neue", arial, sans-serif;
}
There are many used of jquery plugin application like Flexslider, Colorbox Lightbox Plugin, Twitter Widget Plugin, Flickr Widget Plugin, Quicksand Filtering Plugin for Portfolio Sorting. There is just 1 js file at <head> and the other js files are at the bottom of each html page before </body>. And here is the JS files used in the theme
<!-- JAVASCRIPT [ other js files are existed at the bottom ] -->
<script src="js/modernizr.js"></script>
.
.
.
<!-- JAVASCRIPT -->
<script src="js/jquery.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<script src="js/jquery-css-transform.js"></script>
<script src="js/audioplayer.js"></script>
<script src="js/scroll.top.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.validate.pack.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.tweet.js"></script>
<script src="js/jflickrfeed.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/custom.js"></script>
<script>
//<![CDATA[
// FitVids
$("#full_container").fitVids();
//]]>
</script>
All control on javascript is in custom.js, so you can go there and make changes you want, it's arranged and commented so you will simply can specify all js codes that used in different parts of the theme content. It will be as following:
Flexslider is used for the frontpage slider, multi slider and testmonial slider. You can go to custom.js and easily make your changes. You can find options of flexslider Here!. Here are the js codes used for the 3 flexslider uses:
// -------------------------------------------------------------------------------------------
// FlexSlider
// -------------------------------------------------------------------------------------------
$(window).load(function() {
$('.flexslider').fitVids().flexslider({
animation: "fade", // animation: Modernizr.touch ? "slide" : "fade",
controlsContainer: " ",
pauseOnHover: true,
slideshowSpeed: 7000,
animationSpeed: 600,
easing: "swing",
useCSS: false,
direction: "horizontal",
controlNav: true,
directionNav: true,
smoothHeight: true,
startAt: 0,
slideshow: false,
initDelay: 0,
randomize: false,
video: false
});
});
//multi flexslider
$(window).load(function() {
$('.multi_flexslider').fitVids().flexslider({
animation: "fade",
controlsContainer: " ",
pauseOnHover: true,
slideshowSpeed: 4000,
animationSpeed: 600,
easing: "swing",
direction: "horizontal",
controlNav: true,
directionNav: true,
smoothHeight: true,
startAt: 0,
slideshow: false,
initDelay: 0,
randomize: false,
video: false
});
});
//testmonial slider
$(window).load(function() {
$('.testmonial_slider').flexslider({
animation: "fade",
controlsContainer: " ",
pauseOnHover: true,
slideshowSpeed: 7000,
animationSpeed: 600,
easing: "swing",
direction: "horizontal",
controlNav: true,
directionNav: false,
smoothHeight: true,
startAt: 0,
slideshow: true,
initDelay: 0,
randomize: false,
video: false
});
});
Colorbox plugin is used for lightbox. It's used with general preview links, portfolio and flickr images. you can find options of colorbox Here!. Here are the js codes used for the 3 colorbox uses:
// -------------------------------------------------------------------------------------------
// Colorbox Lightbox
// -------------------------------------------------------------------------------------------
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".preview").colorbox({
rel:'preview',
transition:"fade",
maxWidth:"100%",
maxHeight:"100%",
next: "",
previous: "",
close: "",
slideshow: true,
slideshowAuto: false,
slideshowSpeed: 5000,
slideshowStart: "",
slideshowStop: ""
});
});
// -------------------------------------------------------------------------------------------
// Portfolio Sorting
// -------------------------------------------------------------------------------------------
$(document).ready(function() {
// get the action filter option item on page load
var $filterType = $('#portfolio_categories li.active a').attr('class');
// get and assign the portfolio_items_container element to the
// $holder varible for use later
var $holder = $('ul.portfolio_items_container');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone();
// attempt to call Quicksand when a filter option
// item is clicked
$('#portfolio_categories li a').click(function(e) {
// reset the active class on all the buttons
$('#portfolio_categories li').removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
if ($filterType == 'all') {
// assign all li items to the $filteredData var when
// the 'All' filter option is clicked
var $filteredData = $data.find('li');
}
else {
// find all li elements that have our required $filterType
// values for the data-type element
var $filteredData = $data.find('li[data-type~=' + $filterType + ']');
}
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 1000,
easing: 'easeInOutQuint',
useScaling: false,
adjustHeight: 'dynamic'
}, function() {$(".preview").colorbox({
rel:'preview',
transition:"fade",
maxWidth:"100%",
maxHeight:"100%",
next: "",
previous: "",
close: "",
slideshow: true,
slideshowAuto: false,
slideshowSpeed: 5000,
slideshowStart: "",
slideshowStop: ""
});
});
//}, function() {$(".preview").colorbox({maxWidth:"100%", maxHeight:"100%"});});
return false;
});
});
// -------------------------------------------------------------------------------------------
// Flickr Widget
// -------------------------------------------------------------------------------------------
//sidebar flickr widget
$(document).ready(function(){
$('.flickr_widget').jflickrfeed({
limit: 12,
qstrings: {
id: '36587311@N08' // 54297118@N03
},
itemTemplate: 'I used quicksand plugin for portfolio fitering. You can find its options Here!. Here are the js codes used for the quicksand filtering: . If you want again to disable the cufon font, just add again comment on the its js code and remove the css piece above. They will be as following:
// -------------------------------------------------------------------------------------------
// Portfolio Sorting
// -------------------------------------------------------------------------------------------
$(document).ready(function() {
// get the action filter option item on page load
var $filterType = $('#portfolio_categories li.active a').attr('class');
// get and assign the portfolio_items_container element to the
// $holder varible for use later
var $holder = $('ul.portfolio_items_container');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone();
// attempt to call Quicksand when a filter option
// item is clicked
$('#portfolio_categories li a').click(function(e) {
// reset the active class on all the buttons
$('#portfolio_categories li').removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
if ($filterType == 'all') {
// assign all li items to the $filteredData var when
// the 'All' filter option is clicked
var $filteredData = $data.find('li');
}
else {
// find all li elements that have our required $filterType
// values for the data-type element
var $filteredData = $data.find('li[data-type~=' + $filterType + ']');
}
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 1000,
easing: 'easeInOutQuint',
useScaling: false,
adjustHeight: 'dynamic'
}, function() {$(".preview").colorbox({
rel:'preview',
transition:"fade",
maxWidth:"100%",
maxHeight:"100%",
next: "",
previous: "",
close: "",
slideshow: true,
slideshowAuto: false,
slideshowSpeed: 5000,
slideshowStart: "",
slideshowStop: ""
});
});
//}, function() {$(".preview").colorbox({maxWidth:"100%", maxHeight:"100%"});});
return false;
});
});
There are 2 js codes used for sidebar twitter widget and footer twitter widget. Just to add your twitter name value for username:. For sidebar twitter widget, it has this js code:
// -------------------------------------------------------------------------------------------
// Twitter Widget
// -------------------------------------------------------------------------------------------
//sidebar twitter widget
$(document).ready(function(){
$(".twitter_widget").tweet({
username: "brad_frost", //write here the twitter username
modpath: './js/twitter/',
join_text: "auto",
avatar_size: 48,
count: 3,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
For sidebar twitter widget, it has this js code:
// -------------------------------------------------------------------------------------------
// Twitter Widget
// -------------------------------------------------------------------------------------------
//footer twitter widget
$(document).ready(function(){
$(".footer_twitter_widget").tweet({
username: "envato",
modpath: './js/twitter/',
join_text: "auto",
avatar_size: 20,
count: 1,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
To use the Flickr Widget, you just need to change id: '' to the id you use in flickr, you can get your id from here! , you can also specify how much number of thumbnails to be showed throw limit: number value. See also more details in the related credits links for more customization, it's as following:
// -------------------------------------------------------------------------------------------
// Flickr Widget
// -------------------------------------------------------------------------------------------
//sidebar flickr widget
$(document).ready(function(){
$('.flickr_widget').jflickrfeed({
limit: 12,
qstrings: {
id: '36587311@N08' // 54297118@N03
},
itemTemplate: 'The PSDs files is existed in PSD folder, there are a full frontpage design and some theme elements that need to be separated in individual file
I've used the following javascript, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Morad