tinker. - Corporate HTML5 Template - Help File

This awesome template uses most popular technologies for an awesome look and feel, and it all works fine even in IE8 / IE7.

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 fixed layout with ability to have 6 columns. All of the information within the main content area is nested within a div with certain id or class.


General Features

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

5 colors sets for you to choose from.Every color version has 30 background patterns, pricing tables, modern looking portfolio pages and much more!

4 Awesome sliders for you to play around.You get Nivo slider, awesome Elastic Slider, Cycle Slider which you can use to slide your content too, and Simple JS Slider (default homepage). Everything working fine in IE8 / IE7.

Pricing Tables & Boxes.You can use these awesome modern looking pricing tables to show your pricing plans to your customers, and small little pricing boxes to put anywhere you wish!

3 Filterable Portfolio Pages 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.

2 PSD files are included in download version.You get 1 PSD homepage and 1 inner page, easily to edit and change to any color you prefer to use.

    • Internet Explorer 7
    • Internet Explorer 8
    • 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 Simple JS slider.We'll get to it a bit later to show you how to use it!
content-slider.html Simple Cycle slider with which you use to slide images and content in many ways.
elastic-slider.html Awesome modern looking Elastic slider.Easy to use and customize.
nivo-slider.html Nothing to say here.It's one of the most popular slider out there, and you get to use it as well!

Simple JS 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 #slides to make it run as it should.And after that add another div with #slider-big, after that wrapp it in another div with #slides_container .big-slider and you can start adding your slides.

Adding slides is pretty easy too.Just add a div .slide and there you have it.Easy as that.

Adding photos and captions:

To add photo do this:


<img src="path/image.jpg/png" alt=" " />


Image must be:
width="1000" and height="350"

You can alter images sizes you want to use in css file, well see that later.

You can add another photo that will be placed in the right part of the slider which will bounce when sliding

Add image with .slide-img-bounce

Adding Captions

Main Big caption is wrapped in h2 and the subtitle is wrapped in h3

Adding Navigation

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

<div class="slides-nav"> 
	<a href="#" class="prev">Previous Slide</a> 
	<a href="#" class="next">Next Slide</a> 
</div> 
<div id="slides">
<div id="slider-big">
	<div class="slides_container big-slider">
		<div class="slide">
		<img src="images/slideshow/slide-001.jpg" alt=" " width="1000" height="350"/>
		<img src="images/adaptive.png" alt=" " class="slide-img-bounce" />
		<div class="caption">
		<h2>Your Big Awesome Title Goes Here!</h2>
		<h3>
		This is a subtitle
		</h3>
	</div>
</div>
<div class="slide">
	<img src="images/slideshow/slide-003.jpg" alt=" " width="1000" height="350"/>
	<div class="caption">				
	<h2>Another Big title</h2>
	<h3>
	Easy to use and customize.Yes this is a subtitle
	</h3>
	</div>
	</div>
	</div>
	</div>
	<div class="slides-nav"> 
		<a href="#" class="prev">Previous Slide</a> 
		<a href="#" class="next">Next Slide</a> 
	</div> 
</div>

Simple Content Slider

content-slider.html

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

You need to have div with #cycle-slider-wrapper to make it run as it should.And after that add another div with #cycle-slider which is the main div for Jquery code.

Adding slides

Add a new div with .slice and put your content there. You can have images/ videos and content or just a plane fullwidth image.

If you will put content and not a fullwidth image you must have another div with .cycle-content after that you can use gird columns to add any column you wish.I've used one-half columns, but it's up to you.

Adding Navigation

Affer the #cycle-slider is closed add this code to add navigation:

<div class="cycle-slider-nav">
	<a href="#"><span id="next"></span></a>
	<a href="#"><span id="prev"></span></a>
</div>		

After that close the #cycle-slider-wrapper and there you have it.

<div id="cycle-slider-wrapper">
<div id="cycle-slider">
	<div class="slice">
	<div class="cycle-content">
	<div class="one-half">
	<h2><a href="#">Our New Software <span class="colored">Solutions</span></a></h2>
	<p>
	Fusce varius euismod lorem, nec semper ante ullamcorper condimentum.</p>			
	<p>
	Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
	</p>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes. Fusce varius euismod lorem.</p>
	<br/>
	<a href="#" class="button big round red">Read More</a>
	<a href="#" class="button big round blue">Our Portfolio</a>
