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. In this folder consists of three folders, namely blue, gray and red. If you want to use a gray color template, you can simply upload a /gray folder to your 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. In this folder consists of three folders, namely blue, gray and red. If you want to use a gray color template, you can simply upload a /gray folder to your server.
  4. And then open the index.html file with your code editor.

Code you must edit:

Head


line 6: Change with your site name title, line 8 change the content attribute with your company description text, line 9 change the content attribute with related keyword about your company, line 10 change the content attribute with your name.

	<!-- Your Basic Site Informations -->
	<title>Focpress Under Construction</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" />
   

JavaScript


line 40 use to set end date for countdown (ex: 01/01/2015). Then line 44 to set percentage value for process bar (ex: 70).

    <!-- Javascripts Main Settings Set -->
    <script type="text/javascript">
	var username = 'google';
	
	$(document).ready(function(){
		date 		= new Date("01/01/2015"); // countdown end date set
		$('#baseCountCenter').countdown({until: date});
		
		$('#mainBaseBottom #baseProcessBar #baseBar .bar').percentageBar({
		percentage: 70, // percentage value
      	barWidth: 807, // maximum bar width
      	easing: 'easeOutBounce' // easing    
   	});
	});
	</script>
   

Top


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

	<div class="centerSection">
    		<a href="index.html" title="...." class="logo fl"><img src="img/logo.png" alt="...." /></a>
   

line 62: Change with your phone number (top contact info). And line 65 change with your email address (top contact info). Then line 72-77 change with your own social media urls (top contact info).

	<div id="contactInformationTop" class="fr">
        <ul>
            <li>
            	<p>Phone: <span>+627893749079</span></p>
            </li>
            <li>
            	<p>Email: <a href="mailto:info@focpress.com" title="....">info@focpress.com</a></p>
            </li>
            <li class="noBorderBottom">
                <p class="fl">Follow Us:</p>
                                        
                <!-- Social bar -->
                <ul class="fl" id="socialBar">
                	....
                </ul>
            </li>
        </ul>
	</div> <!-- end contactInformationTop -->
   

Main Base


line 94-95: Set the main title text.

    <div id="textTop">
		<h1>....</h1>
		<h3>....</h3>
	</div>
   

Bottom


line 130: Change with description about your site or company. And line 133-135 fill with more contact details about your site or company.

    <div class="footerCol">
		<h4>About Us</h4>
                
		<p>....</p>
				
		<ul id="aboutUsList">
			<li>85 Washington Ave., Suite 45, CA, USA</li>
			<li>Phone: +627893749079</li>
			<li>Email: <a href="mailto:info@focpress.com" title="....">info@focpress.com</a></li>
		</ul>
	</div> <!-- end footerCol -->
   

Footer


line 162: Change with your site or company copyright. And line 165-170 change with your own social media urls.

    <!-- Footer Copyright Section -->
	<div id="footerCopyrightSection">
		<div class="centerSection">
			<p class="fl">© Copyright 2012 Focpress. All rights reserved.</p>
			
			<ul class="fr">
				....
			</ul>
		</div> <!-- end centerContainer -->
	</div> <!-- end footerCopyrightSection -->
   

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 /fonts folder.

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
   

Data Saved

All data about guest messages saved in /data folder. 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.

/data/messages.xml
Contains all messages from visitors who use the contact us form (the data used in XML format).