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.
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.
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="two-thirds column logo">
<a href="index.html"><img src="images/logo.png" alt="Focpress" title="Focporto" /></a>
</div> <!-- End Logo -->
<div class="one-third column top_info">
<div class="icon home-ico">....</div>
....
</div> <!-- End Top Info -->
</header> <!-- End Container -->
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:40px 0px 30px 0px;
}
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.
#header .logo {
margin:40px 0px 30px 0px;
}
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.
You can make a pricing table with use this code:
<!-- Simple Pricing Table -->
<div class="pricing-table-simple">
<!-- Col 1 -->
<div class="four columns">
<div class="heading">
<h1></h1>
<h2><span></span> for month</h2>
<h6></h6>
</div>
<ul>
<li></li>
</ul>
<div class="footer">
<a href="#" class="button blue-btn">Sign Up</a>
</div>
</div>
<!-- Col 2 -->
<div class="four columns">
<div class="heading">
<h1></h1>
<h2><span>$99</span></h2>
<h6></h6>
</div>
<ul>
<li></li>
</ul>
<div class="footer">
<a href="#" class="button blue-btn">Sign Up</a>
</div>
</div>
</div>
<!-- Advanced Pricing Table -->
<div class="pricing-table-advanced">
<div class="three columns feature_lists">
<div class="heading"></div>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
<div class="footer"></div>
</div>
<div class="three columns">
<div class="heading">
<h1>Basic</h1>
<h2><span>$49</span>One time free</h2>
</div>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
<div class="footer">
<a href="#" class="button blue-btn">Sign Up</a>
</div>
</div>
<div class="four columns best">
<div class="heading">
<h1>Professional</h1>
<h2><span>$199</span>Plus monthly free</h2>
</div>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
<div class="footer">
<a href="#" class="button red-btn">Sign Up</a>
</div>
</div>
</div>
You can make a menu tabs with use this code:
<!-- Tabs Menu -->
<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul> <!-- End Tabs Menu -->
<!-- Tabs Content -->
<div class="tabs_content_base">
<div id="tab1" class="tab-content">....</div>
<div id="tab2" class="tab-content">....</div>
<div id="tab3" class="tab-content">....</div>
</div> <!-- End Tabs Content -->
You can make a accordion tabs with use this code:
<!-- Accordion -->
<div class="accordion-tab"><a href="#">Tab 1</a></div>
<div class="accordion-content">....</div>
<div class="accordion-tab first-tab active"><a href="#">Tab 2</a></div>
<div class="accordion-content">....</div>
<div class="accordion-tab"><a href="#">Tab 3</a></div>
<div class="accordion-content">....</div>
<div class="accordion-tab"><a href="#">Tab 4</a></div>
<div class="accordion-content">....</div>
<!-- End Accordion -->
You can make a photo gallery (like in single_portofolio.html) with use this code:
<div class="portofolio_preview">
<!-- Portofolio Gallery -->
<div id="portofolio_gallery" class="flexslider">
<ul class="slides">
<li><figure><img src="...." alt="...." /></figure></li>
....
</ul>
</div>
<!-- Portofolio Carousel -->
<div id="portofolio_carousel" class="flexslider carousel">
<ul class="slides">
<li><figure><img src="...." alt="...." /></figure></li>
....
</ul>
</div>
</div>
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
/* #Header
================================================== */
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
/* #Footer
================================================== */
CSS styles for the footer are here
/* #Bottom
================================================== */
CSS styles for the bottom are here
/* #Additional
================================================== */
CSS styles for the additional styling element are here
/* #Media Queries
================================================== */
CSS styles for support all device screen size 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.
This slider use jquery settings are located in the /js/main.js as seen below:
/* ========================= 1. Flexslider ========================= */
$('#slider1').flexslider({
animation: "fade",
directionNav: false,
animationLoop: true,
start: function(slider){
$('body').removeClass('loading');
}
});
/* ========================= 2. Nivo Slider ========================= */
$('#slider2').nivoSlider();
/* ========================= 3. CSlider ========================= */
$('#da-slider').cslider({
autoplay: true,
bgincrement: 450,
});
The content slider options can be changed easily within the jquery function above.
This template contains several pages as you can see below :
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.
Note: If you want change twitter username with your own to integrate with the latest tweets, you can change this code in /js/main.js:
screen_name: 'google', // Your twitter username
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).
The following Photoshop file are included with the download package place in /psd folder. This folder contains:
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!