## Introduction to Pocket – Responsive HTML5 Theme

Theme Name: | Pocket Responsive HTML5 Theme
Theme by: | pixel-industry
Website: | themeforest.net/user/pixel-industry/portfolio
Created: | November 30, 2012
Version | 1.1

Welcome! First of all we want to thank you for purchasing our HTML5 Theme Pocket.

In the following sections we will explain how to set up and use it the easiest way possible. However, if you have any question that are beyond the scope of this help file, please feel free to contact us via our user page contact form. We'll answer to all your questions as soon as possible.

### Theme Features

In this section we will present you main features of Pocket HTML5 Theme

#### Features:

1. Responsive Design
2. HTML5 & CSS3
3. Pinterest, Dribble, Picasa, Instagram, Deviantart, Youtube, Flicker and Twitter
4. 2 Different Home Page Layouts
5. 2 Versions of Pricing Tables
6. Filterable Portfolio
7. 100% W3C Valid Files
8. Cross Browser Compatible
9. Very detailed Documentation
10. Anything Slider
11. Nivo Slider
12. jcarouFredsel Video Slider Widget
13. 960 Grid System

As You can see from the "features list", Pocket is based on 960 Grid System by Nathan Smith. if you are not already familiar with it, we suggest that your first read this article: 960 GS

### Change Log

- 30 November - Version 1.0, Theme Release
- 08 December 2012 - version 1.1
  - Touch support for slider and carousels
  - PSD files added
  - Pretty photo fix on Home page 2

## Files Included

In this section we will present you the files and folders organization. In your Download zip You will find following folders:

- Documentation
- HTML

Documentation folder contains this help file. HTML folder contains all .html files. "js" folder in which are placed all .js files that are used in the theme, "css" folder that contains all .css files, and "img" folder with icons. Note that images are not included in the download file. Images are used just for presentation purposes. There is also .php file included in the HTML folder, which is used for sending e-mail from contact form and blog comments. More about this in PHP section.

## HTML Structure

In this section we will present you the main HTML structure of all files.

All files has similar structure. The difference between "Home pages" and other pages is that Home pages has slider on the top, and have no page title. Other pages has page title on the top of the page. So, lets start from the beginning. Every page is divided in following sections:

- Header that contains:
  - Top bar wrapper - The top black bar on the top of the page
  - Header inner that contains:
    - Logo section
    - Main Navigation and Responsive navigation that is only visible on small screens.
- Content wrapper that contains all your content (columns, etc.). There are a few versions of content wrapper. Also, you can have more than one content wrapper on one page.
  As you can see in the preview, first content wrapper that is holding the content has border on the top. If there is only one content wrapper on the page, it will be attached to the footer - no margins between. If you'd like to use more than one wrapper, the first will have bottom margin to divide it from the second. Also, the second won't have colored border on the top.
  So, how to use those information. If you'd like to use just one content wrapper on your page use class "content-wrapper". If you like to use more than one content-wrapper use classes "content-wrapper multiple". If you don't want that pink border on the second content-wrapper use additional class "no-border". There are also two options for using shadows on content wrapper. If you have short content you can use content wrapper that has short shadow. To accomplish this just add class "short-shadow". All of these examples can be viewed in the preview files:
  - Multiple content wrapper - Home pages
  - Content wrapper that has short shadow - Home page (index.html)
  - Single content wrapper - Blog page
  - Content wrapper that has no shadow or top colored border - Home page version 1 (index.html)
- Footer wrapper that contains:
  - Footer - contains footer columns
  - Copyright container - contains copyright info and social icons.

As already mentioned, Pocket is based on 960 GS. So what do you need to know about it? Pocket is based on 12-column version of 960 Grid Systems. Every column is placed in a section with class ".container_12". If you are using nested columns then the first child (first nested column) must have class "alpha". The last nested column must have class "omega". For example you want to add a full width column (940px) and inside of it you have two columns that are 460px wide (half). You would do that this way:

    <section class="container_12">
        <section class=".grid_6 alpha">
    		// content of first nested column
        <section>

        <section class="grid_6 omega">
            // content of second nested column
        <section>
    <section>

## CSS Files And Structure

In this section we will present you all css files that are used in this theme.

All .css files are placed in CSS folder. Pocket includes following css files:

- anythingslider.css - Styling of "Anything slider" on Home pages
- basic.css - Basic styling including reset, because some browsers interpret the default behavior of HTML elements; 960-grid columns and elements
- ie8.css- Fixes for Internet Explorer 8
- nivo-slider.css - Styling for "Nivo slider" that is included in some pages, like Blog
- prettyphoto.css - This file contains style for prettyPhoto lightbox
- style.css - Main css files that contains styling for all pages.
- Colors css files:
  - pink.css - Default color style
  - blue.css - Blue color style
  - gold.css - Gold color style
  - green.css - Green color style
  - red.css - Red color style
  - teal.css - Teal color style

Every section of these .css files is commented, so we believe you will have no problem editing it. For example, comment that marks begin of the header wrap section looks like this:

     /*=====================================================================================
            HEADER CONTAINER STYLES
    ======================================================================================*/

## javaScript Files

In this section we will present you all js files that are used in this theme.

There are about 17 js files included within this theme. Here you will se how and where to use these files.

JavaScript files used are as follows:

- googlemaps.js - Used for google map on contact page
- jplayer folder - Used for displaying audio files on blog page
- html5shiv.js - Fix for old browsers
- jquery-1.7.2.js - jQuery library - must be included in all of your pages
- jquery.anythingslider.fx.min - jQuery file for Anything slider
- jquery.anythingslider.min - jQuery file for Anything slider
- jquery.carouFredSel-6.0.0-packed - CarouFredSel script used as portfolio Carousel on portfolio single page, testimonial scroll and note scroll.
- jquery-cookie.js - Used for remembering that top bar must be closed after refreshing the page, once you have closed it.
- jquery.easing.1.2 - jQuery easing effects used in Anything slider
- jquery.nivo.slider - Nivo slider gallery
- jquery.placeholder.min.js - Used to fixed placeholder for old browsers
- jquery.prettyphoto.js - Prettyphoto Lightbox plugin
- jquery.tweetscroll.js - Plugin for twitter presented in footer and sidebar
- portfolio.js - Portfolio pages custom options
- quicksand.js - Filter for portfolio items
- selectivizr.js - Fixes for IE
- socialstream.jquery.js - Our custom plugin for fetching image galleries from Picasa, Pinterest, Deviantart, Flickr, Youtube videos, Instagram and twitter feeds.
- include.js - Main Javascript file which is included in all pages. This file have many initialization scripts for jQuery plugins.

In the theme customization section we'll explain to you which js files you must include in the page. Now, let's take a look at main js file - include.js. This files includes following code:

- For main navigation sliding effect
- For responsive navigation
- For tabbed content
- For Accordion content
- Placeholder plugin
- Top bar animation
- Static header when you scroll your page
- Instagram feed that is placed on all of the pages in the footer.

In this file you can change the speed of the sliding drop down menu. Also you can put in this file code for calling photostream you want to use - if you want to use for example Picasa instead of Instagram.

###### important

You must include these .js files on all of your pages:

- html5shiv.js
- include.js
- jquery-1.7.2.js
- jquery-cookie.js
- jquery.placeholder.min.js
- socialstream.jquery.js - If you'll have photo streams in the footer or tweet scroll
- jquery.tweetscroll.js - If you'll have tweet scroll in your footer
- selectivizr.js

You can see example of how to include html5shiv.js and selectivizr.js scripts on all the pages that are included. This is used for fixing old browsers.

## PHP Files and Code Explanation

In this section we will explain how to modify PHP file so your visitors can contact you through contact form.

There is only one PHP file in Pocket theme and you can find it among standard HTML files in Theme root directory. Only thing you need to do is change $sendTo variable to your E-Mail address and you are ready to go! All messages visitors send you through contact form or comment form in blog, you will receive to you E-Mail.

###### important

If you decide to create your own Contact page, best thing to do is duplicane Pocket contact.html file and customize it as you like. This is important because that HTML file has AJAX script enabling sending messages to contact.php file.

## Theme Customization

In this section we will present you and explain how to customize Pocket, starting from choosing color style.

### Choosing Color Style

As already noted, there are six color styles you can choose from: pink, blue, teal, red, green and gold. So, the first thing to do when customizing this theme is choosing a color style. So, how to do that? All css color styles are placed in css folder. You will need to put path to style you want to use in head section of all of your pages. Current color style is pink. To change it, simply change the name of the style. For example, on blog page this is on line 16. You can see the example on the following image.

If you don't need other color styles you can simply delete them from your css folder.

### Top Bar Customization

In this section we will present you and explain how to customize top bar that is presented on the top of your pages.

The top bar which you can see on the top of your pages is wrapped in section with class "top-bar-wrapper". this section has full width. Inside of it there is actually div named "top-bar" which contains it's content.

Inside of it there is "a" tag that presents the close button. To change this text simply change the text in "a" tag. If you'd like to change the icon of that close button go to the css file of the style you are using, for example pink.css, to line 29. there you can change it's icon, color of the text and the color of the text on hover. See image below.

### Changing Logo

In this section we will present you and explain how to change the logo image.

Because of that Pocket comes with six color styles, in the img folder there are one folder named "colors". inside of it you will find separate folder for every color. Inside this specific folder, logo image is placed. So to change the logo you'll have to make some simple steps.

- First of all, you need to change the image in the folder of the style you are using.
- If you didn't changed the name or folder in which you have placed your logo, you can skip this step. Otherwise, you need to put the right path to your image in all your html files.
- The width of the Pocket logo is 216px, so if your logo has different size, you'll need to make some changes in the main style.css file. Total width of logo and main navigation must be 1005px. Logo has right margin of 30px. So if your logo is 200px wide, your navigation must be maximum 775px wide. You can find this styling in main css file style.css beginning from the line 285. See below image for more details.

### Main Navigation

In this section we will explain how to make main navigation and responsive navigation.

Main navigation is placed inside a section called nav-container, inside of a header. Main navigation HTML structure is the same for all pages, except one little difference - class named "active" which represents the current active page.

Inside of the nav-container is "nav" tag that presents main navigation and "select" with id "nav-responsive". The select is your responsive navigation which is visible only on small device screens. So when you insert your pages in the menu, you must do the same in the „nav-responsive“ select tag. The HTML structure of main navigation is shown below.

    <!-- nav container start -->
        <section id="nav-container">

            <!-- main navigation start  -->
            <nav id="nav">
                <ul>
                    <li>
                        <a href="index.html">
                            <i class="icon-nav icon-home"></i>
                            Home
                        </a>
                        <span>Welcome intro</span>

                        <ul>
                            <li><a href="home2.html">Home Page 2</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="about.html">
                            <i class="icon-nav icon-about"></i>
                            Pages
                        </a>
                        <span>Why choose us</span>

                        <ul>
                            <li><a href="about.html">About us</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="pricing.html">Pricing tables</a></li>
                            <li><a href="faq.html">FAQ Page</a></li>
                            <li><a href="404.html">404 Page</a></li>
                            <li><a href="columns.html">Columns</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="portfolio.html">
                            <i class="icon-nav icon-portfolio"></i>
                            Portfolio
                        </a>
                        <span>Our amazing work</span>

                        <ul>
                            <li><a href="portfolio2.html">Portfolio 2 columns</a></li>
                            <li><a href="portfolio3.html">Portfolio 3 columns</a></li>
                            <li><a href="portfolio4.html">Portfolio 4 columns</a></li>
                            <li><a href="portfolio-single.html">Portfolio single</a></li>
                        </ul>
                    </li>

                    <li class="active">
                        <a href="blog.html" class="active">
                            <i class="icon-nav icon-blog"></i>
                            Blog
                        </a>
                        <span>Our thoughts</span>

                        <ul>
                            <li><a href="blog.html">Blog sidebar right</a></li>
                            <li><a href="blog-left.html">Blog sidebar left</a></li>
                            <li><a href="blog-single.html">Blog single</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="contact.html">
                            <i class="icon-nav icon-contact"></i>
                            Contact
                        </a>
                        <span>Get in touch</span>
                    </li>
                </ul>
            </nav><!-- main navigation end -->

            <!-- responsive navigation start -->
            <select id="nav-responsive">
                <option selected="" value="">Site Navigation...</option>

                <option value="">Home</option>
                <option value="index.html">- Home default</option>
                <option value="home2.html">- Home page 2</option>

                <option value="">About</option>
                <option value="about.html">- About us</option>
                <option value="services.html">- Services</option>
                <option value="pricing.html">- Pricing tables</option>
                <option value="faq.html">- FAQ Page</option>
                <option value="404.html">- 404 Page</option>
                <option value="columns.html">- Columns</option>

                <option value="">Portfolio</option>
                <option value="portfolio2.html">- Portfolio 2 col</option>
                <option value="portfolio3.html">- Portfolio 3 col</option>
                <option value="portfolio4.html">- Portfolio 4 col</option>
                <option value="portfolio-single.html">- Portfolio single</option>

                <option value="">Blog</option>
                <option value="blog.html">- Blog sidebar right</option>
                <option value="blog-left.html">- Blog sidebar left</option>
                <option value="blog-single.html">- Blog single</option>

                <option value="">Contact</option>
                <option value="contact.html">- Contact page</option>
            </select> <!-- responsive navigation end -->

        </section><!-- nav container end -->