</div>
<div class="one-half last">
	<img src="images/portfolio/portfolio-img-01.jpg" alt=" " width="460" height="280" class="round-img" />	
</div>
</div>
</div>
<div class="slice">
	<img src="images/slideshow/slide-002.jpg" alt=" " width="1000" height="350" />	
</div>
</div>
	<div class="cycle-slider-nav">
	<a href="#"><span id="next"></span></a>
	<a href="#"><span id="prev"></span></a>
</div>
</div>

Elastic Slider

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 #ei-slider to make it run as it should, and add .ei-slider which is is needed too!.

Adding Big Images

Add a new Ul with .ei-slider-large and put your content in the lists there.

Adding Captions

After you add image wich should be width="1000" and height="350" add div with .ei-title to add captions.

To add big title use h2 and for subtitle use h3

Adding thumbs - Navigation

After the main Ul .ei-slider-large with the large images is closed add ul with .ei-slider-thumbs for the thumbs which are used as navigation.

<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>                  
</ul>		

After that close the main slider wrapper and there you have it.

<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
     <img src="images/large/6.jpg" alt="image06" width="1000" height="350"/>
      <div class="ei-title">
       <h2>Simple to Use</h2>
        <h3>Just Like Playing</h3>
       </div>
</li>
<li>
    <img src="images/large/1.jpg" alt="image01"  width="1000" height="350"/>
    <div class="ei-title">
    <h2>Simple to Use</h2>
    <h3>Just Like Playing</h3>
    </div>
</li>
<li>
    <img src="images/large/2.jpg" alt="image02" width="1000" height="350" />
    <div class="ei-title">
    <h2>Simple to Use</h2>
    <h3>Just Like Playing</h3>
    </div>
    </li>
</ul><!-- ei-slider-large -->
 <ul class="ei-slider-thumbs">
    <li class="ei-slider-element">Current</li>
	<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
    <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
    <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>                  
</ul>
</div>

Nivo Slider

nivo-slider.html

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

You need to have div with #slider3 to make it run as it should, and add .nivoSlider which is is needed too!.

Adding Images

Just put Your images after you open the main div and that's it.

Adding Captions

After you add image wich should be width="1000" and height="350" add a title to it and thats it!

After that close the main slider wrapper and there you have it.

<div id="slider3" class="nivoSlider">
	<img src="images/slideshow/slide-001.jpg" alt=" " width="1000" height="350" title="This is Caption"/>
	<img src="images/slideshow/slide-002.jpg" alt=" " width="1000" height="350" title="This is Caption"/>
	<img src="images/slideshow/slide-003.jpg" alt=" " width="1000" height="350" title="This is Caption"/>
	<img src="images/slideshow/slide-004.jpg" alt=" " width="1000" height="350" title="This is Caption"/>
</div>

Portfolio Pages

So now you know how to add your own sliders, how to customize it's HTML, it's pretty easy isn't it?.Now you will see how to add portfolio pages, how to alter it and just about everything you need to make your portfolio works.

Portfolio Layouts:

This template has 3 and 4 portfolio columns layouts, but you can make it in any 1-6 columns layouts with just changing HTML markup of a portfolio page.

Tag Description
portfolio.html This is a deafult modern four columns portfolio page.It's got a filter you can use, plus it look awesome!
portfolio-three-columns.html This is a classic three columns portfolio
portfolio-four-columns.html This is a classic four columns portfolio
portfolio-details.html This is a portfolio single project layout!

Portfolio HTML Markup

Filter Portfolio:

Every portfolio layout has ability to filter your portfolio items.All 3 Portfolio layouts uses this HTML code for filtering items.You can alter the tags in any way you prefer.

			
<ul id="filterable">
	<li class="first"><h5>Filter by:</h5></li>
	<li class="current"><a class="all" href="#all">All</a></li>
	<li><a class="web" href="#web">Web design</a></li>
	<li><a class="logo" href="#logo">Logo</a></li>
	<li><a class="branding" href="#branding">Branding</a></li>
	<li><a class="video" href="#video">Video</a></li>
