“Lastore” Documentation by “TemplateSquare” v1.0


“Lastore”

Created:02/07/2013
By: TemplateSquare


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!


Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. PSD Files
  6. Sources and Credits
  7. PHP Code Explanation (If your theme uses PHP)
  8. Flash (If your theme uses Flash)
  9. API Usage (If your theme uses an API)
  10. Any additional unique features that need an overview

A) HTML Structure - top

Below is the general HTML structure of the landing page.

0) Change Color and Background - top

Color can easily changed by open the color.css inside 'styles/' folder.

You can change content, background, heading and link color in the color.css

1) Front Page HTML Structure - top

The front page's layout consist of top that show the logo and main menu, slider that show slider, beforecontent that show page title, maincontent that show main content, footersidebar that show footer sidebar, footer that show copyright information.

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8" />
    <title>[..page title..]</title>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    
    <!-- CSS
    ================================================== -->
    <!-- Link Stylesheet Here -->
    
    
    <!-- Favicons
    ================================================== -->
    <!-- Link to Favicon Here -->

  
</head>

<body>

    <div id="bodychild">
        <div id="outercontainer">
        
            <!-- HEADER -->
            <div id="outerheader">
            
            <header>
                <div id="top">
                    <div class="container">
                        <div class="row">
                            <div id="topmenu" class=" six columns">
                                [.. containes all menu's list items and sub lists ..]
                            </div>
                            <div id="topright" class="six columns">
                                <div class="language"> 
                                    [.. containes laguage icon ..]
                                </div>
                                <div class="currency">[.. containes currency ..]</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="logo-wrapper">
                    <div class="container">
                        <div class="row">
                            <div id="logo" class="six columns">
                                [.. contains an anchor tag for the logo link ..]
                                <span class="desc">[.. contains description for the website ..]</span>
                            </div>
                            <div class="right six columns">
                                [.. contains search form ..]
                            
                                <div id="shopping-cart-wrapper">
                                    <div id="shopping_cart">[.. contains an anchor tag for the shopping cart..]</div>
                                </div>
                                <div class="clear"></div> 
                                <div class="login">[.. containes login and register link ..]</div>
                            
                            </div>
                        </div>
                    </div>
                </div>
                
                <section id="navigation">
                    <div class="container">
                        <div class="row">
                            <nav id="nav-wrap" class="twelve columns">
                                [.. containes all menu's list items and sub lists ..]
                            </nav><!-- nav --> 
                        </div>
                    </div>
                </section>
                
                <div class="clear"></div>
            </header> 
            <div class="headline">
                <div class="container">
                    <div class="row">
                        <div class="twelve columns">
                        	[.. containes headline ..]
                        </div>
                    </div>
                </div>
            </div>
            <!-- END HEADER -->
            
            <!-- SLIDER -->
            <div id="outerslider">
                <div id="slidercontainer">
                
                    <section id="slider">
                    	[.. contains the slider items ..]
                    </section>
                    
                </div>
            </div>
            <!-- END SLIDER -->
            
            <!-- MAIN CONTENT -->
            <div id="outermain">
                <div class="container">
                    <div class="row">
                    
                        <section id="maincontent" class="twelve columns">

                            <section class="content">
                        
                                <div class="breadcrumb">[.. contains the breadcrumb ..]</div>
                                <h1 class="pagetitle">[.. contains the page title ..]</h1>
                                
                                [.. contains the content information..] 
                            </section>

                        </section>
                    
                    </div>
                </div>
            </div>
            <!-- END MAIN CONTENT -->
            
            <!-- FOOTER -->
            <footer id="footer">
                <div id="carousel"  class="es-carousel-wrapper">
                    <div class="es-carousel">
                        [.. contains sponsor logo ..]
                    </div>
                    <div class="clear"></div>
                </div>
                <!-- FOOTER SIDEBAR -->
                <div id="outerfootersidebar">
                <div class="container">
                    <div id="footersidebar" class="row"> 
                        <div id="footcol1"  class="one_fifth columns">
                            [.. contains footer sidebar 1 ..]
                        </div>
                        <div id="footcol2"  class="one_fifth columns">
                            [.. contains footer sidebar 2 ..]
                        </div>
                        <div id="footcol3"  class="one_fifth columns">
                            [.. contains footer sidebar 3 ..]
                        </div>
                        <div id="footcol4"  class="one_fifth columns">
                            [.. contains footer sidebar 4 ..]
                        </div>
                        <div id="footcol5"  class="one_fifth columns">
                            [.. contains footer sidebar 5 ..]
                        </div>
                        <div class="clear"></div>
                    
                    </div>
                </div>
                </div>
                <!-- END FOOTER SIDEBAR -->
                
                <!-- COPYRIGHT -->
                <div id="outercopyright">
                    <div class="container">
                        <div id="copyright">
                            [.. contains copyright ..]
                        </div>
                        <ul class="sn">
                            [.. contains social icon ..]
                        </ul> 
                    </div>
                </div>
                <!-- END COPYRIGHT -->
            </footer>
            <!-- END FOOTER -->
            <div class="clear"></div><!-- clear float --> 
        </div><!-- end outercontainer -->
    </div>
  
    <!-- Javascript
    ================================================== -->
    <!-- Javascript Code here -->

</body>
</html>
        

2) Inner Pages HTML Structure - top

The inner pages HTML structure is very similar to the front page one except that some elements are not needed for inner pages.

The inner pages' layout consist of TOP that show the logo and main menu, after header that show page header image, beforecontent that show page title, maincontent that show main content and sidebar, footersidebar that show footer sidebar, footer that show copyright information.

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8" />
    <title>[..page title..]</title>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    
    <!-- CSS
    ================================================== -->
    <!-- Link Stylesheet Here -->
    
    
    <!-- Favicons
    ================================================== -->
    <!-- Link to Favicon Here -->

  
</head>

<body>

    <div id="bodychild">
        <div id="outercontainer">
        
            <!-- HEADER -->
            <div id="outerheader">
            
            <header>
                <div id="top">
                    <div class="container">
                        <div class="row">
                            <div id="topmenu" class=" six columns">
                                [.. containes all menu's list items and sub lists ..]
                            </div>
                            <div id="topright" class="six columns">
                                <div class="language"> 
                                    [.. containes laguage icon ..]
                                </div>
                                <div class="currency">[.. containes currency ..]</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="logo-wrapper">
                    <div class="container">
                        <div class="row">
                            <div id="logo" class="six columns">
                                [.. contains an anchor tag for the logo link ..]
                                <span class="desc">[.. contains description for the website ..]</span>
                            </div>
                            <div class="right six columns">
                                [.. contains search form ..]
                            
                                <div id="shopping-cart-wrapper">
                                    <div id="shopping_cart">[.. contains an anchor tag for the shopping cart..]</div>
                                </div>
                                <div class="clear"></div> 
                                <div class="login">[.. containes login and register link ..]</div>
                            
                            </div>
                        </div>
                    </div>
                </div>
                
                <section id="navigation">
                    <div class="container">
                        <div class="row">
                            <nav id="nav-wrap" class="twelve columns">
                                [.. containes all menu's list items and sub lists ..]
                            </nav><!-- nav --> 
                        </div>
                    </div>
                </section>
                
                <div class="clear"></div>
            </header> 
            
            </div>
            <!-- END HEADER -->
            
            <!-- MAIN CONTENT -->
            <div id="outermain">
                <div class="container">
                    <div class="row">
                    
                        <section id="maincontent" class="ten columns positionleft">
                            <div class="padcontent">
                        
                                <section class="content">
                            
                                    <div class="breadcrumb">[.. contains the breadcrumb ..]</div>
                                    <h1 class="pagetitle">[.. contains the page title ..]</h1>
                                    
                                    [.. contains the content information..] 
                                </section>
                            
                            </div>
                        </section>
                    
                        <aside class="two columns">
                            <div class="sidebar">
                                [.. containes sidebar widgets ..]
                            </div>
                        </aside>
                    
                    </div>
                </div>
            </div>
            <!-- END MAIN CONTENT -->
            
            <!-- FOOTER -->
            <footer id="footer">
                <div id="carousel"  class="es-carousel-wrapper">
                    <div class="es-carousel">
                        [.. contains sponsor logo ..]
                    </div>
                    <div class="clear"></div>
                </div>
                <!-- FOOTER SIDEBAR -->
                <div id="outerfootersidebar">
                <div class="container">
                    <div id="footersidebar" class="row"> 
                        <div id="footcol1"  class="one_fifth columns">
                            [.. contains footer sidebar 1 ..]
                        </div>
                        <div id="footcol2"  class="one_fifth columns">
                            [.. contains footer sidebar 2 ..]
                        </div>
                        <div id="footcol3"  class="one_fifth columns">
                            [.. contains footer sidebar 3 ..]
                        </div>
                        <div id="footcol4"  class="one_fifth columns">
                            [.. contains footer sidebar 4 ..]
                        </div>
                        <div id="footcol5"  class="one_fifth columns">
                            [.. contains footer sidebar 5 ..]
                        </div>
                        <div class="clear"></div>
                    
                    </div>
                </div>
                </div>
                <!-- END FOOTER SIDEBAR -->
                
                <!-- COPYRIGHT -->
                <div id="outercopyright">
                    <div class="container">
                        <div id="copyright">
                            [.. contains copyright ..]
                        </div>
                        <ul class="sn">
                            [.. contains social icon ..]
                        </ul> 
                    </div>
                </div>
                <!-- END COPYRIGHT -->
            </footer>
            <!-- END FOOTER -->
            <div class="clear"></div><!-- clear float --> 
        </div><!-- end outercontainer -->
    </div>

  
    <!-- Javascript
    ================================================== -->
    <!-- Javascript Code here -->

</body>
</html>
        

B) Template Components - top

1) Slider - top

The home page slider powered by Layer Slider . The slider code is placed after the navigation. Please stick to the original size otherwise it may result in layout errors.

jQuery Layer Slider

Replace the [.. the slider items ..] with the slider items

<div id="layerslider" class="slideritems">
    [.. the slider items ..]
</div>

the slider items

<div class="ls-layer" id="ls-layer-1" data-rel="slidedelay: 3000;delayout: 750;">
    <img class="ls-s2" id="ls-s2-1" src="[.. full url to the slide image (free size) ..]" alt="sample-1" title="New Arrival for Electronics" style="durationin: 2000; easingin: easeOutExpo; slidedirection: bottom; delayin: 1000" />
    <h3 class="ls-s3" id="ls-s3-1" data-rel="durationin: 2000; delayin:1000; easingin: easeOutElastic; slidedirection: bottom;">
    <a href="#" title="New Arrival for Electronics">[.. Slider Title ..]</a>
    </h3>
    <div class="slidedesc ls-s4" id="ls-s4-1" data-rel="durationin: 2000; delayin:500; slidedirection: top;">[.. Slider Text ..]</div>
</div>


2) Portfolio - top

