SmallBusiness - Business HTML Template - Help File

This awesome template uses most popular technologies for an awesome look and feel, and it all works in all major browsers.

Item Support via Mail

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. I will answer in max 24-48 hours due to the tons of mails I recieve. Thanks so much!

P.S. - Read the documentation before going nuts about "something not working!" :D

This templates is a HTML coded and Reposnive!


General Features

The general template features you get in this HTML powered template.

8 Template Versions for you to choose from.

9 Awesome Homepage Versions for you to play around

Pricing Table.You can use this awesome modern looking pricing table to show your pricing plans to your customers.

Filterable Portfolio to show your work in a modern dinamic way.Choose which one do you prefer and easily add categroy you want to filter and there you go.You can easily add your own layout like one column portfolio or two columns portfolio using the grid this templates has.

1 PSD files are included in download version.

    • Internet Explorer 8 (Some IE8 hacks will be included in the update)
    • Internet Explorer 9
    • Firefox 2
    • Firefox 3
    • Firefox 3.5
    • Firefox 3.6
    • Firefox 4
    • Firefox 5
    • Firefox 6
    • Firefox 7+
    • Safari 4
    • Safari 5
    • Opera
    • Chrome 4
    • Chrome 5
    • Chrome 6
    • Chrome 7+

So let's get this party started Here you can see how files are organized in each folder, how to use them, edit them, abuse them or whatever you want to do, not my business to wonder :D

Folders Organization

Here's a list of the folder within the download package.

Folder Name Description
HTML Here You will fin all 5 template version you can use.
PSD PSD files included in the template
HELP Well you already use this, it's a help file.

Homepage HTML Files

Here you will learn how to edit any HTMl file you want to work with.We'll start with homepages, and that switch to portfolio pages, pricing tables and contact page, plus will get a bit into templates typography.

Tag Description
index.html This is a deafult hompage slider using Business Flex slider.We'll get to it a bit later to show you how to use it!
grid-homepage.html This is a grid hompage slider u
camera-slider.html This is a camera hompage slider using camera slider.We'll get to it a bit later to show you how to use it!
camera-slider-2.html This is a camera hompage slider using camera slider.We'll get to it a bit later to show you how to use it!
3d-slider.html This is a flash hompage slider using 3D slider.We'll get to it a bit later to show you how to use it!
video-homepage.html This is a video hompage
static-homepage.html This is a static hompage
accordion-homepage.html This is a accordion hompage slider
onebyone-homepage.html This is a OneByOne hompage slider

Business Flex Slider

Index.html

Here's a an example of HTML yode you need to run this nice slider.We'll see Javascript that's needed later in JavaScript Section.

Make it work:

You need to have div with .flexslider to make it run as it should.

Adding slides is pretty easy too.Just add a ul with the list and put your images or videos.

Captions

Add div with the .flex-caption

After you add all of your slides, and after the div #slider-big is closed add navigation

<div class="flexslider">
	<ul class="slides"> 
		<li><img src="images/slideshow/slide-003.jpg" alt=" " />
			<div class="flex-caption">
			<h3>Business Corporate HTML Template</h3>
			
			</div>
		</li>
		<li><img src="images/slideshow/slide-002.jpg" alt=" " /></li>
		<li class="home-video-slide">
                    	<iframe src="http://player.vimeo.com/video/14511542?title=0&byline=0&portrait=0&color=fc6440" width="880" height="350"   webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>                    </li>
		<li><img src="images/slideshow/slide-001.jpg" alt=" " /></li>
		<li><img src="images/slideshow/slider-02.png" alt=" " /></li>
			<li><img src="images/slideshow/slide-004.jpg" alt=" " /></li>
	</ul>
</div>


Camera Slider and Camera Slider 2

elastic-slider.html

Here's a an example of HTML yode you need to run this nice elastic slider.We'll see Javascript that's needed later in JavaScript Section.

You need to have div with .camera_wrap camera_azure_skin but camera_azure_skin class is for skin so you can see which skin you want to use and change it, and you have to have ID camera_wrap_1 to make it run as it should which is is needed too!.

