Appreative Responsive Landing Page Template

One Page App Template

Created: 10/31/2013
By: Saptarang
View My Profile: GraphicRiver | Themeforest

What is this?

This documentation is created to help/assist in the customization of the html template offered in this download. I've tried to cover all the points that I could think of that'll help you. If you have more questions or issues regarding this template, please send me a message through my ThemeForest Profile Page and I'll try to get in touch with you as soon as possible. Certain modifications may need extra work that'll be charged for an extra fee depending on the task and the time that'll be required to do the work.

Thank You for downloading this template. I hope you like it :) and Do Not Forget to rate this file which I will accept as a token of appreciation!

Features

One Page Template
HTML 5 & CSS3
jQuery/AJAX
Twitter Bootstrap Framework
Responsive Layout
Smooth Page Scrolling
CSS3 Effects
PrettyPhoto Lightbox
Simple Ajax Contact Form
Extreemely Easy Color Customization
Modern Browsers Compliant
Easy to Work with.
PSDs Provided.

The Basic Layout Structure

The layout is organized in a simple manner as follows:

<!--BEGIN-HEADER-FEATURES-SECTION-->
<section id="home" class="page-block">
    <header id="top">
          Logo and Navigation goes here
    </header>
    <!--BEGIN-PHONE-FEATURES-->
      <div class="container">
            Phone Image and feature boxes goes here
      </div>
    <!--END-OF-PHONE-FEATURES-->
</section>
<!--END-OF-HEADER-FEATURES-SECTION-->

<!--BEGIN-GET-IT-NOW-->
<section id="GetItNow" class="page-block">
		<div class="container">
        Buttons Goes here
     </div>
</section>
<!--END-OF-GET-IT-NOW-->

<!--BEGIN-FEATURES-BOX-->
<section id="features" class="page-block">
    <div class="container">
        Features Goes here
    </div>
</section>
<!--END-OF-FEATURES-BOX-->

<!--BEGIN-APP-INFO-->
<section id="appInfo" class="page-block">
    <div class="container">
		<!--BEGIN-HORIZONTAL-TABS-->
		  <div id="hTabs">
			Tabs Content Here
		  </div>
		<!--END-OF-HORIZONTAL-TABS-->
		<!--BEGIN-VERTICAL-TABS-->
		  <div id="vTabs">
		    Tabs Content Here
		  </div>
		<!--END-OF-VERTICAL-TABS-->
    </div>
</section>
<!--END-OF-APP-INFO-->

<!--BEGIN-FAQ-->
<section id="FAQ" class="page-block">
    <div class="container">
        Accordian Content Goes here
    </div>
</section>
<!--END-OF-FAQ-->

<!--BEGIN-GALLERY-->
<section id="gallery" class="page-block">
    <div class="container">
        Images Goes here
    </div>
</section>
<!--END-OF-GALLERY-->

<!--BEGIN-QUOTES-->
<section id="quotes" class="page-block">
    <div class="container">
        Quote Slider Goes here
    </div>
</section>
<!--END-OF-QUOTES-->

<!--BEGIN-NEWSLETTER-FORM-AND-SOCIAL-->
<section id="subscribe" class="page-block">
    <div class="container">
        Newsletter and social icons section here
    </div>
</section>
<!--END-OF--NEWSLETTER-FORM-AND-SOCIAL-->

<!--BEGIN-ABOUT-->
<section id="about" class="page-block">
    <div class="container">
        About Content here
    </div>
</section>
<!--END-OF-ABOUT-->

<!--BEGIN-PRICING-->
<section id="pricing" class="page-block">
    <div class="container">
        Pricing Tables here
    </div>
</section>
<!--END-OF-PRICING-->

<!--BEGIN-MORE-APPS-->
<section id="more-apps" class="page-block">
    <div class="container">
        Pricing Tables here
    </div>
</section>
<!--END-OF-MORE-APPS-->

<!--BEGIN-CONTACT-->
<section id="contact" class="page-block">
		<!--GOOGLE_MAP_iframe HERE-->
		<iframe></iframe>
     <div class="container">
          Contact Form and Detail Information goes here
     </div>
</section>
<!--END-OF-CONTACT-->

<!--BEGIN-COPYRIGHT-->
  <footer id="copyright" class="page-block">
        <div class="container">
        <div>
  </footer>
<!--END-OF-COPYRIGHT-->

Customizable Options

It's really simple.

Changing Colors & Other

This template is built in such a way that you can just make edits in a single file and the colors can be applied to all associative elements in the template.
Changing the pop/main color and other options: Go to > Js(directory) > Open Custom.js file.
- Global Options: In this section you can edit site's main color and your website's heading font as well as body content font for your website.
  Please refer the section below for working with Google Web Fonts.
- Contact Options: In this section you can edit following:
  - submitMessage: This is the success title to display after submitting the form successfully.
  - successParagraph: This is the message to display after submitting the form successfully.
  - successBoxColor: This is the color of the success message box after submitting the form successfully.
  - successBoxBorderStyle: The border style of the success message box i.e. Dashed, Solid, Dotted, Double
  - successBox_Border_Color: This is the Border color of the success message box.
  - textColor: This is the text color of the success message.