The portfolio image for thumb must be 400px × 229px . Please stick to the original size otherwise it may result in layout errors.

Replace the [.. Portfolio Items ..] with the portfolio content

<div id="frame-filter">
    <ul id="filter">
        <li class="current"><a href="#" data-filter="*">All Categories</a></li>
        <li><a href="#" data-filter="[.. portfolio-category ..]">[.. portfolio-category ..]</a></li>
    </ul>
    <div class="clear"></div>
</div> 

<div id="ts-display" class="row">
    [.. Portfolio Items ..]
</div>

Portfolio content

<div class="one_fifth columns item [.. portfolio-category ..]">
    <div class="ts-display-pf-img">
        <a class="image" href="[.. full path to image popup, size you want ..]" data-rel="prettyPhoto[mixed]" >
            <span class="rollover">[.. Portfolio text ..]</span>
            <img src="[.. full path to image thumbnail ..]" alt=""/>
        </a> 
    </div>
</div>


3) Blog Layout - top

a) Blog Page - top

To add a blog page, in the content div add the code below and fill it in with the desired content. Please remain the ids and classes names as it is and stick to the right image size to save the look and the layout. Copy/Paste the code to add more posts

Replace the [.. content ..] with the blog post code

	<section id="maincontent" class="ten columns positionleft">
        <div class="padcontent">
            <section class="content">
                [.. contains the blog post ..]
                <div class="clear"></div>
            </section>
        </div>
    </section>
    
    <aside class="two columns">
        <div class="sidebar">
            [.. contains sidebar widgets ..]
        </div>
    </aside>