Camera Slider 2

The HTML for Camera Slider 2 is the same only thing thats different is ID code>camera_wrap_2

 <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
            <div data-thumb="images/slideshow/thumbs/thumb-01.jpg" data-src="images/slideshow/slide-001.jpg">
                <div class="camera_caption fadeFromBottom">
                    Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="images/slideshow/thumbs/thumb-02.jpg" data-src="images/slideshow/slide-002.jpg">
                <div class="camera_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
			 <div data-thumb="images/slideshow/thumbs/thumb-03.jpg" data-src="images/slideshow/slide-003.jpg">
                <div class="camera_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
			 <div data-thumb="images/slideshow/thumbs/thumb-04.jpg" data-src="images/slideshow/slide-004.jpg">
                <div class="camera_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="images/slideshow/thumbs/thumb-05.jpg" data-src="images/slideshow/slide-005.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
            <div data-thumb="images/slideshow/thumbs/thumb-06.jpg" data-src="images/slideshow/slide-006.jpg">
                <div class="camera_caption fadeFromBottom">
                    Camera slideshow provides many options <em>to customize your project</em> as more as possible
                </div>
            </div>
            <div data-thumb="images/slideshow/thumbs/thumb-07.jpg" data-src="images/slideshow/slide-007.jpg">
                <div class="camera_caption fadeFromBottom">
                    It supports captions, HTML elements and videos and <em>it's validated in HTML</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
                </div>
            </div>
            <div data-thumb="images/slideshow/thumbs/thumb-08.jpg" data-src="images/slideshow/slide-008.jpg">
                <div class="camera_caption fadeFromBottom">
                    Different color skins and layouts available, <em>fullscreen ready too</em>
                </div>
            </div>
        </div>

Other HTML Features

This Template is full with lots of HTML features such as custom lists, buttons, tables, pricing tables,pricing boxes, forms, dropcaps,accordions, tabs , alerts boxes and much more!

Buttons:

Adding buttons to your site can't get easier that this:

<a href="#" class="button blue small">Button Text</a>

With this code you have added a small blue button.Now we'll add a big red round button.

<a href="#" class="button red round big">Button Text</a>


You can choose from 10 buttons colors with 4 styles. You can see other buttons colors in the css file you're using. It's easy to find and to alter them.

Dropcaps:

Here's an example of a Dropcap

<p><span class="dropcap purple">A</span> Awesome Dropcap</p>

You can choose from 8 dropcaps colors.You can see other dropcaps colors in the css file you're using.

Alert Boxes:

Here's an example of a alert boxex

<div class="simple-error"> Content goes here </div>

HTML Code for Using Lists

