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

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 :

  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:


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" />


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';
		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    


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">
            	<p>Phone: <span>+627893749079</span></p>
            	<p>Email: <a href="" title="...."></a></p>
            <li class="noBorderBottom">
                <p class="fl">Follow Us:</p>
                <!-- Social bar -->
                <ul class="fl" id="socialBar">
	</div> <!-- end contactInformationTop -->

Main Base

line 94-95: Set the main title text.

    <div id="textTop">


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>
		<ul id="aboutUsList">
			<li>85 Washington Ave., Suite 45, CA, USA</li>
			<li>Phone: +627893749079</li>
			<li>Email: <a href="" title="...."></a></li>
	</div> <!-- end footerCol -->


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">
		</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, 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.

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