FOCPRESS

Complete Documentation

Thank you very much for purchasing from Focpress!

If you have any issue or question that this document does not cover, you can contact us via email kiwolhubpages@gmail.com.

Template Installation

You can run this site template by uploading and extracting the .zip file into your server, without the need to install a database. Only /html folder you need to upload to the server.

Template Content & Code

You can change the content of this template by looking at the following tutorial :

Steps:
  1. Extract the .zip file.
  2. Open the /html folder.
  3. And then open the index.html file with your code editor.

Code you must edit:

Head


line 9: Change with your site name title, line 11: change the content tag with your company description text, line 12 change the content tag with related keyword about your company, line 13 change the content tag with your name.

	<!-- Your Basic Site Informations -->
	<title>Focpress App Builder Landing Page</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="description" content="...." />
    <meta name="keywords" content="...." />
    <meta name="author" content="Focpress" />
   

Top


line 56: Change with your company logo (you can insert with image or text).

	<!-- Logo -->
    <div class="two-thirds column top_left">
     <h1>Focpress</h1>
    </div>
   

line 65: Change with your app preview image.

    <!-- Left -->
    <div class="one-third column left">
     <img src="imgs/app_preview.png" alt="App Preview" />
    </div>
   

line 70-73: Change with your app preview image.

    <!-- Right -->
    <div class="two-thirds column right">
     <h2 class="one">We only Build</h2>
     <h2 class="two">The Best Apps!</h2>
     <p>....</p>
     <p><a href="#" class="button">Check them out!</a></p>
    </div>
   

Slider


line 87-140: Our preview product list items (I set for 9 preview products), one highlight 1 product.

    <div class="flexslider" id="worksSlider">
   
    <ul class="slides">
     <li class="one-third column item">
      <a href="imgs/screenshoots/full/preview_1.jpg" data-rel="ourWorks" >
       <img src="imgs/screenshoots/thumb/preview_1.jpg" alt="Our Work 1" title="Our Work 1">
       <span class="zoom"></span>
      </a>
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ....
     </li>
     <li class="one-third column item">
      ...
     </li>
    </ul>
    
   </div> 
   

Tips: You can learn more detail about Flexslider, in http://woothemes.com/flexslider. You can upload your preview products images in /html/imgs/screenshoots folder. The thumb folder for thumbnail images (must: 300x250 pixels) and the full folder for full image previews. Better if you upload in .jpg type.

Nav Menu


line 156-159: Contains list of main navigation menu.

    <nav class="nav_menu">
 
     <div class="container">
   
      <ul>
       <li class=""><a href="#features">Features</a></li>
       <li class=""><a href="#teams">Our Teams</a></li>
       <li class=""><a href="#testimonials">Testimonials</a></li>
       <li class=""><a href="#contact">Contact Us</a></li>
      </ul>
  
     </div> <!-- End Container -->
 
    </nav> <!-- End Nav Menu -->
   

Main


line 175-235: Features and advantages list about your services or apps (I set for 8 features), one highlight 1 feature.

    <div class="features" id="features">
  
     <div class="sixteen columns head">
      <h2>Features</h2>
      <p>....</strong></p>
     </div>
  
     <!-- Col 1 -->
     <div class="eight columns item">
      <h3>Cross Browser</h3> 
      <img src="imgs/icons/world.png" alt="Cross">
      <p>....</p>
     </div>
   
     <!-- Col 2 -->
     <div class="eight columns item">
      ....
     </div>
   
     <div class="sepSection"><!-- --></div> <!-- Separator -->
   
     <!-- Col 3 -->
     <div class="eight columns item">
      ....
     </div>
   
     <!-- Col 4 -->
     <div class="eight columns item">
      ....
     </div>
   
     <div class="sepSection"><!-- --></div> <!-- Separator -->
   
     <!-- Col 5 -->
     <div class="eight columns item">
      ....
     </div>
   
     <!-- Col 6 -->
     <div class="eight columns item">
      ....
     </div>
   
     <div class="sepSection"><!-- --></div> <!-- Separator -->
   
     <!-- Col 7 -->
     <div class="eight columns item">
      ....
     </div>
   
     <!-- Col 8 -->
     <div class="eight columns item">
      ....
     </div>
 
    </div> <!-- End Features -->
   