<ul class="dotted-list">
<li class="simple-check-list">Check List - Dummy Content</li>
<li class="simple-check-list">Check List - Dummy Content</li>
<li class="simple-check-list">Check List - Dummy Content</li>
<li class="simple-check-list">Check List - Dummy Content</li>
<li class="simple-check-list">Check List - Dummy Content</li>	 
</ul>	
<ul class="dotted-list">
<li class="simple-plus-list">Plus List - Dummy Content</li>
<li class="simple-plus-list">Plus List - Dummy Content</li>
<li class="simple-plus-list">Plus List - Dummy Content</li>
<li class="simple-plus-list">Plus List - Dummy Content</li>
<li class="simple-plus-list">Plus List - Dummy Content</li> 	
</ul>	
<ul class="dotted-list">
<li class="simple-star-list">Star List - Dummy Content</li>
<li class="simple-star-list">Star List - Dummy Content</li>
<li class="simple-star-list">Star List - Dummy Content</li>
<li class="simple-star-list">Star List - Dummy Content</li>
<li class="simple-star-list">Star List - Dummy Content</li>	 	
</ul>	
<ul class="dotted-list">
<li class="simple-dott-list">Dott List - Dummy Content</li>
<li class="simple-dott-list">Dott List - Dummy Content</li>
<li class="simple-dott-list">Dott List - Dummy Content</li>
<li class="simple-dott-list">Dott List - Dummy Content</li>
<li class="simple-dott-list">Dott List - Dummy Content</li>	 
</ul>	
<ul class="dotted-list">
<li class="simple-dash-list">Dash List - Dummy Content</li>
<li class="simple-dash-list">Dash List - Dummy Content</li>
<li class="simple-dash-list">Dash List - Dummy Content</li>
<li class="simple-dash-list">Dash List - Dummy Content</li>
<li class="simple-dash-list">Dash List - Dummy Content</li>	 	 
</ul>	
<ul class="dotted-list">
<li class="simple-check-list-2">Check List 2 - Dummy Content</li>
<li class="simple-check-list-2">Check List 2 - Dummy Content</li>
<li class="simple-check-list-2">Check List 2 - Dummy Content</li>
<li class="simple-check-list-2">Check List 2 - Dummy Content</li>
<li class="simple-check-list-2">Check List 2 - Dummy Content</li> 	
</ul>	
<ul class="dotted-list">
<li class="simple-arrow-list">Arrow List - Dummy Content</li>
<li class="simple-arrow-list">Arrow List - Dummy Content</li>
<li class="simple-arrow-list">Arrow List - Dummy Content</li>
<li class="simple-arrow-list">Arrow List - Dummy Content</li>
<li class="simple-arrow-list">Arrow List - Dummy Content</li>	 
</ul>	
<ul class="dotted-list">
<li class="simple-heart-list">Heart List - Dummy Content</li>
<li class="simple-heart-list">Heart List - Dummy Content</li>
<li class="simple-heart-list">Heart List - Dummy Content</li>
<li class="simple-heart-list">Heart List - Dummy Content</li>
<li class="simple-heart-list">Heart List - Dummy Content</li> 
</ul>	
<ul class="dotted-list">
<li class="simple-info-list">Info List - Dummy Content</li>
<li class="simple-info-list">Info List - Dummy Content</li>
<li class="simple-info-list">Info List - Dummy Content</li>
<li class="simple-info-list">Info List - Dummy Content</li>
<li class="simple-info-list">Info List - Dummy Content</li>	 
</ul>
<ul class="dotted-list">
<li class="simple-settings-list">Settings List - Dummy Content</li>
<li class="simple-settings-list">Settings List - Dummy Content</li>
<li class="simple-settings-list">Settings List - Dummy Content</li>
<li class="simple-settings-list">Settings List - Dummy Content</li>
<li class="simple-settings-list">Settings List - Dummy Content</li>	 
</ul>					

Typography


Body Font

Now You'll see how to use typography features in this template.

This template uses "Arial" font as a body font and "Myriad Pro" for headings.Other than that you see in some areas it uses "Georgia" and "Crimson Text".

If you want to change body font color or it's size you just need to change some CSS code.

body {
	background:#FFF url("../images/bg-01.jpg") fixed;
	color: #898989;
	font-size: 12px;
	font-family:'Arial', 'Verdana', sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	line-height:20px;	
	
}

Just change the css code above!

If you want to change headings font color or it's size you just need to change some CSS code.

