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. You can get more update documentation here.

Table of Contents

  1. Template Installation
  2. HTML Structure
  3. CSS Files and Structure
  4. Slider Settings
  5. Page Templates
  6. Scripts
  7. PHP Integration
  8. Photoshop Files

Template Installation

You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

The exception is the contact form which functions based on the PHP coding language and requires a server to send messages.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
  2. Select /html folder, and then you will have several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload; css, images, and js.
  3. Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
  4. Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.
  5. Once the files are done uploading, you can try access your website via browser.

HTML Structure

This site template has a fixed layout with a variation of column layouts depending on the page. This template uses the 960 grid system (16 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 960 grid system, be sure to read about it here.

The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 16 columns in length. For example, the 'logo' div has a class of 'ten columns' and the 'form' div to the right of it has a class of 'six columns'. The total columns equals 16 columns.

	<header class="container">
  
     <div class="ten columns logo">
      <a href="index.html"><img src="images/logo.png" alt="Focpress" title="Magz Press" /></a>
     </div> <!-- End Logo -->
   
     <div class="six columns form">
    
      <!-- Top Links -->
      <ul class="top_links">
       ....
      </ul>
    
      <!-- Search Form -->
      <form method="post" action="#">
       ....
      </form>
    
     </div> <!-- End Form -->
   
    </header> <!-- End Header -->
   

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following in layout.css :

    .logo {
		margin-top:5px;
	}
   

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

    .top .logo {
		margin-top:5px;
	}
   

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

Single Photo Gallery

You can make a single photo gallery (like in single_photo.html) with use this code:

    <div class="single margin-top30"> 
    
    <div id="flex3" class="flexslider">
     <ul class="slides">
      <li><img src="...." alt="...." /></li>
      ....
     </ul>
    </div>
            
    <div id="carousel" class="flexslider carousel">
     <ul class="slides">
      <li><img src="...." alt="...." /></li>
      ....
     </ul>
    </div>
   

Menu Tabs

You can make a menu tabs (like in features_styles.html) with use this code:

    <ul class="tabs">					
     <li><a class="active" href="#tab-1">Tab 1</a></li>
     <li><a href="#tab-2">Tab 2</a></li>
     <li><a href="#tab-3">Tab 3</a></li>				
    </ul>
                                
    <ul class="tabs-content">
     <li class="active" id="tab-1">
      <ul>
       <li>....</li>
      </ul>
     </li>
     <li id="tab-2">
      <ul>
       <li>....</li>
      </ul>
     </li>
     <li id="tab-3">
      <ul>
       <li>....</li>
      </ul>
     </li>
    </ul>
   

Accordion Tabs

You can make a accordion tabs (like in features_styles.html) with use this code:

    <dl class="accordion">

     <dt><a href="#">Panel 1</a></dt>
     <dd>....</dd>
     <dt><a href="#">Panel 2</a></dt>
     <dd>....</dd>
     <dt><a href="#">Panel 3</a></dt>
     <dd>....</dd>
    
    </dl>
   

CSS Files and Structure

I'm using one main CSS file (layout.css) in this template which you are free to modify depending on the customization you require. There are also six additional style sheets that I do not recommend changing. Those style sheets reside in the 'CSS' folder. The six additional style sheets are:

The main CSS file contains all of the specific stylings for the page. The file is separated into sections using:

    /* #Site Styles
	================================================== */
    
    Main CSS styles are here
    
    /* #Top
	================================================== */
 
    CSS styles for the header are here
     
    /* #Navigation
	================================================== */
        
    CSS styles for the navigation are here
    
    /* #Main
	================================================== */
    
    CSS styles for main page (like posts, single post, slider) are here
        
    /* #Sidebar
    ================================================== */
        
    CSS styles for the sidebar are here
    
    /* #Footer
    ================================================== */
    
    CSS styles for the footer are here
    
    /* #Bottom
    ================================================== */
    
    CSS styles for the bottom are here
   

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

You can see the complete lists feature of this site template in features_column.html, features_styles.html, features_typography.html files. You can use this files to view complete lists of the shortcodes.

Slider Settings

This template comes with Flexslider. This slider use jquery settings are located in the /js/main.js as seen below:

    // jQuery main slider function
	$('#flex1').flexslider({
      animation: "fade",
	  directionNav: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
	
	// jQuery main2 slider function
	$('#flex2').flexslider({
      animation: "slide",
	  controlNav: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
	
	// jQuery photo gallery thumbs function
	$('#carousel').flexslider({
		animation: "slide",
		directionNav: false,
		controlNav: true,
		animationLoop: false,
		slideshow: false,
		itemWidth: 100,
		itemMargin: 5,
		asNavFor: '#flex3'
	});
	
	// jQuery photo gallery preview image function
	$('#flex3').flexslider({
		animation: "fade",
		directionNav: false,
		controlNav: false,
		animationLoop: false,
		slideshow: false,
		sync: "#carousel"
	});
   

The content slider options can be changed easily within the jquery function above.

Page Templates

This template contains several pages as you can see below :

  1. index.html - Site main template
  2. index2.html - Site main template with custom slider content
  3. blog_news.html - This file use for generate the latest news
  4. blog_photo.html - This file use for generate the latest photo
  5. blog_video.html - This file use for generate the latest video
  6. single_blog.html - Show the single news in one page
  7. single_photo.html - Show the single photo in one page + photo gallery
  8. single_video.html - Show the single video in one page
  9. contact.html - This file use for contact form or contact info details
  10. teams.html - Contains all team works information
  11. author.html - Contains single team detail information
  12. 404.html - Generate the not-found page
  13. features_column.html - Show the column features
  14. features_typography.html - Show the typography features and details
  15. features_styles.html - Show the content styles features and details

Scripts

This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.

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 contact.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
   

Photoshop Files

The following Photoshop files are included with the download package:

  1. 01_home_one.psd - Design for main template
  2. 02_home_two.psd - Design for main template with custom slider content
  3. 03_category_blog.psd - Design for generate the latest news
  4. 04_category_photo.psd - Design for generate the latest photo
  5. 05_category_video.psd - Design for generate the latest video
  6. 06_single_blog.psd - Design for single news in one page
  7. 07_single_photo.psd - Design for single photo in one page + photo gallery
  8. 08_single_video.psd - Design for single video in one page
  9. 09_team.psd - Design for contact form or contact info details
  10. 10_author.psd - Design for all team works information
  11. 11_contact.psd - Design for single team detail information
  12. 12_404.psd - Design for the not-found page
  13. 13_features_column.psd - Design for column features
  14. 14_features_typography.psd - Design for typography features and details
  15. 15_features_style.psd - Design for styles features and details

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. Please contact me via my author contact form. I'll do my best to assist!