As you can see on the preview and here in the code, first level menu item has an icon attached. The menu icon is placed in css file "color-style".css. To change the icon, first make a change in the image folder (the folder of color style you are using). After that simply make changes in your css files.

To add second level sub menu, you will have to insert new unordered list inside of a list item that should have sub menu. you can see the example in the code presented above.

Main Navigation is fully based on CSS and uses jQuery only for sliding animation, which means that the menu will work perfectly even if a user has Javascript turned off. Function for animation of the menu is placed in include.js file in "js" folder. To use menu on all of your pages you must call this Javascript file in the tag of your HTML files. You don't need do change anything in this file. You can see code of the function below:

        /* ================ MAIN NAVIGATION ================ */

        function piMainmenu(){
            $(" #nav ul ").css({
                display: "none"
            }); // Opera Fix
            $(" #nav li").hover(function(){
                $(this).find('ul:first').css({
                    visibility: "visible",
                    display: "none"
                }).slideDown(250);
            },function(){
                $(this).find('ul:first').css({
                    visibility: "hidden"
                });
            });
        }

        function piSelectMenu(){
            $('#nav-responsive').on('change', function() {
                window.location = $(this).val();
            });
        }

### Responsive Navigation

Responsive navigation should always be present in all of your pages below main navigation (nav section). It's display property is set to none on standard screen resolutions. When resolution changes it becomes visible, and main navigation becomes invisible. Responsive navigation is in short terms "select menu", where every option is one link to HTML page. All you have to do is to make the same structure as the main nav, except you'll be putting link to your page inside the <option> tags. You can see an example in code above that presents HTML structure of the main navigation.

### Home Pages Customization

In this section we will explain how to customize home pages, starting from customizing the slider.

#### Customizing the slider

As noted before, this theme is using "Anything slider". If you'd like you can read more about it here. This slider has a lot of features. It's structure is shown below.

        <!-- slider start -->
        <article id="anything-slider">
            <section id="slider-container">
                <ul id="slides">
                    <li class="panel1">
                        <section class="slide-elements">
                            <div class="slide-img-container no-shadow right">
                                <img src="img/slider/imac.png" alt="imac" class="imac">
                                <img src="img/slider/ipad.png" alt="ipad" class="ipad">
                                <img src="img/slider/iphone.png" alt="iphone" class="iphone">
                            </div>
                            <div class="title">
                                <h1>The Great <span class="in-color">Fullwidth Slider</span></h1>
                                <h2>Cool & Clear Presentation</h2>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Cras ut venenatis massa. Nam a neque et nisi eleifend interdum ac
                            sed leo. Ut vitae lacus risus. Quisque varius fermentum
                            neque</p>
                            <div class="buttons">
                                <div class="btn">
                                    <a href="#">Buy now!</a>
                                </div>
                                <span>(or)</span>
                                <div class="btn-black">
                                    <a href="#">Contact us!</a>
                                </div>
                            </div>

                        </section>
                    </li>
                    <li class="panel2">
                        <section class="slide-elements">
                            <div class="slide-img-container right border">
                                <img src="img/slider/slide-2.jpg" alt="Slider Image 2">
                                <div class="slider-img-shadow"></div>
                            </div>
                            <div class="title">
                                <h1><span class="in-color">Lorem Ipsum</span> dolor sit amet</h1>
                                <h2>Cool & Clear Presentation</h2>
                            </div>
                            <p>Lorem ipsum dolor slo onsec  tueraliquet Morbi nec In
                            Curabitur lreaoreet nisl lorem in pellente pellente eget.
                            Lorem ipsum dolor slo onsec Vivamus.</p>
                            <div class="buttons">
                                <div class="btn">
                                    <a href="#">Buy now!</a>
                                </div>

                            </div>
                        </section>
                    </li>
                    <li class="panel3">
                        <section class="slide-elements">
                            <div class="slide-img-container left border">
                                <img src="img/slider/slide-2.jpg" alt="Slider Image 2">
                                <div class="slider-img-shadow"></div>
                            </div>
                            <div class="blockquote">
                                <blockquote>Life is conversational. Web design
                                should be the same way. On the web, you’re
                                talking to someone you’ve probably never met –
                                so it’s important to be clear and precise. Thus,
                                well structured navigation and content organization goes
                                hand in hand with having a good conversation.</blockquote>
                                <p>
                                - <a href='http://quotesondesign.com/chikezie-ejiasi/'>
                                Chikezie Ejiasi</a>
                                </p>
                            </div>

                        </section>
                    </li>
                </ul>
            </section>
        </article><!-- slider end -->

If you want to add new image within the slider you should create new list item element "li" in the unordered list tag "ul". Best way to do this is to copy existing list item element and change it in the way you want. All content you want to show in slide of the slider should be placed in div with class "slide-elements". In that way slider will recognize all elements. Image should be placed in the div with class "slide-img-container". You are free to add any tag you want with any content you want and it will be animated by the slider.

As you can see on the preview, image can be floated left or right. If you want your image to be placed right, simply add additional class "right". If you want for your image to be placed left, add additional class "left". Also there is a possibility that image have white border. To accomplish that add class border. Image shadow will be added automatically, so if you do not want shadow on your images, simply add class "no-shadow".

##### Slider animation