h1,h2,h3,h4,h5,h6 {
	font-weight:normal;
	font-variant:normal;
	white-space:normal;
	color:#898989;
	margin-bottom:15px;
	font-family:Arial,Verdana,serif;	
}
h1 {
	font-size:28px;
	line-height:32px;
}
h2 {
	font-size:26px;
	line-height:30px;
}
h3 {
	font-size:24px;
	line-height:23px;
}
h4 {
	font-size:18px;
	line-height:24px;
}
h5 {
	font-size:16px;
	line-height:20px;
}
h6 {
	font-size:14px;
	line-height:17px;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
	color:#898989;
	font-size:100%;
}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {
	color:#fec151;
	font-size:100%;
	text-decoration:underline;
}
a h1:hover,a h2:hover,a h3:hover,a h4:hover,a h5:hover,a h6:hover{color:#fec151;}

Just change the css code above!

If you want to change links font color or size you just need to change some CSS code.

 a, a > * {
	color: #898989;
	text-decoration: none;
	-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	-moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	-o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
}

a:hover, a > *:hover,.post-links { color: #fec151; }

Just change the css code above!

You can change the color of a class colored

.colored{color:#cb5234;}
a.colored:hover{color:#cb5234;text-decoration:underline;}

This is just a small introduction to a typography in this template, everything else is in css file you're using, which is easy to navigate and to edit.

There's no really need to explain pricing tables too much but here's some info for your further use. Pricing tables & Boxes are 100% tableless, modern looking and easy to edit.

HTML code is plain as it can be so i won't talk much about it, here's an example of a CSS code for Pricing Table

/*PRICING TABLE*/
ul.pricing-table-features {float:left;width:219px;margin:0;padding:0; }
ul.pricing-table-features  li{padding:10px 10px;border-bottom:1pt solid #e1e1e1; }
ul.first-pricing{border-left:1pt solid #e1e1e1;}
ul.last-pricing{border-right:1pt solid #e1e1e1;}
li.first-no-border{border-left:1pt solid #FFF!important;margin-left:-1px;}
li.first-no-border h3{margin-top:1px;}
ul.pricing-table-features  li.colored-header{background:#141414;padding:17px 0 5px 0;
	border-radius:4px 4px 0 0;
	-moz-border-radius:4px 4px 0 0;
	-webkit-border-radius:4px 4px 0 0;
	text-align:center;	 
}
ul.pricing-table-features  li.colored-footer{background:#141414;padding:13px 0 15px 0;
	border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	-webkit-border-radius:0px 0px 4px 4px;
	 text-align:center;
	 border-bottom:3pt solid #000;
}
li.included{padding:10px 5px 10px 40px!important;background:transparent url(../images/list-icons/list-check-2.png) no-repeat 10px 11px;}
li.not-included{padding:10px 5px 10px 40px!important;background:transparent url(../images/list-icons/not-included.png) no-repeat 10px 11px ;}
li.included:hover{padding:10px 5px 10px 40px!important;background:#f9f9f9 url(../images/list-icons/list-check-2.png) no-repeat 10px 11px;cursor:pointer;}
li.not-included:hover{padding:10px 5px 10px 40px!important;background:#f9f9f9 url(../images/list-icons/not-included.png) no-repeat 10px 11px ;cursor:pointer;}
.sign-up-button{
	padding:5px 45px;
	background: #fec151;
   background: -moz-linear-gradient(top, #fec151 0%, #f3aa38 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fec151), color-stop(100%,#f3aa38));
   background: -webkit-linear-gradient(top, #fec151 0%,#f3aa38 100%);
   background: -o-linear-gradient(top, #fec151 0%,#f3aa38 100%);
   background: -ms-linear-gradient(top, #fec151 0%,#f3aa38 100%);
   background: linear-gradient(top, #fec151 0%,#f3aa38 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#f3aa38',GradientType=0 );
   color: #FFF;
   text-shadow: 0px 1px #d77a03;
   -webkit-box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03;
   -moz-box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03;
   box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03;
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
    position: relative;

}
.sign-up-button:hover {
	color: #FFF;
   -webkit-box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03;
   -moz-box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03;
   box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03;
}
.sign-up-button:active {
	 color: #FFF;
   -webkit-box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03;
   -moz-box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03;
   box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03;
    
}
.sign-up-button-2{
	padding:5px 45px;
	background: #59a839;
   background: -moz-linear-gradient(top, #59a839 0%, #3e8720 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59a839), color-stop(100%,#3e8720));
   background: -webkit-linear-gradient(top, #59a839 0%,#3e8720 100%);
   background: -o-linear-gradient(top, #59a839 0%,#3e8720 100%);
   background: -ms-linear-gradient(top, #59a839 0%,#3e8720 100%);
   background: linear-gradient(top, #59a839 0%,#3e8720 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59a839', endColorstr='#3e8720',GradientType=0 );
   color: #FFF;
   text-shadow: 0px 1px #1f6b00;
   -webkit-box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215;
   -moz-box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215;
   box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215;
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
    position: relative;
}
.sign-up-button-2:hover {
	color: #FFF;
   -webkit-box-shadow: inset 0 0 10px #77e74a,0px 3px #307215;
   -moz-box-shadow: inset 0 0 10px #77e74a,0px 3px #307215;
   box-shadow: inset 0 0 10px #77e74a,0px 3px #307215;
}
.sign-up-button-2:active {
	 color: #FFF;
   -webkit-box-shadow: inset 0 0 15px #195700,0px 1px #307215;
   -moz-box-shadow: inset 0 0 15px #195700,0px 1px #307215;
   box-shadow: inset 0 0 15px #195700,0px 1px #307215;
}
ul.pricing-table-features  li.colored-header-green{background:#59a839;padding:40px 0 7px 0;margin-top:-25px;
	border-radius:4px 4px 0 0;
	-moz-border-radius:4px 4px 0 0;
	-webkit-border-radius:4px 4px 0 0;
	text-align:center;	 
}
ul.pricing-table-features  li.colored-header-green h4,ul.pricing-table-features  li.colored-footer-green h4{color:#FFF;padding:0 0 0 15px;}
ul.pricing-table-features  li.colored-footer-green{background:#59a839;padding:13px 0 35px 0;
	border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	-webkit-border-radius:0px 0px 4px 4px;
	 text-align:center;
	 border-bottom:3pt solid #3e7e24;
}
ul.pricing-table-features  li.colored-header-orange{background:#f29d37;padding:17px 0 5px 0;
	border-radius:4px 4px 0 0;
	-moz-border-radius:4px 4px 0 0;
	-webkit-border-radius:4px 4px 0 0;
	text-align:center;	 
}
ul.pricing-table-features  li.colored-header-orange h4,ul.pricing-table-features  li.colored-footer-orange h4{color:#FFF;padding:0 0 0 15px;}
ul.pricing-table-features  li.colored-footer-orange{background:#f29d37;padding:13px 0 15px 0;
	border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	-webkit-border-radius:0px 0px 4px 4px;
	 text-align:center;
	 border-bottom:3pt solid #e58e26;
}
	

Homepage Sliders:

Flex Slider (index.html)

The JavaScript code you need to run Flex Slider

Located in "custom.js" file in js folder of the template you're using!

if ( $( '.flexslider' ).length && jQuery() ) {
$('.flexslider').flexslider({ 
 animation:"fade",
 controlNav:true,
 controlsContainer:"#home",
 nextText:"›",
 prevText:"‹",
 keyboardNav: true,  
 });
}

Camera Business Slider (camera-slider.html)

The JavaScript code you need to run Camera Slider

Located in "custom.js" file in js folder of the template you're using!

if ( $( '#camera_wrap_1' ).length && jQuery()) {
 $('#camera_wrap_1').camera({
 height: '350px',
 loader: 'bar',
 pagination: false,
 thumbnails: true
 });
 }

OneByOne (onebyone-slider.html)

The JavaScript code you need to run OneByOne Slider

Located in "custom.js" file in js folder of the template you're using!

 $('#banner').oneByOne({
			className: 'oneByOne1',	             
			easeType: 'random',
			slideShow: true
		}); 

Camera Business Slider (camera-slider-2.html)

The JavaScript code you need to run Camera Slider 2

Located in "custom.js" file in js folder of the template you're using!

if ( $( '#camera_wrap_1' ).length && jQuery()) {
$('#camera_wrap_2').camera({
 height: '350px',
 thumbnails: true
 });
 }

Twiiter Feeds (Edit custom.js)

Twitter plugin is easy to use, you just have to change out your username and number od tweets to be displayed, and that's it.

Change username: "trendywebstar" username "trendywebstar" to your own username!

count: 1 Number of tweets you want to display.

That's pretty much it, everything else is easy customize too!

 if ( $( '.tweet' ).length && jQuery()) {
$(".tweet").tweet({
 username: "trendywebstar",
 join_text: null,
 avatar_size: null,
 count: 1,
 auto_join_text_default: "we said,", 
 auto_join_text_ed: "we",
 auto_join_text_ing: "we were",
 auto_join_text_reply: "we replied to",
 auto_join_text_url: "we were checking out",
 loading_text: "loading tweets..."
});
}

Google maps JQuery

Google Maps Plugin is very easy to use, just change the address, and you'll have it work as a charm!

zoom: 18 zoom the map as you wish.

That's pretty much it, for more informations visit the official plugin page

var $map = $('#map');
if( $map.length ) {
$map.gMap({
 address: 'Level 13, 2 Elizabeth St, Melbourne Victoria 3000 Australia',
 zoom: 18,
 markers: [
 { 'address' : 'Level 13, 2 Elizabeth St, Melbourne Victoria 3000 Australia' }
]
});
}

Contact Form

Here's how to change contact form's default alert messages. Anything else, you don't touch.Black Magic!

<div class="error">You forgot to enter your '+labelText+'</div> this is a deafult error message, if forgot to enter some field.You can change it if you wish.

<div class="error">You entered an invalid '+labelText+'</div> this is a deafult error message,if didn't enter valid values.You can change it if you wish.

<div><span class="fancy-success">Your email was successfully sent. We will contact you as soon as possible.</span></div> this is a deafult success message, you can change it if you wish.

if ( $( '#contact-form' ).length && jQuery() ) {
$('form#contact-form').submit(function() {
function resetForm($form) {
 $form.find('input:text, input:password, input:file, select, textarea').val('');
 $form.find('input:radio, input:checkbox')
 .removeAttr('checked').removeAttr('selected');}
$('form#contact-form .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
 var labelText = $(this).prev('label').text();
 $(this).parent().append('<div class="error">You forgot to enter your '+labelText+'</div>');
 $(this).addClass('inputError');
 hasError = true;
 } else if($(this).hasClass('email')) {
 var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 if(!emailReg.test(jQuery.trim($(this).val()))) {
 var labelText = $(this).prev('label').text();
 $(this).parent().append('<div class="error">You entered an invalid '+labelText+'</div>');
 $(this).addClass('inputError');
 hasError = true;}}});
if(!hasError) {
$('form#contact-form input.submit').fadeOut('normal', function() {
$(this).parent().append('');});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('#contact-form').prepend('<div><span class="fancy-success">Your email was successfully sent. We will contact you as soon as possible.</span></div>');
resetForm($('#contact-form'));
$('.fancy-success').fadeOut(5000);
});}return false;
});}

All CSS Files are well commented and easy to usen ad customize to your own needs.Here's the list of the CSS files in each template version.

Tag Description
style.css Main CSS File
animate.css Animate CSS File
camera.css Camera Slider CSS File
flexslider.css FlexSlider CSS File
jquery.onebyone.css OneByOne Slider CSS File
mediaelementplayer.min.css Video / Audio Player CSS File
piecemaker.css Flash 3D Slider CSS File
prettyPhoto.css PrettyPhoto CSS File

This template has only one php file, which is for sending mail via contact form,.Here's the php code for it.

You just need to change $to = 'example@example.com';.So change the example@example.com to your email adress.

And that's it you have yourself a working contact form!

if($_POST){
 $to = 'example@example.com';/*Put Your Email Adress Here*/
 $subject = $_POST['subject'];
 $from_name = $_POST['name'];
 $from_email = $_POST['email'];
 $phone_number = $_POST['phone'];
 $message = $_POST['message'];
 $header = "From: $from_name <$from_email>";
 mail($to, $subject, $message, $header);		
}
  

I've included 2 psds with this theme:

P.S. Some images are no included due to the copyrights

I've used the following images, icons or other files as listed.

JavaScript

  1. jQuery — jQuery is a fast and concise JavaScript Library.
  2. Flex Slider — Awesome Business Slider.
  3. Camera Slider — Awesome Business Slider.
  4. Google Maps — Google Maps Plugin
  5. prettyPhoto — Photo modal dialog Plugin
  6. toolTip — Simple Jquery tooltip Plugin

Images

  1. PhotoDune — Images are bought on PhotoDune ( which rocks btw!)

Fonts

  1. Webfonts — Some fonts are taken from google webfonts.

Icons

  1. Brankic1979 — A set of 350 pixel perfect glyphs icons. - Thank You "brankic1979"!

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. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.