</ul>

Portfolio HTML Markup

portfolio.html / portfolio-three-columns.html / portfolio-four-columns.html

This HTML code is for Default modern looking portfolio layout with four columns in a row.Every other layout has almost the same code.We'll see the differences a bit later.

As you can see li columns has class
one-fourth and some class tag
video,web, branding, logo. You can alter these tags to your own needs.

Portfolio Three Columns

Almost all the code is the same except the class modern of the portfolio UL. And instead of using one-fourth for list, you will use class one-third. And of course you will change images sizes.

Portfolio Four Columns - Layout 2

Same goes for portfolio four columns classic layout.Only difference is that it doesn't have class modern of the portfolio UL.

There you have it, now you can make your own portfolio.

			
<div id="portfolio">
<!--HERE YOU PUT FILTERING LIST #filterable -->
<div class="portfolio-container" id="columns">
<ul class="modern">
<li class="one-fourth video">
	<div class="portfolio-item-holder">
	<div class="portfolio-item-hover-content">
	<a href="http://vimeo.com/7449107" title="Dummy Video Title"  class="zoom">View Image</a>
	<a href="portfolio-details.php">Read About the Project</a>
	<img src="images/portfolio/portfolio-img-01.jpg" alt=" " width="220" height="125" class="portfolio-img"/>
	<div class="hover-options"></div>
	</div>
</div>
<h4><a href="#">Video <span class="colored">Tutorials</span></a></h4>
<p>Video / Design / Development</p>
</li>
<li class="one-fourth logo">
<div class="portfolio-item-holder">
	<div class="portfolio-item-hover-content">
	<a href="images/slideshow/slide-003.jpg" title="Dummy Image Title" class="zoom">View Image</a>
	<a href="portfolio-details.php">Read About the Project</a>
	<img src="images/portfolio/portfolio-img-02.jpg" alt=" " width="220" height="125" class="portfolio-img"/>
	<div class="hover-options"></div>
	</div>
	</div>
<h4><a href="#">New Logo / Brand <span class="colored">Design</span></a></h4>
<p>Logo Design / Identity</p>			
</li>
</ul>	
</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 20 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.

Lists:

Here's an example of a list

<ul class="cancel-list">
 <li>Site Redesign</li>
 <li>Custom CMS Developmet</li>
 <li>Custom Booking System</li>	
 <li>SEO Optimization</li>
 <li>Our Web Hosting Solution</li>
</ul>				

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>

You can choose from 7 alert boxes colors.You can see other alert boxes colors in the css file you're using.

Fancy Alert Boxes:

Here's an example of a alert boxex

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

You can choose from 7 fancy alert boxes colors.You can see other fancy alert boxes colors in the css file you're using.

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/background-patterns/body-bg-1.jpg") repeat;
	font:12px Arial,sans-serif;
	line-height:20px;
	color:#898989;
	/* Prevents Mobile Safari from bumping up font sizes in landscape */
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-tap-highlight-color:rgb(255,255,0);
}			

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:#303031;
	margin-bottom:15px;
	font-family:'Myriad Pro',Arial,Verdana,serif;
}	
h1 {
	font-size:26px;
	line-height:28px;
}
h2 {
	font-size:24px;
	line-height:27px;
}
h3 {
	font-size:20px;
	line-height:23px;
}
h4 {
	font-size:18px;
	line-height:20px;
}
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:#303031;
	font-family:'Myriad Pro',Arial,Verdana,serif;
	font-size:100%;
}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {
	color:#e64135;
	font-family:'Myriad Pro',Arial,Verdana,serif;
	font-size:100%;
	text-decoration:underline;
}		

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 strong{
	text-decoration:none;
	color:#e64135;
}
a:hover {
	text-decoration:underline;
	color:#e64135;
}
	

Just change the css code above!

You can change the color of a class colored

.colored {
	color:#e64135;
}
Footer Headings & Links
#footer h1,#footer h2,#footer h3,#footer h4,#footer h4,#footer h6 {font-family:"Myriad Pro", Arial, Verdana;color:#e64135;text-shadow:0px 1px 0px #111;}
#footer a {
	color:#898989;
	text-decoration:none;	
}
#footer a:hover {
	color:#e64135;
	text-decoration:underline;
}
#footer strong {
	line-height:60px;
}
#footer .colored {
	color:#e64135;
}
#footer .bolder {
	font-weight:bold;
}

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 Tables 1