If you want to override any styles for the color changes (affected by GLOBAL option in custom.js), then please enable the override.css in <head> and then define your styles in there.

How To Use Google Web Font?

There are two important code snippets you need to replace the google font for your website. Please follow the steps below.

Go To: Google Web Fonts
Follow these steps:

Code Snippets

It's really simple. Just copy the code from here and paste in your template wherever you need it to be and start editing the content with your real content.

2 Columns

    <!--BEGIN-TWO-COLUMNS-->
    <div class="row-fluid">
        <div class="span6">
           Column One
        </div><!--end-of-column-one-->
        <div class="span6">
           Column Two
        </div><!--end-of-column-two-->
    </div>
    <!--END-OF-TWO-COLUMNS-->

3 Columns

    <!--BEGIN-THREE-COLUMNS-->
    <div class="row-fluid">
        <div class="span4">
           Column One
        </div><!--end-of-column-one-->
        <div class="span4">
           Column Two
        </div><!--end-of-column-two-->
        <div class="span4">
           Column Three
        </div><!--end-of-column-three-->
    </div>
    <!--END-OF-THREE-COLUMNS-->

4 Columns

    <!--BEGIN-FOUR-COLUMNS-->
    <div class="row-fluid">
        <div class="span3">
           Column One
        </div><!--end-of-column-one-->
        <div class="span3">
           Column Two
        </div><!--end-of-column-two-->
        <div class="span3">
           Column Three
        </div><!--end-of-column-three-->
        <div class="span3">
           Column Four
        </div><!--end-of-column-four-->
    </div>
    <!--END-OF-FOUR-COLUMNS-->

Tabs

  <!--BEGIN-HORIZONTAL-TABS-->
  
  <div id="hTabs">
      <ul class="nav nav-tabs" id="myHTab">
          <li class="active"><a href="#your-div-id-1"><i class="fa fa-info-circle"></i> <span>How To Use</span></a></li>
          <li><a href="#your-div-id-2"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
          <li><a href="#your-div-id-3"><i class="fa fa-check-circle"></i><span> Installation</span></a></li>
          <li><a href="#your-div-id-4"><i class="fa fa-question-circle"></i> <span>Support</span></a></li>
     </ul>
   
     <div class="tab-content">
          <div class="tab-pane active" id="your-div-id-1">
              Your content goes here...
          </div> <!--end-of-tab-pane-->
          
          <div class="tab-pane" id="your-div-id-2">
              Your content goes here...
          </div> <!--end-of-tab-pane-->
          
          <div class="tab-pane" id="your-div-id-3">
              Your content goes here...
          </div> <!--end-of-tab-pane-->
          
          <div class="tab-pane" id="your-div-id-4">
              Your content goes here...
          </div> <!--end-of-tab-pane-->
     </div> <!--end-of-tab-content-->
  </div> <!--end-of-hTabs-->
    
  <!--END-OF-HORIZONTAL-TABS-->

Accordion E.g. FAQ

<div class="accordion" id="accordion">
    <!--BEGIN-Q1-->
    <div class="accordion-group">
        <div class="accordion-heading active_accord">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          your question here?
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
              Your content goes here...
          </div>
        </div>
    </div>
    <!--END-OF-Q1-->
    <!--BEGIN-Q2-->
    <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
           your question here?
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
              Your content goes here...
          </div>
        </div>
    </div>
    <!--END-OF-Q2-->
</div><!--end-of-accordion-->

Contact Mail Options

You can edit following options in the contact form. Go to template directory > Form and open contact.php Under EDITABLE OPTIONS set the following:

$receiving_email_address: This is the email address where you want to receive emails submitted via contact form.
$receiving_email_address_name: This is the name i.e. associated with your email address account.
$custom_subject: This is the subject line for the requests submitted via contact form.

PSDs Included

Following PSDS are given in Download file

PSD for each Dark and Light Option
PSD for adding your APP screenshot in smart phone. Open smart object from psd and place your screenshot. Layered PSD for smart phone not provided but you can download from link given in Credit section.
PSD for Gallery thumbnail
PSD for About images
PSD for hedaer background (Light Version)

Below is the basic smart object editing in Photoshop. You can follow the same process for working with Smart Objects in Photoshop.

Basic Ps Editing

Using Font Awesome

Font Awesome gives you more than 300 scalable vector icons.

Choose your icon here: Link and click on that icon to get the code
Here are examples to resize, rotate icons: Link
To use Font Awesome with Photoshop follow this Tutorial: Link

Source & Credits

Thanks so much to

Twitter Bootstrap 2.3.2
jQuery By jQuery Foundation, Inc.
Pixel Perfect Icons By: FontAwesome & IconSweets2
Free Font: Roboto Slab & Bree Serif
PrettyPhoto Lightbox Plugin by STÉPHANE CARON
Smart Phone Image By: Pixeden

Thank You for purchasing this item.

Happy Editing! :)