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 Responsive Bussiness 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="...." />
   

Top


line 57-58: Change with your company name.

	<!-- Left -->
    <div class="two-thirds column top_left">
     <h1>FOCPRESS</h1>
     <h5>Responsive Bussiness Landing Page</h5>
    </div>
   

line 63-67: Change with your own social media url.

	<!-- Right -->
    <div class="one-third column top_right">
     ....
    </div>
   

Slider


line 84-121: Content & image slider (I set for 3 slides), one highlight 1 slide.

    <div class="flexslider">
   
     <ul class="slides">
   
      <li>
      <div class="nine columns left">
       <h2>Our Latest Product</h2>
       <p>Nulla dictum, libero vel hendrerit dictum, libero ipsum sodales quam, sit amet aliquam nulla risus ultricies elit. Curabitur accumsan, lectus consequat dignissim aliquet, ante magna tempus nisl, sit amet feugiat nisi urna ac massa.</p>
       <p>Donec dignissim leo sit amet nisl luctus vestibulum. Morbi tortor arcu, aliquet nec aliquet at, convallis ut eros. Sed non tellus mauris, vitae congue ante. Nunc imperdiet malesuada pharetra. Duis sodales, arcu tempus rutrum consectetur, sem ante auctor eros, in vehicula magna mauris sit amet est. Mauris ac eros arcu.      </p>
       <a href="#latestProduct" class="arrowLink button">See our latest product now</a>
      </div>
     
      <div class="seven columns right lastCol">
       <img src="imgs/slides/1.jpg" alt="Slide 1" />
      </div>
     </li>
    
     <li>
      ....
     </li>
    
     <li>
      ....
     </li>
    
    </ul> <!-- End Slides Image -->
   
    <ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul>
   
    </div> <!-- End Flexslider -->
   

Tips: You can learn more detail about Flexslider, in http://woothemes.com/flexslider. You can upload your image sliders in /html/imgs/slides folder. I recommend you to upload in .jpg type.

Main


line 137-138: Why you choose our services text.

	<!-- Why you choose text -->
    <div class="sixteen columns choose_us" id="productFeatures">
     <h4>Why you must choose our services ?</h4> 
     <p>Donec dignissim leo sit amet nisl luctus vestibulum. Morbi tortor arcu, aliquet nec aliquet at, convallis ut eros. Sed non tellus mauris, vitae congue ante. Nunc imperdiet malesuada pharetra.</p>
   
     <div class="sepSectionDouble"></div> <!-- Separator -->
   
    </div>
   

line: 147-179: Features and advantages list about your domain (I set for 6 features), one highlight 1 feature.

	<!-- Features List -->
    <div class="features_list">
  
     <div class="five columns">
      <img src="imgs/features/feature_1.png" alt="Cross">
      <h4>Cross browser compatibility</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitureget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</p>
     </div>
     <div class="five columns">
      <img src="imgs/features/feature_2.png" alt="Reporting">
      <h4>Round the clock reporting</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitureget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</p>
     </div>
     <div class="five columns lastCol">
      <img src="imgs/features/feature_3.png" alt="Easily">
      <h4>Easily affordable</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitureget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</p>
     </div>
   
     <div class="sepSection"></div> <!-- Separator -->
   
     ....
   
    </div>
   

Tips: I recommend you to upload your features icon in /html/imgs/features folder. The features icon must be in .png type.

line 188-255: Our team list and details (I set for 3 profile teams), one highlight 1 profile.

	<!-- Our Team -->
    <div class="our_team">
  
     <div class="five columns">
      <img src="imgs/profiles/no_profile.jpg" alt="Mugiwara Kiwolen">
      <div class="desc"> 
       <h5>Mugiwara Kiwolen</h5>
       <p>
        <span class="left">Position</span>
        <span class="right">Founder & CEO</span>
       </p>
       <p>
        <span class="left">Email</span>
        <span class="right"><a href="#">mail@domain.com</a></span>
       </p>
       <p>
        <span class="left">About</span>
        <span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitureget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</span>
       </p>
       <p>
        <span class="left">Web</span>
        <span class="right"><a href="#">Facebook</a> / <a href="#">Twitter</a> / <a href="#">Website</a></span>
       </p>
      </div>
     </div>
   
     ....
   
    </div>
   