The blog post code

<article class="post">
    <div class=" row">
        <div class="postimg five columns">
        	<img alt="" src="[.. post thumbnail url ..]">
        </div>
        <div class="seven columns">
            <div class="entry-content">
                <div class="entry-utility">
                    [.. post utility ..]
                </div>
                <h2 class="posttitle"><a href="[.. post permalink ..]">[.. post title ..]</a></h2>
                
                <p>[.. post content ..]</p>
                
                <a class="button" href="[.. post permalink ..]">Read More</a>
            </div>
        </div>
    </div> 
    <div class="clear"></div>
</article>

 


C) CSS Files and Structure - top

These are the css files:

  1. inner.css (The css is used for styling the inner page.)
  2. color.css (The css is used for styling the color.)
  3. layout.css (The css is used for styling the responsive layout)
  4. prettyPhoto.css (The css is used for styling the prettyPhoto lightbox. )
  5. flexslider.css (The css is used for styling jquery flexslider )
  6. style.css (used for all pages, this is the general css file.)
  7. layerslider.css (The css is used for styling jQuery Layerslider)

 


D) JavaScript - top

This theme use these Javascript files:

  1. jQuery
    jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:
                	contact.js
                    superfish.js
                    hoverIntent.js
                    supersubs.js
                    jquery.flexslider-min.js
                    jquery-easing-1.3.js
                    fade.js
                    jquery-1.7.1.min.js
                    jquery.prettyPhoto.js
                    tinynav.min.js
                    custom.js
                    layerslider.js
                    jquery.isotope.min.js
                    jquery.elastislide.js
                
    You can edit the contact.js files. for setting contact form


E) PSD Files - top

There are PSDs inside the "psd/" folder.


F) Sources and Credits - top


G) PHP Code Explanation - top

There are only one php code for contact page which is process.php, open this file and change the email and subject on line 2 and line 6. No need to edit other code unless you really want to.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

TemplateSquare

Go To Table of Contents