Anything slider has few options for animating slider. These options are very simple and you can see how it look in the code below.

        $('#slides') // Using FX base effects
        .anythingSlider({
            resizeContents      : true,
            expand              : true,
            buildArrows         : true,
            buildNavigation     : false,
            buildStartStop      : false,
            autoPlay            : false,
            delay: 5000
        })
        .anythingSliderFx({
            inFx: {
                '.panel1 .slide-img-container'  : { left: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel1 .title'  : { right: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel1 p'  : { right: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel1 .buttons'  : { right: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel2 .slide-img-container'  : { top: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel2 .title'  : { top: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel2 .buttons'  : { top: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel2 p'  : { top: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel3 blockquote'  : { top: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' },
                '.panel3 p'  : { top: 0, opacity: 1, duration: 400,
                easing: 'easeOutCirc' }
            },
            outFx: {
                '.panel1 .slide-img-container'  : { left: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel1 .title'  : { right: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel1 p'  : { right: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel1 .buttons'  : { right: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel2 .slide-img-container'  : { top: 0, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel2 .title'  : { top: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel2 .buttons'  : { top: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel2 p'  : { top: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel3 blockquote'  : { top: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' },
                '.panel3 p'  : { top: -400, opacity: 0, duration: 200,
                easing: 'easeOutCirc' }
            }
        });

Desired animation are defined in the initialization code of the Anything slider. That code is show above. Animation for one element has four options. You can see that if we want to animate image in the slider we will first write it's class, after that colon and that desired options. These are called based FX definitions: '.selector' : [ 'effect(s)', 'size', 'time', 'easing' ] 'size', 'time' and 'easing' are optional parameters, but must be kept in order if added.

If you want to animate image you should first write desired effect which can be found in Official slider website. Effect used in Pocket are "top" and "right". That means that some of elements will fly in from top or right side. Second parameter is size which defines where element should be placed before it fly in. Third parameter defines animation duration. Fourth parameter defines "easing" animation. You can find all possible animation in the Official easing plugin website.

Slider has some predefined option which can be change if that's needed. At the end of index page you can find these options. These options are not recommended to change except autoplay which are used to start automatic animation of slides and delay which can be changed if we want to increase or decrease time of visibility of each slide.

###### Important

For slider to work you must include following files on your home page:

JavaScript files

- jquery-1.7.2.js
- jquery.anythingslider.fx.min.js
- jquery.anythingslider.min.js

CSS files:

- basic.css - must be included in all of your pages
- style.css - must be included in all of your pages
- "color-style".css - color style that you are using
- anythingslider.css - style for Anything slider

Also don't forget to call the slider and it's animations at the bottom of the body on your home page, as shown in the code above.

Now we'll proceed with explaining how to customize Home page version 1, in your files that is index.html file. You can open it for more easy understanding.

##### content wrappers

So what do we have on this page? We have three separated content wrappers. First one, has border and is short, so we will have short shadow on it. Second one has no border nor shadow, and third has no border, but has shadow. So how to accomplish this?

As noted before, first content wrapper will have classes "content-wrapper", "multiple" and "short-shadow". This will give him top border, short shadow and bottom margin.

Second content wrapper will have classes "content-wrapper", "no-border", "no-shadow" and multiple. This will remove the top colored border and add light grey border of one px, and remove the shadow. Also this will add bottom margin to it.

Third content wrapper doesn't have border on the top, but has normal shadow and it is last on the page so it is attached to the footer. He will have class "content-wrapper" and "no-border". He will also have normal long shadow, which is not so visible because the content is very short, but will be visible on other pages.

You can use any of this content wrappers you want. This is just for showcasing all the possibilities.

##### Entry note

So, the first thing in the contact wrapper is the entry note. It is really easy to customize. here is it's structure.

        <article class="grid_12 entry-note">
            <h1>Subscribe to <span class="text-color">Newsletter </span>for Free</h1>
            <p>
                Lorem ipsum dolor slo Vivamus, please contact us for
                everything you need.
            </p>

            <div class="btn">
                <a href="#">Sign Up</a>
            </div>
        </article>

Entry note has that colored icon on the top which is added through css. If you want to remove it simply go to your color-style.css file and edit it there. To change the text of the note simply change the text inside "h1" tag - this is title, and text inside "p" tags - this is subtitle. As you can see in the "h1" tag there is a span with class "text-color". It will color the text in the color of the style you are using. This note can have a button or do not. So if you do not want button, simply remove this div with class "btn". To change the text of the button, edit text in the "a" tag.

CSS styling for the entry note is placed in two css files - color-style.css (color that you are using), under line 114, and main css file "style.css" under line 684. if you want to change it's styling you can do it there.

##### DIVIDER

After the note there is a divider, which is used on several pages. To add a divider, you must assign the class of the column you want to use it in and class "divider". On home page example it has class "grid_12" which means it will be full width.

##### SERVICES

There are two styles for services you can use. One is presented on the home page version 1 and we'll explain now how to edit that. The second is presented in the home page 2, and we'll talk about it later.

Services are wrapped in "ul". Every "li" presents one service item. It must have class of the column you are putting it into and class "service". Below is the code for one service item.

        <li class="grid_4 service">
            <a class="icon service-1">service</a>
            <h4>Responsive Theme</h4>
            <p>
                Lorem ipsum dolor slo onsec  tueraliquet Morbi nec In
                Curabitur lreaoreet nisl lorem in pellente pellente eget.
                Lorem ipsum dolor slo onsec Vivamus. Curabitur
            </p>
        </li>

The first "a" tag is used for service icon. As you can see it has class "icon", which defines icon position and size for all services items, and class "service-1", which is used for styling that specific icon. You can find these icons in main css file style.css under line 1472. You can change these icon there, but you will also need to make change in the img folder (there you need to replace those icons if you want).

To edit the heading of the service or it's text, simply replace the texts inside h4 and p tags.

##### team article

As you can see on teh index.html preview, there is an article containing team members description. At the top of it there is a title that has border and some link aside. How to accomplish that? here is the HTML structure.

        <!-- divider with title start -->
        <section class="divider-with-title clearfix">

            <div class="title">
                <h4>Our Great Team</h4>
            </div>

            <a href="about.html" class="title-link">Read more</a>
        </section><!-- divider with title end -->

So to use that kind of title simply use the HTML structure presented above. You can edit the title text inside "h4" tags. Also, if you don't want the link you can simply remove it.

After the title there is one fourth columns containing team members description. To make this, create a div or section or article with following classes: grid_3 (for one-fourth column), team and home. Note that this grid_3 is placed in a larger div with class grid_9, so it will also have class "alpha" (the first nested child). Last team member div will have class "omega" (last nested child).

So, here is the HTML structure of that memebr article.

        <article class="grid_3 alpha team home">
            <img src="img/about/home-team-1.jpg" alt="team" />

            <h6>Markus Smith</h6>
            <p class="position">Creative Designer and CEO</p>

            <div class="team-description">
                <p>
                    Fugiat dapibus, tellus ac cursus commodo, mauesris
                    condime ntum nibut fermentum mas justo sitters.
                </p>
            </div>
        </article>

Images fo team members are placed in about folder, inside img folder, so you can edit it there. In the code above you can see how to simply change the text of this article. CSS styling for team members is placed in main css file style.css under line 713.

##### SMALL ACCORDION

As you can see on the preview there is small accordion with title why choose us. To use accordion you need to use following HTML structure.

        <section class="accordion">
            <div class="accordion-content-wrapp">
                <div class="title active"><a href="#">Our Support Staff</a></div>
                <div class="content">
                    <p>
                        Lorem ipsum dolor slo onsec  tueraliquet
                        Morbi nec In Curabitur lreaoreet nisl lorem
                        in pellente pellente eget. Lorem ipsum
                    </p>
                </div>
            </div>

            <div class="accordion-content-wrapp">
                <div class="title"><a href="#">Responsive Theme</a></div>
                <div class="content">
                    <p>
                        Lorem ipsum dolor slo onsec  tueraliquet
                        Morbi nec In Curabitur lreaoreet nisl lorem
                        in pellente pellente eget. Lorem ipsum
                    </p>
                </div>
            </div>

            <div class="accordion-content-wrapp">
                <div class="title"><a href="#">Worldwide Support</a></div>
                <div class="content">
                    <p>
                        Lorem ipsum dolor slo onsec  tueraliquet
                        Morbi nec In Curabitur lreaoreet nisl lorem
                        in pellente pellente eget. Lorem ipsum
                    </p>
                </div>
            </div>
        </section><!-- accordion end -->

You can edit these titles in any way you want, same as the content text. note that first accordion title has class "active". This means that this content will be opened when the page is loaded. You can put this class on second or third title too. CSS for styling accordion content is placed inside "basic.css" file. Icons for accordion are placed in folder that matches the color style you are using. According to that it's css styling is placed in "color-style".css that you are using. You can edit everything there.

##### PRODUCT CAROUSEL

At the bottom there is product carousel that has slider for every product inside of it. Product carousel is accomplished with jcarouFredsel plugin. To make this kind of carousel it is important to use following HTML structure:

    <div class="grid_12 jcarousellite product-carousel clearfix">
            <!-- divider with title start -->
            <section class="divider-with-title carousel clearfix">

                <div class="title">
                    <h4>Our Products</h4>
                </div>

                <ul class="carousel-nav">
                    <li>
                        <a class="carousel-nav-1 prev" href="#"></a>
                    </li>

                    <li>
                        <a class="carousel-nav-1 next" href="#"></a>
                    </li>
                </ul>

            </section><!-- divider with title end -->

            <ul id="carousel-1" class="carousel-li">
                <li>
                    <div class="product-slider-wrap">
                        <div id="slider-1" class="nivoSlider product-slider">
                            <img src="img/home-products/slider-1.jpg" alt="blog" />
                            <img src="img/home-products/slider-2.jpg" alt="blog" />
                            <img src="img/home-products/slider-3.jpg" alt="blog" />
                        </div>

                        <div class="slider-shadow"></div>
                    </div>

                    <div class="product-description">
                        <h5>Fancy product with slider</h5>
                        <span class="product-date">
                            Date: June 28, 2012
                        </span>

                        <p>
                            Lorem ipsum dolor slo onsec  tueraliquet
                            Morbi nec In Curabitur lreaoreet nisl lorem.
                            Directed Smile Lorem ipsum dolor slo onsec
                            tueraliquet Morbi nec In Curabitur lreaoreet nisl lorem.
                        </p>

                        <p>
                            Directed Smile Lorem ipsum dolor slo onsec
                            tueraliquet Morbi nec In CurabiturLorem
                            ipsum dolor slo onsec  tueraliquet Morbi
                            nec In Curabitur lreaoreet nisl lorem.
                            Directed Smile Lorem ipsum dolor slo onsec
                            tueraliquet Morbi nec In Curabitur lreaoreet
                            nisl lorem.
                        </p>
                    </div>
                </li>

                ....
                </ul>
        </div>

title of the carousel can be changed inside "h4" tags. the images used for products are placed in "home-products" folder inside img folder. So when replacing your images, first do it there. Note that the images should have the same width and height, because then you won't have to edit anything in the css files. You can see that every product (list item) has slider inside of it. FOr that purpose NivoSlider plugin is used.

CSS styling for product carousel and Nivo Slider inside of it is placed in main css file style.css under line 722, so if you need to change anything that's the place to do that.

###### important

You must include these .js and css files for product carousel to work:

- jquery.carouFredSel-6.0.0-packed.js
- jquery.nivo.slider.js
- jquery-1.7.2.js
- nivo-slider

You will also need to include the call for the carousel on the bottom of the body on your page. here is the code.

        $('#carousel-1').carouFredSel({
            items: 1,
            prev: '.carousel-nav-1.prev',
            next: '.carousel-nav-1.next',
            auto: false,
            scroll: 1
        });

##### CLIENT CAROUSEL

There is one more carousel presented on the home page, and that is client carousel. It's HTML structure is presented below.

    <div class="container_12 client-carousel clearfix">
        <ul id="carousel-2" class="grid_12 carousel-li">
            <li>
                <div class="client-1">
                    <img src="img/about/client-1.png" alt="client" />
                </div>

                <div class="client-1-hover">
                    <img src="img/about/client-1-hover.png" alt="client" />
                </div>
            </li>

            <li>
                <div class="client-2">
                    <img src="img/about/client-2.png" alt="client" />
                </div>

                <div class="client-2-hover">
                    <img src="img/about/client-2-hover.png" alt="client" />
                </div>
            </li>

            <li>
                <div class="client-3">
                    <img src="img/about/client-3.png" alt="client" />
                </div>

                <div class="client-3-hover">
                    <img src="img/about/client-3-hover.png" alt="client" />
                </div>
            </li>

            <li>
                <div class="client-4">
                    <img src="img/about/client-4.png" alt="client" />
                </div>

                <div class="client-4-hover">
                    <img src="img/about/client-4-hover.png" alt="client" />
                </div>
            </li>

            <li>
                <div class="client-5">
                    <img src="img/about/client-5.png" alt="client" />
                </div>

                <div class="client-5-hover">
                    <img src="img/about/client-5-hover.png" alt="client" />
                </div>
            </li>
        </ul>

        <a class="carousel-nav-2 prev" href="#"></a>

        <a class="carousel-nav-2 next" href="#"></a>
    </div>

Because there is animation from turning grey image to colored, you'll need to include two images. First one is grayscale and second one (placed in div client-number-hover) is actually colored image. You can change these images inside about folder in "img" folder. You should kept the names the same, so you won't need to edit it in the css files.

For this carousel to work you will also need to include the call for it in the bottom of the body of your document, like this:

        $('#carousel-2').carouFredSel({
            items: 4,
            prev: '.carousel-nav-2.prev',
            next: '.carousel-nav-2.next',
            auto: false,
            scroll: 1
        });

#### customizing home page second version

So now we'll see how to customize second version of the home page. This file is named "home2.html". You can also open this file for more easy understanding.

At the top of the page there is Anything slider and note, which was already explained, so there's no need to do that. So we'll start with second option for presenting services.

##### home page 2 services

Every service is placed in a grid with class "service-home". You can see that every service icon has animation when hovered. Colored circle appears. Because of that every service icon has small colored circle they are placed in folder that matches the color style used in the img folder. So if you want to change the icons for these services, first replace those images inside.

So how to create these services? Here is the HTML structure you should use.

        <li class="grid_3 service-home">
            <div class="icon-container">
                <div class="service-mask"></div>
                <a class="icon service-1">service</a>
            </div>

            <a href="services.html"><h4>Responsive Theme</h4></a>

            <p>
                Lorem ipsum dolor slo onsec  tueraliquet Morbi nec In
                Curabitur lreaoreet nisl lorem in pellente pellente eget.
            </p>

            <a href="services.html" class="read-more">Read more</a>
        </li>

As you can see every service is one list item. It contains div that holds the icon named "icon-container". inside of it there is a div with class "service-mask". This is that colored circle that appears on hover. Logic for the service icon is the same as for the previously explained services on home page 1.

To replace the heading or the text of these services, simply change it in the "h4" and "p" tag respectively. If you'd like to edit icons for these services, you can do that in the "color-style".css file that matches the color style you are using (this is for icons). Size and all other properties can be changed in main css file style.css beginning at line 811.

##### carousel note

The second thing we have here is carousel note. To make a carousel note you need to make the following HTML structure.

        <div class="grid_12 jcarousellite carousel-note">

            <div class="carousel">
                <ul class="carousel-nav">
                    <li>
                        <a class="carousel-1-nav prev" href="#"></a>
                    </li>

                    <li>
                        <a class="carousel-1-nav next" href="#"></a>
                    </li>
                </ul>
            </div>

            <ul id="carousel-1" class="carousel-li">
                <li>
                    <div class="note-text">
                        <div class="note-title">
                            <h4>Welcome! We are Pocket. <span
                            class="text-color">You can follows us clicking
                            the button.</span></h4>
                        </div>
                        <p>
                            Lorem ipsum dolor slo Vivamus, curabus iretundus als,
                            please contact us for everything you need.
                        </p>
                    </div>

                    <div class="btn">
                        <a href="about.html">Read more</a>
                    </div>

                    <div class="clearfix"></div>
                </li>

                <li>
                    <div class="note-text">
                        <div class="note-title">
                            <h4>This is a very cool note! <span
                            class="text-color">You can define auto sliding
                            too.</span></h4>
                        </div>
                        <p>
                            Lorem ipsum dolor slo Vivamus, curabus iretundus als,
                            lorem lpsum dolor sit amet consequista.
                        </p>
                    </div>

                    <div class="btn">
                        <a href="about.html">Read more</a>
                    </div>

                    <div class="clearfix"></div>
                </li>

                <li>
                    <div class="note-text">
                        <div class="note-title">
                            <h4>Excelent place to present your thoughts! <
                            span class="text-color">Or maybe some very important
                            notes.</span></h4>
                        </div>
                        <p>
                            Lorem ipsum dolor slo Vivamus, curabus iretundus als,
                            lorem lpsum dolor sit amet consequista.
                        </p>
                    </div>

                    <div class="btn">
                        <a href="about.html">Read more</a>
                    </div>

                    <div class="clearfix"></div>
                </li>
            </ul>
        </div>

As you can see every note that will be displaying is placed in a list item. Every list item has div with class "note-text" and button. You can put as many notes as you want.

You can change the note text inside p tags. The same is for the title. You can edit it inside "h4" tags. This carousel is also made with jcarouFredsel plugin, so you'll need to include it in your pages. Also do not forget to include the call for this plugin at the bottom of the body of your document. Here is the code for calling note carousel.

        $('#carousel-2').carouFredSel({
            items: 1,
            prev: '.carousel-2-nav.prev',
            next: '.carousel-2-nav.next',
            auto: false,
            scroll: 1
        });

If you like you can also include auto scrolling. This can be accomplished by inserting true to this label "auto". See code above. If yu would like to change this carousel it can be done in the main css file style.css beginning at line 990. The style for this carousel is made for full width column. So if you'd like to use it in another column you will just have to change the width of carousel-li item of that specific carousel.

##### Portfolio section

After the note we have latest portfolio section. The latest portfolio items are placed in a grid_8 (this is three-fourth column). So, one portfolio item is placed in one-third column. Because of that every portfolio item is placed in a parent div grid_8, first will have class "alpha", and the last will have class "omega".

To make this simply use following HTML structure. You can also put this portfolio items in one-fourth, one-third or one-half columns.

        <article class="grid_4 alpha">
            <figure class="portfolio">
                <div class="img-hover">
                    <a class="portfolio-image" href="portfolio3.html">
                        <img src="img/portfolio/3col/portfolio1.jpg" alt="portfolio" width="300"/>
                    </a>

                    <div class="mask">
                        <a class="thumb info"
                           title=""
                           href="img/portfolio/3col/portfolio1.jpg"
                           data-gal="prettyPhoto[pp_gallery]">
                        </a>
                    </div>

                </div>

                <figcaption>
                    <div class="caption-title">
                        <p class="title">
                            Simply Amazing
                        </p>
                        <p class="subtitle">
                            Photography
                        </p>
                    </div>
                </figcaption>
            </figure>
        </article>

So as you can see, portfolio item is placed in a figure with class "portfolio". Do not forget to use this class when creating portfolio item. inside of it there is a div with class "img-hover". this div contains portfolio image (placed in a tag with class "portfolio-image") and div mask. Div with class mask is used for displaying animation on hover. As you can see in the code above we have class "thumb-info". This class has small magnifier icon as background. When you click on that icon, lightbox with bigger image will be displayed.

So how to use all of these informations? Well, first to make the portfolio look like in the preview, you will have to follow some simple steps.

1. Make HTML structure as shown above
2. Replace the images inside img/portfolio/column_you_are_using folder.
3. You can also make another folder that will contain full size images (that will be displayed in a lightbox).
4. When you replaced your images go to this HTML structure and replace the paths to your images
5. For image that will be displayed change the path inside a tag with class "portfolio-image"
6. For image that will be displayed in a lightbox change the path inside "href" tag (inside div with class "mask").

So, images are now ready. now you can replace the title of the portfolio item, inside p tag with class "title". The same way you can change subtitle, by editing the text inside p tag with class "subtitle".

###### important

You must include these files for portfolio:

- portfolio.js
- include.js
- jquery-1.7.2.js
- jquery.prettyPhoto.js
- prettyPhoto

##### testimonial scroll

After the portfolio there is testimonial scroll. You can display any number of testimonials you want. The important thing is that you should use following HTML structure.

        <article class="grid_4 jcarousellite testimonial-carousel clearfix">

            <section class="divider-with-title carousel clearfix">

                <div class="title">
                    <h4>Testimonials</h4>
                </div>

                <ul class="carousel-nav">
                    <li>
                        <a class="carousel-2-nav prev" href="#"></a>
                    </li>

                    <li>
                        <a class="carousel-2-nav next" href="#"></a>
                    </li>
                </ul>
            </section><!-- divider with title end -->

            <ul id="carousel-2" class="carousel-li">
                <li>
                    <div class="testimonial-text-container">
                        <p>
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                        </p>
                    </div>

                    <a href="#" class="testimonial-author">Jane Doe,
                    <span class="text-color">Company CEO</span></a>
                </li>

                <li>
                    <div class="testimonial-text-container">
                        <p>
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                        </p>

                    </div>

                    <a href="#" class="testimonial-author">Elton Doe,
                    <span class="text-color">Company CEO</span></a>
                </li>

                <li>
                    <div class="testimonial-text-container">
                        <p>
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                            Lorem lipsum, condimentum ultrices consequat
                            vidis vehicula mauris lipsum adipiscing eneane.
                            Lorem lipsum, condimentum ultrices consequat.
                        </p>
                    </div>

                    <a href="#" class="testimonial-author">Elton Doe,
                    <span class="text-color">Company CEO</span></a>
                </li>
            </ul>
        </article>

For testimonial scroll is also used jcarouFredsel plugin, so it functions pretty similar to other carousels already explained. As you can see, every testimonial is one list item that has div with text. Here you can insert the text of your testimonial. The second div is a tag with class "testimonial-author". here you can insert the author of that testimonial.

###### important

Do not forget to include jcarouFredsel.js file in the ehad of your document. Also don't forget to include the call for the plugin at the bottom of the body of your page. that code is presented bellow. You can simply copy it.

        $('#carousel-2').carouFredSel({
            items: 1,
            prev: '.carousel-2-nav.prev',
            next: '.carousel-2-nav.next',
            auto: false,
            scroll: 1
        });

You can edit the styling of the testimonial scroll inside the main css file stylle.css starting at line 882. The color style of the testimonial is placed in the "color-style".css you are using.

### About Page Customization

In this section we will explain how to customize the About page.

Every page, except of the home pages has "page title2 at the top. This title is placed immediately after the header-wrapper. You can see it's HTML structure below.

        <section class="page-title">
            <div class="title">
                <h1>About Us</h1>
                <span class="subtitle">
                    We love What We Do
                </span>
            </div>
        </section>

Section "page-title" has full width. insie of it is div with class "title" and it has the same width as the content-wrapper, that is 1005px. You can edit the title inside "h1" tags. Subtitle can be edited inside span with class "subtitle". The subtitle color will be the same as the color style you are using. You can change it's color in "color-style".css file. The size, width and all other properties of a page title can be edited in main css file, style.css beginning at the line 595.

##### article and slider

As you can see in the demo, there is an article and a slider at the top of the content. here is the HTML structure.

        <section class="grid_12 section-title">
                <h3>Something About Us</h3>
            </section>

            <article class="grid_8">
                <p>
                    Fugiat dapibus, tellus ac cursus commodo, mauesris con,
                    ntum nibh, ut fermentum mas justo sitters amet risus.
                    Cras mattis cosi sectetut amet fermens etrsaters dimets.
                    Fugiat dapibus, tellus ac cursus commodo, mauesris con,
                    ntum nibh, ut fermentum mas justo sitters amet risus.
                    Cras mattis cosi sectetut amet fermens etrsaters dimets.
                    Fugiat dapibus, tellus ac cursus commodo, mauesris con,
                    ntum nibh, ut fermentum mas justo sitters amet risus.
                    Cras mattis cosi sectetut amet fermens etrsaters dimets.
                </p>
                <p>
                    Fugiat dapibus, tellus ac cursus commodo, mauesris con,
                    ntum nibh, ut fermentum mas justo sitters amet risus.
                    Cras mattis cosi sectetut amet fermens etrsaters dimets.
                </p>

                <ul class="check-list">
                    <li>Fugiat dapibus, tellus ac cursus commodo, mauesris
                    con,ntum nibh, ut fermentum .</li>
                    <li>Cras mattis cosi sectetut amet fermens etrsaters
                    dimets. Fugiat dapibus</li>
                    <li>Fugiat dapibus, tellus ac cursus commodo, mauesris
                    con,ntum nibh, ut fermentum .</li>
                    <li>Cras mattis cosi sectetut amet fermens etrsaters
                    dimets. Fugiat dapibus</li>
                </ul>
            </article>

            <article class="grid_4 one-third-slider">
                <div id="slider-1" class="nivoSlider">
                    <img src="img/about/slider1.jpg" alt="about" />
                    <img src="img/about/slider2.jpg" alt="about" />
                    <img src="img/about/slider3.jpg" alt="about" />
                </div>

                <div class="one-third-slider-shadow"></div>
            </article>

At the top of the article there is a section with class "section-title". Section title is used for styling headings that has three line border. You can use this section title on any page you want and in any column you want.

You can edit the text inside the article simply by replacing it inside "p" tags. After the text there is a list with colored check-marks. To make that kind of list, simply create an unoredered list with class "check-list".

On the right side of the article there is a slider. You can see the code above. This slider is made with Nivo Slider plugin, so you will need to include it's .js file and it's css file in the head of your document. note that this slider is placed in a grid with class 2one-third-slider". That means that it is styled for one-third column. If you want to use it in some other column you'll have to do some changes in the main css file "style.css".

So how to customize the slider? First of all, change the images. Images are placed in about folder, inside of the img folder. You can also place theme anywhere you want. After replacing your images, simply change the path to them in your HTML file inside this "img" tags (inside div with class "nivoSlider"). You will also need to include the call for the slider plugin at the bottom of the body. here is the code for that.

        $(window).load(function() {
            $('#slider-1').nivoSlider({
                directionNav: false
            });
        });

So what is else here on this page? There is a carousel note and client carousel which we already explained, so there's no need to do that. But there are also member columns. Now, let's see it's HTML structure first.

        <div class="grid_4 team">
            <img src="img/about/team1.jpg" alt="team" />

            <h6>John Smith</h6>
            <p class="position">Creative Designer and CEO</p>

            <div class="team-description">
                <p>
                    Fugiat dapibus, tellus ac cursus commodo, mauesris
                    condime ntum nibut fermentum mas justo sitters.
                </p>
            </div>
            <ul class="team-social">
                <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="skype">
                    <a href="#">skype</a>
                </li>

                <li class="twitter">
                    <a href="#">twitter</a>
                </li>

                <li class="linkedin">
                    <a href="#">linkedin</a>
                </li>

                <li class="behance">
                    <a href="#">behance</a>
                </li>
            </ul>
        </div>

So as you can see every team member is placed in a one-third grid. it has image, name of the member, it's place in company, some description and social bookmarks.

So how to customize this? First of all member images. They are placed inside about folder (inside img folder). After that change the path in your HTML file to that images. You can edit the name of the team member inside "h6" tags. You can change it's position in company inside a p tag with class "position". Description can be changed in div with class "tem-description".

Below the description you can see available social icons for every team member. You can edit these icons in image folder that matches the color style you are using. Additional styling of a team member column can be done in main css file "style.css", beginning at line 1093.

### Services Customization

In this section we will explain how to customize services page.

As you can see in the preview, we have page title, one-third slider, some articles and list items with check mark that are explained before. We also have client carousel that is the same as on the home page.

You can see that the services presented has the same style as ones on the home page version 1. So you can easily follow the steps explained in that section. But here is one thing that we haven't already explained. An that is this one third article named "Services overvoew". So how to customize that?

It's quite simple actually. This is just a simple article with a class that defines the column width. Inside of it there is a span with class "intro" - this is the italic text you can see in the preview. And below is simple "p" tag with some text. You can see it's HTML structure below:

        <article class="grid_4">
            <h4>Services overview</h4>

            <span class="intro">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Fusce et elit orci. Vivamus quis
            </span>

            <p>
                Lorem ipsum dolor slo onsec  tueraliquet Morbi nec In
                Curabitur lreaoreet nisl lorem in pellente pellente eget.
                Lorem ipsum dolor slo onsec Vivamus. Curabitur
            </p>
        </article>

So to edit this italic text, simply edit the text inside span with class 2intro". Text of the service overview can e edited inside "p" tags. You can put this "overview text" in any column you want. Same is for services columns.

### Pricing Tables Customization

In this section we will explain how to customize pricing tables page.

there are two versions of pricing tables available. First one has label column aside which is presenting the service that is offered. The second one is simple column style. So, let's start with first version.

here is the HTML structure.

        <article class="grid_12 pricing-style-1">
            <div class="pricing-table-col labels">
                <ul>
                    <li class="head"></li>
                    <li>Monthly payments</li>
                    <li>Bonus Themes</li>
                    <li>Our Themes</li>
                    <li>Our Extenshions</li>
                    <li>New Themes</li>
                    <li>Support Access</li>
                    <li>Theme Update</li>
                    <li>Domain Number</li>
                </ul>
            </div>

            <div class="pricing-table-col">
                <ul>
                    <li class="head">
                        <h5>basic plan</h5>
                        <span class="price">$20</span>
                        <span>per month</span>
                    </li>
                    <li>
                        <span class="label">Monthly payments</span>
                        Not available
                    </li>
                    <li>
                        <span class="label">Bonus Themes</span>
                        1 Theme
                    </li>
                    <li>
                        <span class="label">Our Themes</span>
                        1 Theme
                    </li>
                    <li class="pricing-check">
                        <span class="label">Our Extensions</span>
                    </li>
                    <li>
                        <span class="label">New Themes</span>
                        Not available
                    </li>
                    <li>
                        <span class="label">Support Access</span>
                        -
                    </li>
                    <li>
                        <span class="label">Theme Update</span>
                        Not available
                    </li>
                    <li>
                        <span class="label">Domain Number</span>
                        1
                    </li>
                    <li class="pricing-footer">
                        <div class="btn-black">
                            <a href="#">Sign up</a>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="pricing-table-col">
                <ul>
                    <li class="head">
                        <h5>standard plan</h5>
                        <span class="price">$40</span>
                        <span>per month</span>
                    </li>
                    <li>
                        <span class="label">Monthly payments</span>
                        Not available
                    </li>
                    <li>
                        <span class="label">Bonus Themes</span>
                        1 Theme
                    </li>
                    <li class="pricing-check">
                        <span class="label">Our Themes</span>
                    </li>
                    <li class="pricing-check">
                        <span class="label">Our Extensions</span>
                    </li>
                    <li>
                        <span class="label">New Themes</span>
                        -
                    </li>
                    <li class="pricing-check">
                        <span class="label">Support Access</span>
                    </li>
                    <li>
                        <span class="label">Theme Update</span>
                        Unlimited
                    </li>
                    <li>
                         <span class="label">Domain Number</span>
                        Unlimited
                    </li>
                    <li class="pricing-footer">
                        <div class="btn-black">
                            <a href="#">Sign up</a>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="pricing-table-col selected">
                <ul>
                    <li class="head">
                        <h5>premium plan</h5>
                        <span class="price">$60</span>
                        <span>per month</span>
                    </li>
                    <li>
                        <span class="label">Monthly payments</span>
                        Not available
                    </li>
                    <li>
                        <span class="label">Bonus Themes</span>
                        Unlimited Themes
                    </li>
                    <li>
                        <span class="label">Our Themes</span>
                        5+
                    </li>
                    <li class="pricing-check">
                        <span class="label">Our Extensions</span>
                    </li>
                    <li>
                        <span class="label">New Themes</span>
                        6+ New Themes
                    </li>
                    <li>
                        <span class="label">Support Access</span>
                        Unlimited
                    </li>
                    <li class="pricing-check">
                        <span class="label">Theme Update</span>
                    </li>
                    <li>
                        <span class="label">Domain Number</span>
                        Unlimited
                    </li>
                    <li class="pricing-footer">
                        <div class="btn">
                            <a href="#">Sign up</a>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="pricing-table-col">
                <ul>
                    <li class="head">
                        <h5>business plan</h5>
                        <span class="price">$80</span>
                        <span>per month</span>
                    </li>
                    <li>
                        <span class="label">Monthly payments</span>
                        Unlimited
                    </li>
                    <li>
                        <span class="label">Bonus Themes</span>
                        Unlimited
                    </li>
                    <li class="pricing-check">
                        <span class="label">Our Themes</span>
                    </li>
                    <li class="pricing-check">
                        <span class="label">Our Extensions</span>
                    </li>
                    <li>
                        <span class="label">New Themes</span>
                        Unlimited
                    </li>
                    <li class="pricing-check">
                        <span class="label">Support Access</span>
                    </li>
                    <li>
                        <span class="label">Theme Update</span>
                        Unlimited
                    </li>
                    <li>
                        <span class="label">Domain Number</span>
                        Unlimited
                    </li>
                    <li class="pricing-footer">
                        <div class="btn-black">
                            <a href="#">Sign up</a>
                        </div>
                    </li>
                </ul>
            </div>
        </article>

As you can see, the first column has class "pricing-table-col2 and class "labels". Inside this list items you can put your services you offer for the packages. You can add as many rows as you want.

This styling is done for five columns. to edit that, to put less or more columns, go to your css file "stye.css" and replace the percentage that is defining the width of the column. Styling for pricing tables starts at line 1537.

After this labels column starts actual pricing tables. You can see code above. pricing table is actually a div with class pricing-table-col. Note that the table that is highlighted has class "selected". So to highlight a pricing table simply add this class to it.

Editing a table is the same as editing a simple table. So the first list item is head. there goes the name of the plan and the price. Second list item is first row. thrird list item is the second row and so on. As you can see, you can put text in this row, or a check makr. To use a chack mark, simply create a li with class "pricing-check". the color of the check mark is the same as the color style used.

Also in this list items (rows) you can see span with class "label". This span is only visible on the small resolutions, because the column with labels isn't. try to look at it on the mobile device for better understanding.

At the bottom of the pricing table there is a list item with class "pricing-footer". inside of it is placed a button. You can change this text and link inside "a" tag.

The second option for using pricing table is simple table. It has the same structure as the first version. the only difference is that the second version is wrapped in a div with class "pricing-style-2". You can edit this table the same way as version one. just when you use it, do not forget to add this class "pricing-style-2". You can also add as many columns you want. You will just need to change the column width (in percentage) in the main css file "style.css", beginning at line 1639.

### FAQ Page Customization

In this section we will explain how to customize FAQ page.

The structure of a FAQ page is actually really simple. This is a page that have a sidebar. It is important to note that every of your pages can have sidebar. here is how it's done.

The content of the page is placed in a grid_8 with class "content-sidebar-right". This means that this page will ahve sidebar that is positioned right. A page that has sidebar on the left will have content in grid_8 with class "content-sidebar-left".

Inside this grid there is accordion which has the same structure as one explained at the home page section. here is it's structure.

         <section class="accordion">

                        <div class="accordion-content-wrapp">
                            <div class="title"><a href="#">Lorem ipsum
                            dolor slo onsec  tueraliquet Morbi nec In dominium
                            slaves</a></div>
                            <div class="content">
                                <p>
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                </p>

                                <p>
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                </p>

                                <p>
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                </p>
                            </div>
                        </div>

                        <div class="accordion-content-wrapp">
                            <div class="title active"><a href="#">
                            Lorem ipsum dolor slo onsec  tueraliquet Morbi nec
                            In </a></div>
                            <div class="content">
                                <p>
                                    Sed non urna. Donec et ante. Phasellus eu ligula.
                                    Vestibulum sit amet purus. Vivamus hendrerit,
                                    dolor at aliquet laoreet, mauris turpis porttitor
                                    velit, faucibus interdum tellus libero ac justo.
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                </p>
                                <p>
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                    Mauris mauris ante, blandit et, ultrices a,
                                    suscipit eget, quam. Integer ut neque. Vivamus
                                    nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
                                </p>

                            </div>
                        </div>

                        ...
                </div>
        </section>

You can edit this content in the same way explained for accordion on home page version 1. just remember to include "include.js" file, where the accordion JavaScript is placed.

More about customizing the sidebar in "Customizing the sidebar2 section.

### 404 Page Customization

In this section we will explain how to customize 404 Page.

As pocket comes with six color styles, there are six 404 images for every color style. Those images are placed in a folder that matches the color style that you are using, inside the "img" folder. So if you want to change the image, there is a place to do that.

So, let's see the HTML structure of this page's content.

        <article class="grid_12">
            <div class="error-content-container clearfix">
                <section class="error-img-container clearfix">
                    <p>
                        <span class="star-mark">*</span>
                        Oops! Page not found...
                    </p>

                    <div class="error-img"></div>
                </section>

                <section class="search-area clearfix">
                    <p>The Page You Are Loking For Can Not Be Found</p>

                    <form class="error-search" action="#" method="get">
                        <input class="search-input" type="text" placeholder="Search website..." />
                        <input class="search-submit" type="submit" value="Submit search"/>
                    </form>
                </section>
            </div>

            <article class="error-page-text">
                <p>
                    Lid est laborum dolos rumes fustsirs sit untras. Et
                    harums ser quidem sit rerums facilis est dolores uni
                    nemis Lid est laborum dolos rumes fustsirs sit untras.
                    Et harums ser quidem sit rerums facilis est dolores
                    uni nemis . Lid est laborum dolos rumes fustsirs sit
                    untras. Et harums ser quidem sit rerums facilis est
                    dolores uni nemis Lid est laborum dolos rumes
                    fustsirs sit untras. Et harums ser quidem sit rerums
                    facilis est dolores uni nemis
                </p>
            </article>
        </article>

As you can see, all the content is placed inside grid_12. Inside of it there is a div with class "error-content-container ". It contains the image and search area. You can change the text or image here.

Below the image there is an text article. You can include this in your 404 page, but if you don't want it, you can simply remove it. You can edit his text inside "p" tag. Styling of 404 page is placed in style.css file beginning at line 1728. So if you want to change anything that's the place to do that.

### Portfolio Pages Customization

In this section we will explain how to customize portfolio pages.

There are three versions of Portfolio pages available:

- Portfolio 2 columns
- Portfolio 3 columns
- Portfolio 4 columns

Every of those pages has the same HTML structure, except of one thing and that is the class of the grid you are using. So what do you need to customize the portfolio pages? Well, those pages have quicksand plugin, so you will need to include it in the head of your document. Also they have prettyPhoto lightbox, as previously explained in "Customizing the home page" section.

We will present you here HTML structure for portfolio with two columns and explain how to customize it. The same rules can be applied to other versions.

here is the HTML Structure.

    <div class="container_12">

        <section class="grid_12 section-title">
            <h3>Awesome Projects</h3>

            <ul id="portfolio-filter">
                <li class="active"><a class="all" href="#">All</a>/</li>
                <li><a class="photography" href="#">Photography</a>/</li>
                <li><a class="webdesign" href="#">Web Design</a>/</li>
                <li><a class="graphicdesign" href="#">Graphic design</a>/</li>
                <li><a class="motiongraphics" href="#">Motion Graphics</a></li>
            </ul><!-- portfolio quicksand filter end -->
        </section>
    </div><!-- container_12 end -->

    <div class="container_12">
        <ul id="filter-item">

            <!-- portfolio item start -->
            <li data-id="id-1" class="grid_6" data-type="webdesign">
                <figure class="portfolio">
                    <div class="img-hover">
                        <a class="portfolio-image" href="portfolio2.html">
                            <img src="img/portfolio/2col/portfolio1.jpg"
                            alt="portfolio" width="460"/>
                        </a>

                        <div class="mask">
                            <a class="thumb info"
                               title=""
                               href="img/portfolio/2col/portfolio1.jpg"
                               data-gal="prettyPhoto[pp_gallery]">
                            </a>
                        </div>

                    </div>

                    <figcaption>
                        <div class="caption-title">
                            <p class="title">
                                Simply Amazing
                            </p>
                            <p class="subtitle">
                                Photography
                            </p>
                        </div>
                    </figcaption>
                </figure>
            </li><!-- portfolio item end -->

            <!-- portfolio item start -->
            <li data-id="id-2" class="grid_6" data-type="graphicdesign">
                <figure class="portfolio">
                    <div class="img-hover">
                        <a class="portfolio-image" href="portfolio2.html">
                            <img src="img/portfolio/2col/portfolio4.jpg"
                            alt="portfolio" width="460"/>
                        </a>

                        <div class="mask">
                            <a class="thumb info"
                               title=""
                               href="img/portfolio/2col/portfolio4.jpg"
                               data-gal="prettyPhoto[pp_gallery]">
                            </a>
                        </div>

                    </div>

                    <figcaption>
                        <div class="caption-title">
                            <p class="title">
                                Work by streetx222
                            </p>
                            <p class="subtitle">
                                Graphic design
                            </p>
                        </div>
                    </figcaption>
                </figure>
            </li><!-- portfolio item end -->
                                ...
         </ul>

         <ul class="pagination">

            <li class="active">
                <a href="#">1</a>
            </li>

            <li>
                <a href="#">2</a>
            </li>

            <li>
                <a href="#">3</a>
            </li>

            <li>
                <a href="#">4</a>
            </li>

            <li>
                <a href="#">5</a>
            </li>

            <!-- arrow left start -->
            <li class="arrow">
                <a href="#">»</a>
            </li><!-- arrow left end -->

        </ul><!-- pagination for portfolio page end -->
    </div>

So, at the top of the page we have section title that is holding the title and quicksand filters. One filter presents the portfolio category. You can change the category name by replacing the text inside those list items inside ul with class "portfolio-filter".

Every portfolio item is list item that needs to have data-id (1, 2, 3,...), class that defines it's width (as a column) and data-type that defines in which portfolio category it belongs. Here you need to change portfolio category name by editing data-type value of list item.

Now you need to replace the image in the "img" portfolio folders.You can add another folder that will contain full size images that will be displayed in prettyPhoto lightbox. So to customize the portfolio items, simply follow these simple steps (same as the portfolio on home page):

1. Make HTML structure as shown above
2. Replace the images inside img/portfolio/column_you_are_using folder.
3. You can also make another folder that will contain full size images (that will be displayed in a lightbox).
4. When you replaced your images go to this HTML structure and replace the paths to your images
5. For image that will be displayed change the path inside a tag with class "portfolio-image"
6. For image that will be displayed in a lightbox change the path inside "href" tag (inside div with class "mask").

Don't forget to assign data-id to every list item - portfolio item and a data-type which defines the category one portfolio item belongs too.

The logic of using other versions of portfolio is the same. You only had to change the class that defines the column you are using. If you want to change the styling of portfolio items you can do that in the css file style.css beginning at the line 1848.

##### Portfolio Single

In this section we will explain how to customize Portfolio sinle page.

As you can see in the preview, the portfolio single page has a different look and structure. We have a slider (Nivo Slider) on the left and some description on the right side. Here is it's HTML structure.

        <article class="portfolio-slider-wrap grid_7">
            <div id="slider1" class="nivoSlider portfolio-slider">
                <img src="img/portfolio/single/portfolio1.jpg" alt="slider"/>
                <img src="img/portfolio/single/portfolio2.jpg" alt="slider"/>
                <img src="img/portfolio/single/portfolio3.jpg" alt="slider"/>

            </div>

            <!-- slider images shadow -->
            <div class="portfolio-slider-shadow"></div>
        </article>

        <article class="grid_5 portfolio-info">
            <h4>Overview</h4>
            <p>
                Consectetur adipiscing elit aeneane lorem lipsum,
                condimentum ultrices consequ atvehicula mauris lipsum
                adipiscing lipsum aenean orci lorem. onsequatv.
            </p>

            <p>
                Aatvehicula mauris lipsum adipiscing lipsum aenean orci
                lorem onsequatv.
            </p>

            <h4>Project details</h4>
            <ul>
                <li>Date: 12/08/2012</li>
                <li>Client: Creattica</li>
                <li>Author: streetx222</li>
            </ul>

            <div class="btn">
                <a href="#">Visit site</a>
            </div>
        </article>

The images in the portfolio slider are placed in a img/portfolio/single folder, so first do the replacement. You should make your images the same size as on the preview, so you won't need to adjust the slider width and height in css. once you have replaced the images, just change the path to them inside this "img" tags.

For this slider, we used NivoSlider, so do not forget do include it's .js and .css files in the head of your document. Also you will need to call the slider plugin at the bottom of the body. just see portfolio-single.html for reference.

You can change the description of the portfolio inside this div with class "portfolio-details". Also you can change the text of the button and a link to which it is pointing.

At the bottom of the page there is a carousel with portfolio items. It's usage s the same as for other carousels already explained. here is the HTML structure you should use.

    <article class="grid_12 jcarousellite portfolio-carousel clearfix">
    <!-- divider with title start -->
    <section class="divider-with-title carousel clearfix">

        <div class="title">
            <h4>Other Projects</h4>
        </div>

        <ul class="carousel-nav">
            <li>
                <a class="carousel-nav-1 prev" href="#"></a>
            </li>

            <li>
                <a class="carousel-nav-1 next" href="#"></a>
            </li>
        </ul>

    </section><!-- divider with title end -->

    <ul id="carousel-1" class="carousel-li carousel-4-items">
        <li>
            <figure class="portfolio">
                <div class="img-hover">
                    <a class="portfolio-image" href="portfolio4.html">
                        <img src="img/portfolio/4col/portfolio1.jpg" alt="portfolio" width="220"/>
                    </a>

                    <div class="mask">
                        <a class="thumb info"
                           title=""
                           href="img/portfolio/4col/portfolio1.jpg"
                           data-gal="prettyPhoto[pp_gallery]">
                        </a>
                    </div>

                </div>

                <figcaption>
                    <div class="caption-title">
                        <p class="title">
                            Simply Amazing
                        </p>
                        <p class="subtitle">
                            Photography
                        </p>
                    </div>
                </figcaption>
            </figure>
        </li>

        <li>
            <figure class="portfolio">
                <div class="img-hover">
                    <a class="portfolio-image" href="portfolio4.html">
                        <img src="img/portfolio/4col/portfolio2.jpg" alt="portfolio" width="220"/>
                    </a>

                    <div class="mask">
                        <a class="thumb info"
                           title=""
                           href="img/portfolio/4col/portfolio2.jpg"
                           data-gal="prettyPhoto[pp_gallery]">
                        </a>
                    </div>

                </div>

                <figcaption>
                    <div class="caption-title">
                        <p class="title">
                            Work by streetx222
                        </p>
                        <p class="subtitle">
                            Graphic design
                        </p>
                    </div>
                </figcaption>
            </figure>
        </li>

                                ...

Editing the items in the carousel is the same as for portfolio items on other portfolio pages, because the HTML structure is the same. This carousel is styled to show 4 items. So if you want to style it differently you'll need to make some changes in the css file. The styling for portfolio single is placed in style.css file beginning from line 2066.

### Blog Pages Customization

In this section we will explain how to customize Blog page.

Blog posts are placed in an unordered list inside grid_8 with class "conetent-sidebar-right". This means that this is a blog page that has right sidebar. If you'd like to use blog with left sidebar simply use grid_8 with class "conetent-sidebar-left". There are few options for blog post types you can use:

- Blog post with image
- Blog post with gallery
- Blog post with vimeo or youtube video
- Blog post with quote

##### Blog post with image

So, we'll start with customizing blog post that has image. here is it's HTML structure.

        <li class="blog-post clearfix">
            <section class="post-title-container">
                <h3>This is post with image</h3>
                <a class="post-author" href="#">
                    by Eduard Bros
                </a>
            </section>

            <div class="post-info-container">
                <img src="img/blog/blog3.jpg" alt="blog" />

                <div class="post-meta">
                    <ul>
                        <li class="meta-date">
                            <a href="#">June 6th, 2012</a>
                        </li>

                        <li class="meta-tags">
                            <a href="#">Responsive</a>
                        </li>

                        <li class="meta-views">
                            <a href="#">106 views</a>
                        </li>

                        <li class="meta-comments">
                            <a href="blog-single.html">3 comments</a>
                        </li>
                    </ul>
                </div>

                <div class="blog-post-shadow"></div>
            </div>

            <article class="post-body">
                <div class="post-category">
                    <a href="#" class="category-image"></a>
                </div>

                <p>
                    Lid est laborum dolos rumes fustsirs sit untras.
                    Et harums ...
                </p>

                <div class="btn">
                    <a href="blog-single.html">Read more</a>
                </div>

            </article>
        </li>

All images used in blog pages are placed in an "blog" folder inside img folder. So when changing images, first do replacement there.

So let's see what we have here. First we have section with class "post-title-container". This is the place where you change the title of your blog post, and the author.

After that we have a div with class "post-info-container". In this div is placed the image and post meta. When you already changed the actual image, you need to change the path to it inside the "img" tag. As you can see after the image there is an "ul" that contains post meta data. You can change the data inside those list items. Images used for post meta are placed in the same "blog" folder, so if you want to change them, that is the place to do that.

After the post info section we have post body section. In this section you'll find blog category and blog text. To change the icon for category go to the style.css file on the line 2375. inside the "p" tags you can change post description (post text). You can see there is also a button that is linking the post single page. You can edit it's text inside "a" tag.

After every blog post there is a divider, so don't forget to add it :).

##### post with gallery

The HTML structure of the post meta section and body section is the same. The difference is that in post info container we don't have image, but slider. So here it is.

        <div class="post-info-container with-slider">
            <div id="slider-1" class="nivoSlider blog-slider">
                <img src="img/blog/blog1.jpg" alt="blog" />
                <img src="img/blog/blog4.jpg" alt="blog" />
                <img src="img/blog/blog3.jpg" alt="blog" />
            </div>

            <div class="post-meta">
                <ul>
                    <li class="meta-date">
                        <a href="#">June 6th, 2012</a>
                    </li>

                    <li class="meta-tags">
                        <a href="#">Responsive</a>
                    </li>

                    <li class="meta-views">
                        <a href="#">106 views</a>
                    </li>

                    <li class="meta-comments">
                        <a href="blog-single.html">3 comments</a>
                    </li>
                </ul>
            </div>

            <div class="blog-post-shadow"></div>
        </div>

For the slider on blog page, Nivo Slider plugin is used, so you need to include it's .css and .js file in the head of the document. Also you need to call the plugin at the bottom of the body.

Note that this post info container has class "with-slider", so when using a blog post that has gallery don't forget to add this class. So how to customize this? it's quite simple. You just need to replace images in "blog" folder with your own, and then adjust the path to them inside the "img" tags.

##### post with vimeo or youtube video

When using a blog post that has a video you will have to follow some simple steps. The HTML structure of post meta and description is the same. Again, the difference is that inside post-info-container there will be an iframe of a video instead of an image. here is the sample of a code.

        <div class="post-info-container">

            <iframe src="http://player.vimeo.com/video/29798521?byline=0&
            portrait=0&badge=0&"></iframe>

            <div class="post-meta">
                <ul>
                    <li class="meta-date">
                        <a href="#">June 6th, 2012</a>
                    </li>

                    <li class="meta-tags">
                        <a href="#">Responsive</a>
                    </li>

                    <li class="meta-views">
                        <a href="#">106 views</a>
                    </li>

                    <li class="meta-comments">
                        <a href="blog-single.html">3 comments</a>
                    </li>
                </ul>
            </div>

            <div class="blog-post-shadow"></div>
        </div>

So, how to get an video in iframe? Go to viemo or youtube, find a video you want to use. There will be button share on it. Click that and copy the code that is refering to the link of the video. Now place that code at inside of this iframe you see in your html file.

##### blog post with quote

here is the HTML structure of a post with quote. Again the only difference is in post-info-container.

    <div class="post-info-container">

        <blockquote class="blog-quote">
            <span class="quote-mark">"</span>
            Lid est laborum dolos rumes fustsirs sit untras.
            Et harums ser quidem sit rerums facilis est
            dolores uni nemis Lid est laborum dolos rumes
            fustsirs sit untras. Et harums ser quidem sit
            rerums facilis est dolores uni nemis . Lid est
            laborum dolos rumes fustsirs sit untras. Et
            harums ser quidem sit rerums facilis est dolores
            uni nemis Lid est laborum dolos rumes fustsirs
            sit untras. Et harums ser quidem sit rerums
            facilis est dolores uni nemis.
        </blockquote>

        <div class="post-meta">
            <ul>
                <li class="meta-date">
                    <a href="#">June 6th, 2012</a>
                </li>

                <li class="meta-tags">
                    <a href="#">Responsive</a>
                </li>

                <li class="meta-views">
                    <a href="#">106 views</a>
                </li>

                <li class="meta-comments">
                    <a href="blog-single.html">3 comments</a>
                </li>
            </ul>
        </div>

        <div class="blog-post-shadow"></div>
    </div>

To replace the quote simply edit the text inside "blockquote" tag.

##### Blog post with audio

For displaying audio in blog post, we used a plugin named jplayer. You can find all of it's files in "js" folder. We advise you to use the ame HTML structure that is presented below.

     <div class="post-info-container">

        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio">
            <div class="jp-type-playlist">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-previous"
                        tabindex="1">previous</a></li>
                        <li><a href="javascript:;" class="jp-play"
                        tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause"
                        tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-next"
                        tabindex="1">next</a></li>
                        <li><a href="javascript:;" class="jp-stop"
                        tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute"
                        tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute"
                        tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max"
                        tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-time-holder">
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                    </div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-shuffle"
                        tabindex="1" title="shuffle">shuffle</a></li>
                        <li><a href="javascript:;" class="jp-shuffle-off"
                        tabindex="1" title="shuffle off">shuffle off</a></li>
                        <li><a href="javascript:;" class="jp-repeat"
                        tabindex="1" title="repeat">repeat</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off"
                        tabindex="1" title="repeat off">repeat off</a></li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser
                    to a recent version or update your <a
                    href="http://get.adobe.com/flashplayer/" target="_blank">
                    Flash plugin</a>.
                </div>
            </div>
        </div><!-- .jp-audio -->

So here is what to do. First copy the above structure in your HTML file. When you have done this you can add some text, same as on teh other blog post types. then you need to include the call for the plugin in the end of the page body. there is the place you will add your audio files too. note that you must reference m4a and ogg format for crossbrowser compatibility.

here is the code example of how to do that.

        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
                    oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
                });
            },
            swfPath: "js/jplayer/",
            supplied: "m4a, oga",
            wmode: "window"
        });

##### single blog post page

So here is the final blog post page and that is blog post single. It's HTML structure regarding the post info container and post body is the same as on the blog posts page. After the post body section there is a divider. You can see example on your blog-single.html file.

next, what we have on this page is comments section and form for sending a comment. When user sends a comment it will be send to your email and you will have to manually insert the comment on your page. So let's see the HTML structure of the comments section.

    <article class="post-comments">
        <h3>4 Comments on this awesome blog post</h3>

        <ul class="comments-li">
            <li>
                <article class="comment">
                    <div class="avatar">
                        <div class="author-img">
                            <img src="img/blog/author1.jpg" width="87" alt="author" />
                        </div>

                    </div>

                    <div class="comment-meta">
                        <a href="#" class="author">Mark </a>
                        March, 2012 at 09:01 am | <a href="#"> Reply</a>
                    </div>

                    <div class="comment-body">
                        <p>
                            Lorem ipsum dolor...
                        </p>
                    </div>
                </article>

                <!-- second level comment -->
                <ul class="child">
                    <li>
                        <article class="comment">
                            <div class="avatar">
                                <div class="author-img">
                                    <img src="img/blog/author3.jpg" width="87" alt="author" />
                                </div>

                            </div>

                            <div class="comment-meta">
                                <a href="#" class="author">John</a>
                                March, 2012 at 09:01 am | <a href="#">Reply</a>
                            </div>

                            <div class="comment-body">
                                <p>
                                    Lorem ipsum ...
                                </p>
                            </div>
                        </article>

                        <ul class="child">
                            <li>
                                <article class="comment">
                                    <div class="avatar">
                                        <div class="author-img">
                                            <img src="img/blog/author2.jpg" width="87" alt="author" />
                                        </div>

                                    </div>

                                    <div class="comment-meta">
                                        <a href="#" class="author">Maya</a>
                                        March, 2012 at 09:01 am | <a href="#">Reply</a>
                                    </div>

                                    <div class="comment-body">
                                        <p>
                                            Lorem ipsum ...
                                        </p>
                                    </div>
                                </article>
                            </li>
                        </ul>
                    </li>
               </ul>
            </li><!-- post comments list item end -->

            <li>
                <article class="comment">
                    <div class="avatar">
                        <div class="author-img">
                            <img src="img/blog/author1.jpg" width="87" alt="author" />
                        </div>

                    </div>

                    <div class="comment-meta">
                        <a href="#" class="author">Mark </a>
                        March, 2012 at 09:01 am | <a href="#"> Reply</a>
                    </div>

                    <div class="comment-body">
                        <p>
                            Lorem ipsum ...
                        </p>
                    </div>
                </article>
            </li>
        </ul>
    </article>                     <article class="post-comments">
        <h3>4 Comments on this awesome blog post</h3>

        <ul class="comments-li">
            <li>
                <article class="comment">
                    <div class="avatar">
                        <div class="author-img">
                            <img src="img/blog/author1.jpg" width="87" alt="author" />
                        </div>

                    </div>

                    <div class="comment-meta">
                        <a href="#" class="author">Mark </a>
                        March, 2012 at 09:01 am | <a href="#"> Reply</a>
                    </div>

                    <div class="comment-body">
                        <p>
                            Lorem ipsum dolor...
                        </p>
                    </div>
                </article>

                <!-- second level comment -->
                <ul class="child">
                    <li>
                        <article class="comment">
                            <div class="avatar">
                                <div class="author-img">
                                    <img src="img/blog/author3.jpg" width="87" alt="author" />
                                </div>

                            </div>

                            <div class="comment-meta">
                                <a href="#" class="author">John</a>
                                March, 2012 at 09:01 am | <a href="#">Reply</a>
                            </div>

                            <div class="comment-body">
                                <p>
                                    Lorem ipsum ...
                                </p>
                            </div>
                        </article>

                        <ul class="child">
                            <li>
                                <article class="comment">
                                    <div class="avatar">
                                        <div class="author-img">
                                            <img src="img/blog/author2.jpg" width="87" alt="author" />
                                        </div>

                                    </div>

                                    <div class="comment-meta">
                                        <a href="#" class="author">Maya</a>
                                        March, 2012 at 09:01 am | <a href="#">Reply</a>
                                    </div>

                                    <div class="comment-body">
                                        <p>
                                            Lorem ipsum ...
                                        </p>
                                    </div>
                                </article>
                            </li>
                        </ul>
                    </li>
               </ul>
            </li><!-- post comments list item end -->

            <li>
                <article class="comment">
                    <div class="avatar">
                        <div class="author-img">
                            <img src="img/blog/author1.jpg" width="87" alt="author" />
                        </div>

                    </div>

                    <div class="comment-meta">
                        <a href="#" class="author">Mark </a>
                        March, 2012 at 09:01 am | <a href="#"> Reply</a>
                    </div>

                    <div class="comment-body">
                        <p>
                            Lorem ipsum ...
                        </p>
                    </div>
                </article>
            </li>
        </ul>
    </article>

As you can see in the code above all comments are wrapped inside an article with class post-comments. Then, all comments are wrapped inside an unordered list, and every comment presents one list item. Every comment has a div with class "comment-meta", a div with class "avatar" and a div with class "comment-body".

To change the avatar of the comment author first replace an image inside your img/blog/ folder, and then edit the path to it inside "img" tag in div with class 2avatar". Author name and the date can be edited in di with class "comment-meta". You can simply edit this text.

To edit comment text, simply edit the text inside "p" tags inside of a div with class "comment-body". As you can see there can be more levels of comments. If you want to add a "child" comment, simply make an unordered list inside and add a class "child" to it. then, make an list item and paste the comment structure. You can see this example on the code above.

If you'd like to change the styling of a comment go to style.css file to line 2453.

After the comments section there is a form for sending a reply. You can see it's structure here.

        <section id="respond">
            <h4>Leave a comment</h4>
            <form>
                <input type="text" class="text" placeholder="Your First Name..."/>

                <input type="text"  class="text" placeholder="Your Last Name..."/>

                <input type="email" name="email" class="text email" placeholder="Your Email..."/>

                <textarea rows="15" class="textarea" placeholder="Your message..."></textarea>

                <input id="comment-reply" type="submit" value="Send Message">
            </form>

        </section>

As already stated, when user leaves a comment you will receive an email message on the mail you have entered in the contct.php file. You can edit the styling of contact form in style.css file beginning at line 2554.

### Sidebar Customization

In this section we will explain how to customize sidebar.

Sidebar is placed in "aside" tag with classes grid_4 and aside. by default sidebar is positioned on the right side of the page. If you would like to use sidebar on the left side, just add class "left" to it.

So what we have in the sidebar? There is an unordered list with class "sidebar-widgets". Every widget is one list item placed in that ul.

First we'll have a look at blog categories list. here is it's HTML structure.

        <li class="categories">
            <h5>Blog categories</h5>
            <ul class="arrow-list">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Motion Graphics</a></li>
                <li><a href="#">Photography</a></li>
                <li><a href="#">Uncategorized</a></li>
            </ul>
        </li><!-- categories widget end -->

To change the name of bog categories simply edit the text inside li tags. Styling for sidebar blog categories list can be edited in style.css file beginning at line 2731.

The blog archive list has the same structure and you can edit it the same way.

Next what we have in sidebar is tabbed content with popular and recent posts. here is the HTML structure.

    <li class="posts-tab clearfix">
        <!-- tabs start -->
        <ul class="tabs">
            <li class="active">
                <a href="#tab1">Popular</a>
            </li>
            <li class="">
                <a href="#tab2">Recent</a>
            </li>
        </ul><!-- tabs end -->

        <!-- tabs content -->
        <section class="tab-content-wrap">

            <!-- tab1 content start -->
            <div id="tab1" class="tab-content">
                <ul class="posts-li">
                    <li>
                        <img src="img/blog/post-li-1.jpg" alt="img" />

                        <div>
                            <p>
                                Lorem Ipsum ...
                            </p>

                            <a href="blog-single.html" class="post-li-meta">12th
                            August, 4 comments</a>
                        </div>
                    </li>

                    <li>
                        <img src="img/blog/post-li-2.jpg" alt="img" />

                        <div>
                            <p>
                                Lorem Ipsum harums ser quidem
                                sit rerums facilis desk team
                            </p>

                            <a href="blog-single.html" class="post-li-meta">12th
                            August, 4 comments</a>
                        </div>
                    </li>

                    <li>
                        <img src="img/blog/post-li-3.jpg" alt="img" />

                        <div>
                            <p>
                                Lorem Ipsum ...
                            </p>

                            <a href="blog-single.html" class="post-li-meta">12th
                            August, 4 comments</a>
                        </div>
                    </li>
                </ul>

            </div><!-- tab1 content end -->

            <!-- tab2 content start -->
            <div id="tab2" class="tab-content">
                <ul class="posts-li">
                    <li>
                        <img src="img/blog/post-li-3.jpg" alt="img" />

                        <div>
                            <p>
                                Lorem Ipsum ...
                            </p>

                            <a href="blog-single.html" class="post-li-meta">12th
                            August, 4 comments</a>
                        </div>
                    </li>

                    <li>
                        <img src="img/blog/post-li-1.jpg" alt="img" />

                        <div>
                            <p>
                                Lorem Ipsum ...
                            </p>

                            <a href="blog-single.html" class="post-li-meta">12th
                            August, 4 comments</a>
                        </div>
                    </li>

                    <li>
                        <img src="img/blog/post-li-2.jpg" alt="img" />

                        <div>
                            <p>
                                Lorem Ipsum ...
                            </p>

                            <a href="blog-single.html" class="post-li-meta">12th
                            August, 4 comments</a>
                        </div>
                    </li>
                </ul>
            </div><!-- tab2 content end -->

        </section><!-- tabs content end -->
    </li>

This tabbed content was made with jquery and you can see the code for it in include.js file. How to edit this content? First you should leave this structure as it is.You can see that at the top there is an ul whit class tabs. Inside of it there are list items that presents the heading for the tabs. You can edit the heading of each tab there.

After that there is a section with class "tab-content-wrap". here comes your tab content. Content of every tab is placed inside a div with id of a tab number (1, 2, 3...). Structure of a tab content for both recent and popular posts is the same, so we'll have a look at one HTML structure.

        <div id="tab1" class="tab-content">
            <ul class="posts-li">
                <li>
                    <img src="img/blog/post-li-1.jpg" alt="img" />

                    <div>
                        <p>
                            Lorem Ipsum harums ser quidem
                            sit rerums facilis desk team
                        </p>

                        <a href="blog-single.html" class="post-li-meta">12th
                        August, 4 comments</a>
                    </div>
                </li>

                <li>
                    <img src="img/blog/post-li-2.jpg" alt="img" />

                    <div>
                        <p>
                            Lorem Ipsum harums ser quidem
                            sit rerums facilis desk team
                        </p>

                        <a href="blog-single.html" class="post-li-meta">12th
                        August, 4 comments</a>
                    </div>
                </li>

                <li>
                    <img src="img/blog/post-li-3.jpg" alt="img" />

                    <div>
                        <p>
                            Lorem Ipsum harums ser quidem
                            sit rerums facilis desk team
                        </p>

                        <a href="blog-single.html" class="post-li-meta">12th
                        August, 4 comments</a>
                    </div>
                </li>
            </ul>

        </div><!-- tab1 content end -->

So how to edit this content? First, replace the images for blog posts inside the img/blog folder. You should keep them the same size as in the preview. After that edit the path to your image inside "img" tag. You can edit the text of the post inside p tag. Also, you can edit the date of the post, and number of comments inside "a" tag. Note that every list item presents one blog post inside the tab. You can add as many as you wish.

If you'd like to edit the style of this tabs you can do it in style.css file starting at line 2759 and basic.css file starting at line 289.

The next thing we have is a carousel with videos. This is accomplished with jcarouFredsel plugin. here is the HTML structure.

       <li class="video-widget clearfix jcarousellite">
            <h5>Video widget</h5>
            <ul id="carousel-3" class="carousel-li">
                <li>
                    <iframe class="styled"
                    src="http://player.vimeo.com/video/29798521?byline=0&"></iframe>
                </li>

                <li>
                    <iframe class="styled"
                    src="http://player.vimeo.com/video/29791072?byline=0&"></iframe>
                </li>

                <li>
                    <iframe class="styled"
                    src="http://player.vimeo.com/video/29790335?byline=0&"></iframe>
                </li>
            </ul>

            <div class="carousel-pagination-wrapper">
                 <div class="carousel-pagination" id="video-widget-nav"></div>
            </div>

            <div class="aside-shadow"></div>
        </li>

Note that you must include the .js file for carousel in the head of your document. You will also need to include the call for the plugin at the end of the document body like this:

        jQuery('#carousel-3').carouFredSel({
            items: 1,
            height: 160,
            pagination: true,
            auto: false,
            scroll: {
                items: 1,
                fx: 'fade'
            },
            pagination  : "#video-widget-nav",
            responsive: true
        });

To replace those videos, simply follow same steps as adding an video to blog post. that is go to vimeo or youtube, find the video, click share and copy the link of the video. Paste it inside the iframe tags and that's it.

In sidebar there is also twitter widget. It is really simple to use. Here is the HTML structure you should simply paste.

        <!-- tweets widget -->
        <li class="tweets-feed clearfix">
            <h5>Twitter widget</h5>
            <div class="tweets-list-container aside">
            </div>
        </li>

Note that when using a twitter widget in sidebar it will have class "aside". When you are using it in the footer it will not have these class. Besides that you need to call your twitter widget at the bottom of the body. Here is how.

         $('.tweets-list-container').tweetscroll({
            username: ['pixel_industry', 'envato'],
            time: true,
            limit: 11,
            replies: true,
            position: 'append',
            date_format: 'style2',
            animation: 'slide_up',
            visible_tweets: 2
        });

You can use one username to fetch tweets from or more, like in the code above. Just replace our and envato usernames with your username.

### Contact Page

In this section we will explain how to customize Contact page.

How to customize the contact page? It's quite simple. Let's see it's structure.

        <div class="container_12">

            <div id="map_canvas" class="grid_12"></div>

            <div class="grid_8 contact-form">
                <h4>Leave us a message</h4>
                <form>
                    <input type="text" class="text" placeholder="Your First
                    Name..."/>

                    <input type="text"  class="text" placeholder="Your Last
                    Name..."/>

                    <input type="email" name="email" class="text email"
                    placeholder="Your Email..."/>

                    <textarea rows="15" class="textarea" placeholder="Your
                    message..."></textarea>

                    <input type="submit" class="submit" value="Send message" />

                </form>

            </div>

            <article class="grid_4 contact-info">

                    <h4>Contact Info</h4>
                    <p>
                        25-Th  Street Name, Florida, CA 29637, USA
                    </p>
                    <p>
                        Consectetur adipiscing....
                    </p>
                    <ul class="phones">
                        <li>Phone: (123) 456-7890</li>
                        <li>Fax: (123) 456-7890</li>
                        <li> Mob: (123) 456-7890</li>
                    </ul>

                    <ul class="web">
                        <li> Email:
                            <a href="#"> contact@poket.com </a>
                        </li>

                        <li>Web:
                            <a href="#"> www.poket.com </a>
                        </li>
                    </ul>

            </article>

        </div>

So, at the top we have a map canvas. It is holding the google map. You can change it's height in style.css file. After that we have a contact form. You can edit the text displayed in the contact boxes by editing the text inside "placeholder".

You can edit your contact information in this div with class "contact-info".

For contact map to work simply paste this code. Also you can edit the google map mark by putting your Geographical longitude and Latitude (LatLng).

        $(function(){
            //google maps
            var yourStartLatLng = new google.maps.LatLng(48.880833, 2.42333);
            $('#map_canvas').gmap({'center': yourStartLatLng,'zoom': 15,
            'disableDefaultUI':true, 'callback': function() {
                    var self = this;
                    self.addMarker({'position': this.get('map').getCenter() });
                }});
        });

### Photo Stream Widgets and Twitter Feed

In this section we will explain how to use photo Sterams plugins.

Photo Stream Widgets can be used on any page without limit. Widgets are made in desire to connect static website with some dynamic content so your users will always have new content on page. There are seven different Photo Stream widgets and one RSS Feed Widget. These are:

- Flickr
- Pinterest
- Dribble
- Instagram
- DeviantArt
- Picasa
- Youtube
- News feed

How to use it? The easiest way is just to copy the desired script for initialization and put it on page you want. After that you need to change the "id" or "class" where you want your widget to appear.

here is the code for all available widgets.

        /* ================ PINTEREST FEED ================ */
        $('.pinterest-feed').socialstream({
            socialnetwork: 'pinterest',
            limit: 15,
            username: 'your_username_here'
        })

        /* ================ DEVIANT ART FEED ================ */
        $('.deviant-feed').socialstream({
            socialnetwork: 'deviantart',
            limit: 15,
            username: 'your_username_here'
        })

        /* ================ PICASA FEED ================ */
        $('.picasa-feed').socialstream({
            socialnetwork: 'picasa',
            limit: 15,
            username: 'your_username_here'
        })

        /* ================ FLICKR FEED ================ */
        $('.flickr-feed').socialstream({
            socialnetwork: 'flickr',
            limit: 15,
            username: 'your_username_here'
        })

        /* ================ DRIBBBLE FEED ================ */
        $('.dribbble-feed').socialstream({
            socialnetwork: 'dribbble',
            limit: 15,
            username: 'your_username_here'
        })

        /* ================ YOUTUBE FEED ================ */
        $('.youtube-feed').socialstream({
            socialnetwork: 'youtube',
            limit: 15,
            username: 'your_username_here'
        })

        /* ================ NEWSFEED ================ */
        $('.newsfeed').socialstream({
            socialnetwork: 'newsfeed',
            limit: 15,
            username: ' http://feeds.feedburner.com/webdesignerdepot?format=xml'
        })

Twitter widget is already explained. important to note is when you use more than one twitter on one page the second one should have class "tweets-list-container-2". Twitter Feed includes using Tweetscroll jQuery plugin. Using it is very simple and can be found in "include.js". Code below shows how to initialize Tweetscroll plugin with desired options.

    /* ================ TWEETS SCROLL ================ */
    $('.tweets-list-container').tweetscroll({
    	username: 'envatowebdesign',
    	time: true,
    	limit: 11,
    	replies: true,
    	position: 'append',
    	date_format: 'style2',
    	animation: 'slide_up',
    	visible_tweets: 2
    });

There are eight parameter in this plugin which can be changed by your needs.

- username - your username or list of usernames
- time - include time when tweet was published
- limit - how many tweets you want to show
- replies - set this to true if you want to show "Replay" link
- position - how you want to show tweets, append or prepend
- animation - how you want to animate your tweets. There are four different options: [slide_up, slide_down, fade, false]. False means that tweets won't scroll
- visible_tweets - how many tweets you want to be visible in one time

### API Usage

APIs used in pocket theme are:

- Google Maps
- Twitter
- Flickr
- Instagram
- Dribbble
- Youtube

All these APIs are used as a part of TweetScroll and SocialStream plugins and we don't recommend changing any of the code in these plugins.

### Footer Customization

The footer is placed inside footer-wrapper that has full width. Inside there is a footer containing columns and copyright container. Copyright container holds copyright information and social icons.

Footer has four columns in it. First one is simple article with text. You can see it's structure below.

       <!-- sliding text article start -->
        <article class="grid_3">
            <div class="footer-title">
                <span>about us</span>
            </div>

            <p>
                Consectetur adipiscing elit aeneane lorem lipsum,
                condimentum ultrices consequ atvehicula mauris lipsum
                adipiscing lipsum aenean orci lorem. onsequatv
            </p>

            <p>
                atvehicula mauris lipsum adipiscing lipsum aenean orci
                lorem. onsequatv
            </p>

        </article><!-- sliding text article end -->

To change the title of the article, simply edit the text inside div with class "footer-title". You can edit the description inside "p" tags.

The second column in the footer are blog categories. They are placed in an unordered list with class "footer-category". Every category is one list item with an "a" tag. You can edit their names and links inside that "a" tag. See the code below.

                    >article class="grid_3">
                        >div class="footer-title">
                            >span>category>/span>
                        >/div>

                        >ul class="footer-category">
                            >li>
                                >a href="blog.html">Web design>/a>
                            >/li>

                            >li>
                                >a href="blog.html">Photo>/a>
                            >/li>

                            >li>
                                >a href="#">Development>/a>
                            >/li>

                            >li>
                                >a href="#">HTML>/a>
                            >/li>

                            >li>
                                >a href="#">Themeforest>/a>
                            >/li>
                            >li>
                                >a href="#">Branding>/a>
                            >/li>

                            >lI>
                                >a href="#">Illustrator>/a>
                            >/lI>
                        >/ul>
                    >/article>>!-- latest blog entries end -->

The third column is twitter widget. The HTML structure is the same as for the widget ins idebar, except this one has class "tweet-list-container-2" and does not have class "aside".

The fourth column is Instagram feed. You can use any photo stream you want. The structure and calling is explained in the section above.

## Sources and credits

The images used in the preview are not included in the download files. Many thanks for the images to streetx222.

Credits:

- Vectórica - for beautiful videos used for preview
- Anything Slider
- Nivo Slider
- prettyPhoto Lightbox
- Quicksand plugin
- jQuery Easing
- carouFredSel
- HTML5shiv
- jQuery placeholder
- Many thanks to streetx222for his beautiful images
- other images presented in the preview were bought form Photodune
- Tweetable plugin
- selectivizr