Tips: I recommend you use features icon pack in /html/imgs/icons folder. If you want to upload your features icon self, I recommend you upload in .png type.

line 246-338: Our team list and details (I set for 4 profile teams), one highlight 1 profile.

    <div class="teams" id="teams">
   
     <div class="sixteen columns head">
      <h2>Our Team Works</h2>
      <p>....</strong></p>
     </div>
   
     <!-- Col 1 -->
     <div class="eight columns profile">
   
      <div class="photo">
       <img src="imgs/profiles/profile_1.jpg" alt="Mugiwara Kiwolen" />
       <div class="social">
        <ul>
         ....
        </ul>
       </div>
      </div>
      <div class="desc">
       <h5>Mugiwara Kiwolen</h5>
       <h6>Founder & CEO</h6>
       <p>....</p>
       <p>Email: <a href="#">mail@domain.com</a></p>
      </div>
    
     </div>
   
     <!-- Col 2 -->
     <div class="eight columns profile">
      ....
     </div>
   
     <div class="sepSection"><!-- --></div> <!-- Separator -->
   
     <!-- Col 3 -->
     <div class="eight columns profile">
      ....
     </div>
   
     <!-- Col 4 -->
     <div class="eight columns profile">
      ....
     </div>
  
    </div> <!-- End Our Teams -->
   

Tips: I recommend you to upload your team profile pictures in /html/imgs/profiles folder. Better if you upload in .jpg type and with size of 200x200 pixels.

line 352-372: Change with testimonials about your apps (I set for 3 testimonials text), one highlight 1 testimonials.

    <div class="testimonials" id="testimonials">
   
     <div class="sixteen columns head">
      <h2>Testimonials</h2>
      <p>....</strong></p>
     </div>
   
     <div class="sixteen columns flexslider" id="testimonialsSlider">
   
      <ul class="slides">
       <li>
        <div class="base_text">
         <p>....</p>
        </div>
        <div class="arrow_down"><!-- --></div>
        <div class="name">Monkey D. Kiwol, Founder & CEO Focpress.</div>
       </li>
       <li>
        ....
       </li>
       <li>
        ....
       </li>
      </ul>
    
     </div> <!-- End Flexslider -->
   
    </div> <!-- End Testimonials -->
   

line 383: Contact us header text.

    <div class="sixteen columns head">
     <h2>Contact Us</h2>
     <p>....</p>
    </div>
   

line 407-421: Change with more details information about your contact info, (I set for 2 more details contact information), one highlight 1 information.

    <div class="eight columns details">
   
     <div class="additional">
      <img src="imgs/icons/email.png" alt="Email" />
      <div class="desc">
       <label>Email:</label>
       <p><a href="#">email@domain.com</a></p>
      </div>
     </div>
     
     <div class="additional">
      ....
     </div>
    
    <!-- Social -->
   

line 427-434: Change with your own social media url.

    <!-- Social -->
    <div class="social">
     <p>You also can follow us on the social networks.</p>
     <ul>
      ....
     </ul>
    </div>
   

Tips: I recommend you use social media icon pack in /html/imgs/social folder. If you want to upload your social media icon self, I recommend you upload in .png type.

Copyright


line 487: Change with your site or company copyright.

    <!-- Footer Copyright -->
    <footer class="copyright">© 2012 by Focpress, All rights reserved.</footer>
   

font-face (CSS3)

You can change font-face with Google WebFonts. Find all fonts list on : http://www.google.com/webfonts

PHP Integration

This template also use the PHP engine for activate the subcribe and contact us proses. All data about registered subcribers saved in /html/data. I use XML data format as a substitute for MySQL because I don't use any database. Your localhost or server must support with SimpleXMLElement to run this function.

But for contact us data direct send to your email address, so you can edit your email address in message.php file.

    $my_email	= "youremail@domain.com"; // Your email address
   

/html/data/subcribers.xml
Contains all data about registered subcriber (the data used in XML format).

Twitter Integration:

To change the twitter username with your own, you can change $twitteruser variable value with your twitter id (in includes/get-tweets.php file):

    $twitteruser		= "envato"; // Change with your twitter username