.pricing-table-box-container ul{ width:100%;background:#e64135;margin:0px; border-top:1px solid #dcdcdc; float:left; border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;
-webkit-mask-image: url(../images/mask.png);-o-mask-image: url(../images/mask.png);-moz-mask-image: url(../images/mask.png);mask-image: url(../images/mask.png);mask-image-size:100%;}
.pricing-table-box-container ul li{ float:left; list-style-type:none; padding:20px 0px 10px 0px ; line-height:normal; color:#707070 !important; min-height:30px; }
ul.pricing-table-header li {color:#FFF!important;font-weight:bold;}
.pricing-table-box-container ul li h4{ margin:0px; font-size:14px;}
.pricing-table-box-container ul li.one{width:450px; padding-left:20px;}
.pricing-table-box-container ul li.two{ width:145px; text-align:center; border-left:1px solid #dcdcdc; }
.pricing-table-box-container ul li.three{ width:145px; text-align:center; border-left:1px solid #dcdcdc; }
.pricing-table-box-container ul li.four{ width:145px; text-align:center; border-left:1px solid #dcdcdc; }
ul.pricing-table-header li{ }
ul.pricing-table-white{ background-color:#FFF; float:left;}
ul.pricing-table-white li.one{ width:460px; padding-left:10px; }
ul.pricing-table-grey{ background-color:#f3f3f3}
ul.pricing-table-grey li.one{ width:460px; padding-left:10px; }
ul.tbl-price{background:#FFF; font-size:18px;border-bottom:1px solid #dcdcdc; }
.icontable{width:25px; margin-right:10px;margin-top:-10px;}
.icontable img{vertical-align:middle;margin-top:-7px;}
	

CSS3 mask works only new browsers.But it's shows alternative look in other older browsers.

Other than Pricing Tables 1 there are Pricing Tables 2 and Pricing Boxes.All of the HTML code is pretty plain, no need for detail help, and CSS you can find in the css file of the template version you're using.Everything is easy to find and to customize to your own needs.

Homepage Sliders:

Simple JS Slider (index.html)

The First Part of the code is for navigation arrows.The will appear wwhen hovering the slider.You can change the fade in / fade out speed as you wish.

postWrap is for the class caption which animates the caption on the slider.

$featuredImage is for class slide-img-bounce will animate the bouncing image on the slider. You can change the speed or the way it will show while sliding.

Sliders Options:

In effect: 'slide' you can choose slide or fade effect for your slider.

If you want to have pagination in the slider, change generatePagination: false to true, you will however must add css for the pagination.

Other than that you can change any of the sliders features for example speed of sliding / fading slideSpeed: 700

CSS for the slider is in the CSS folder of the template version you're using.

Thas pretty much it, anything else you need you can contact me or visit plugin's official website

if ( $( '#slides' ).length && jQuery().slides ) {
 jQuery("#slides").hover( function() {
 jQuery('.slides-nav').fadeIn(400);
 }, function () {
jQuery('.slides-nav').fadeOut(400);
});	
}
if(jQuery().slides) {
$postWrap = jQuery('.caption');
$featuredImage = jQuery('.slide-img-bounce');
$postWrap.css({
bottom: "-100%"
});
$featuredImage.css({
bottom: "-100%"
});
$postWrap.animate({
bottom: "0"
}, 900);
$featuredImage.animate({
bottom: "0"
}, 200);
jQuery('#slides').slides({
effect: 'slide',
crossfade: false,
generatePagination: false,
autoHeight: true,
slideSpeed: 700,
preload: true,
animationStart: function() {				
$postWrap.css({
bottom: "-100%"
});
$featuredImage.css({
bottom: "-100%"
});	
},
animationComplete: function() {		
$postWrap.animate({
bottom: 0
}, 900);				
$featuredImage.animate({
bottom: 0
}, 200);
}
});
}   

Content Slider (content-slider.html)

Cycle Slider is very easy to use, as you can see from the JQuery code, pretty simple.

fx:'scrollLeft' Is for animation you want to apply to the slider.Cycle Slider has a lots of sliding options, I suggest you visit plugins official page to see the list for animations. Official Plugin Page

prev:'#prev', and next:'#next' are sliders arrows you use to navigate.

if ( $( '#cycle-slider' ).length && jQuery().cycle ) {
 $('#cycle-slider').cycle({
 fx:'scrollLeft', 
 prev:'#prev',
 next:'#next',
 pause: 0, 
 timeout: 0, 		
 delay:-2000   
});
}   
   

Elastic Slider (elastic-slider.html)

Elastic Slider is very easy to use, as you can see from the JQuery code, pretty simple.

animation:'center' Is for animation you want to apply to the slider.Elastic Slider has 2 sliding options, slide and center. Official Plugin Page

 
 if ( $( '#ei-slider' ).length && jQuery().eislideshow ) {
 $('#ei-slider').eislideshow({
 animation:'center',
 autoplay: true,
 slideshow_interval: 3000,
 titlesFactor:  0.60,
 titlespeed: 800
});
}

Nivo Slider (nivo-slider.html)

Nivo Slider is very easy to use, as you can see from the JQuery code, pretty simple.

Official Plugin Page

if ( $( '#slider3' ).length && jQuery().nivoSlider ) {
 $('#slider3').nivoSlider({
 pauseTime:5000,
 pauseOnHover:false
}); 
}

Twiiter Feeds

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' }
]
});
}

Homepage Portfolio Carousel

Homepage Carousle uses Cycle slider, which is easy to use, and comes with lots of sliding options.

fx:'scrollLeft' will slide the images to the left, you can choose other option for your slider, check the official plugin page

if ( $( '#portfolio-slider' ).length && jQuery().cycle ) {
$('#portfolio-slider').cycle({
 fx:'scrollLeft', 
 prev:'#prev',
 next:'#next',
 pause:0, 
 timeout: 0, 		
 delay:-2000   
});
}

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;
});}

Portfolio Four Columns

Here's how Portfolio filtering works, you can change the speed of animation speed = 700

You can make any portfolio filterable, for example if you want to have two columns portfolio, after you edit your HTML file by adding class one-half columns, you need to add some Jquery to make it filterable.You can use the sma jquery as in any other filterable portfolio, just change this:

itemSelector: '.one-fourth:not(.invis)'
change this to itemSelector: '.one-half:not(.invis)'

That's pretty much it, everything else you don't need to change.

if ( $( '.portfolio-container' ).length && jQuery() ) {
var 
speed = 700, 
$wall = $('#portfolio').find('.portfolio-container ul');
$wall.masonry({
singleMode: true,
itemSelector: '.one-fourth:not(.invis)',
animate: true,
animationOptions: {
duration: speed,
queue: false}});
$('#filterable a').click(function(){
var colorClass = '.' + $(this).attr('class');
if(colorClass=='.all') {
$wall.children('.invis')
.toggleClass('invis').fadeIn(speed);
} else { 
$wall.children().not(colorClass).not('.invis')
.toggleClass('invis').fadeOut(speed);
$wall.children(colorClass+'.invis')
.toggleClass('invis').fadeIn(speed);}
$wall.masonry();
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.

After you edit style.css , don't forget to edit ie8.css and ie7.css cause there is some css that needs to be edit if you change colors or font.

Tag Description
style.css This is a main CSS file of your template.Easy to use and customize.
ie8.css This CSS file is a hack for IE8
ie7.css This CSS file is a hack for IE7
nivo-slider.css This is nivo slider main CSS file, other part is in style.css
prettyPhoto.css This is a 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'];
	$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. Nivo Slider — Awesome Jquery Slider
  3. Cycle Slider — Awesome Jquery Slider
  4. Google Maps — Google Maps Plugin
  5. Elastic Slider — Awesome Jquery Slider
  6. prettyPhoto — Photo modal dialog Plugin
  7. Slides JS — Awesome Jquery Slider
  8. toolTip — Simple Jquery tooltip Plugin
  9. Filterable Portfolio — Filterable portfolio 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.