Tips: I recommend you to upload your team profile pictures in /html/imgs/profiles folder. Better if you upload in .jpg type.

line 264-302: Our latest product list items (I set for 6 latest products), one highlight 1 product.

	<!-- Latest Work -->
    <div class="latest_work" >
  
     <div class="five columns item">
      <a href="imgs/products/full/1.jpg" data-rel="latestProduct" >
       <img src="imgs/products/thumb/1.jpg" alt="Latest Product 1" title="Latest Product 1">
       <span class="zoom"></span>
      </a>
     </div>
     <div class="five columns item">
      <a href="imgs/products/full/2.jpg" data-rel="latestProduct">
       <img src="imgs/products/thumb/2.jpg" alt="Latest Product 2" title="Latest Product 2">
       <span class="zoom"></span>
      </a>
     </div>
     <div class="five columns item lastCol">
      <a href="imgs/products/full/3.jpg" data-rel="latestProduct">
       <img src="imgs/products/thumb/3.jpg" alt="Latest Product 3" title="Latest Product 3">
       <span class="zoom"></span>
      </a>
     </div>
   
     <div class="sepSection"></div> <!-- Separator -->
   
     ....
  
    </div>
   

Tips: I recommend you to upload your features icon in /html/imgs/products folder. The thumb folder for thumbnail images and the full folder for full image previews. Better if you upload in .jpg type.

line 311-437: Plans & pricing tables of our product (I set for 4 tables), one highlight 1 table.

	<!-- Plans & Pricing -->
    <div class="pricing">
  
     <div class="four columns">
      <table>
       <thead>
        <tr>
         <th>Basic</th>
        </tr>
       </thead>
       <tfoot>
        <tr>
         <td><a href="#" class="button">Buy Now</a></td>
        </tr>
       </tfoot>
       <tbody>
        <tr>
         <td class="price_text">$49<span>per month</span></td>
        </tr>
        <tr>
         <td>
          <ul>
           <li>2 users per domain</li>
           <li>Automated backups</li>
           <li>Email support</li>
           <li>CMS ready</li>
           <li>1 GB hosting space</li>
           <li>Automated backups</li>
          </ul>
         </td>
        </tr>
       </tbody>
      </table>
     </div>
   
     <div class="four columns">
      ....
     </div>
   
     <div class="four columns">
      ....
     </div>
   
     <div class="four columns">
      ....
     </div>
  
    </div>
   

Bottom


line 480-484: Change with description about your company.

	<!-- About Us -->
     <div class="five columns about">
   
      <div class="header">
       <h4>About Us</h4>
      </div>
      ....
     </div>
   

Copyright


line 537: Change with your site or company copyright.

	<div class="copyright">	
     <footer class="container bottom">
  
      <div class="sixteen columns">
       <p>Copyright © 2012 <a href="#">Focpress</a>, All Rights Reserved.</p>
      </div>
   
     </footer>
    </div> <!-- End Copyright -->
   

font-face (CSS3)

If you want change the font with better style, you can download a free font package in http://www.fontsquirrel.com/fonts/bebas-neue, then choose the @font-face Kit tab and extract in /html/fonts folder.

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

Image Assets

  1. Features icon in /html/imgs/features folder. You must upload in .png file type.
  2. Latest products image in /html/imgs/products folder, /thumb folder for thumbnail image (recommend: 300x200 pixels) and /full folder for full image preview. I recommend you to upload in .jpg file type.
  3. Team profile pictures in /html/imgs/profiles folder. I recommend you to upload in .jpg file type (recommend: 300x160 pixels).
  4. Slide images content in /html/imgs/slides folder. I recommend you to upload in .jpg file type.
  5. Social media icon in /html/imgs/social folder. Better if you upload in .png file type with size of 64x64 pixels.

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