Solid Business Solution | Documentation v1.0 - 12 April 2011


Solid Business Solution Html Template


Thank you for purchasing this template! For any questions that are beyond the scope of this documentation, contact me using the form on my Themeforest profile page.

Stay up to date: Follow me on ThemeForest || Twitter




  1. How the documentation is organized
  2. Before we get started
  3. Overview of folder structure / coding style / layout / main css file
  4. JS Scripts / JS Plugins / PHP Scripts
  5. Editing the website / putting togheter a website
  6. Credits

The documentation is written in a step by step format. First it covers the template's folder structure and then it goes into how the layouts are created and how to edit pages. Where needed there are references to the scripts section where it lists all the scripts and plugins this template has, what they do and how you can use them.

Note: I wanted to make the documentation as beginner friendly as possible and for that reason you'll find that it also goes in details on things that are obvious to an advanced user. So if you are advanced just skim read the sections you are not interested in.


Before we proceed I want to make sure everyone knows about:

1. Applying multiple classes to a html element

The template uses the technique of applying multiple classes on a single element in the creation of the layouts

One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:

		
<p class="pullquote btmmargin left">...</p>
		

This sets the following three classes on that paragraph tag:

You would assign these as generic classes in your CSS:

		
.pullquote { ... }
.btmmargin { ... }
p.left { ... }
		

If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.

Source - http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm

2. Css Image Sprites

The template uses image sprites to reduce the total number of images that have to be loaded, improving general website load time.

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Image Sprites - Simple Example

Instead of using three separate images, we use this single image ("img_navsprites.gif"):

With CSS, we can show just the part of the image we need. In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:

			
img.home
{
	width:46px;
	height:44px;
	background:url(img_navsprites.gif) 0 0;
}
			

Example explained:

Source - http://www.w3schools.com/css/css_image_sprites.asp


Folder Structure

The content is separated from the layout.

The folder /_layout contains the css stylesheets + javascript scripts and plugins + php scripts.
The subfolder /images contains all the images that are used in the css stylesheets or in the html pages for layout purposes.
The folder /js contains javascript scripts and plugins ( jQuery javascript framework is used + jQuery plugins + custom js scripts)

The /_content folder holds the content that goes on the pages.
I recommend making a subfolder for each new html pages and adding all assets ( pictures / documents / video / audio etc) in it.

Coding Style

Each html page included in the template is built starting from the below source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<title> :: Solid Business Solution ::</title>
	<meta name="description" content=" add description  ... " />
	<meta name="keywords"    content=" add keywords     ... " />

	<!-- //////// Favicon ////////  -->
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
	
	<!-- //////// Css - stylesheets ////////  -->
	<link href="_layout/style.css"       rel="stylesheet" type="text/css" media="all" />
	<link href="_layout/style-print.css" rel="stylesheet" type="text/css" media="print" />
	
	<!-- //////// jQuery ////////  -->
	<script src="_layout/js/jquery-1.5.2.min.js" type="text/javascript"></script>

	<!-- //////// DD_belatedPNG - png fix for IE6 ////////  -->
	<!--[if IE 6 ]>
		<script src="_layout/js/pngfix/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
	<![endif]-->

	<!-- //////// Cufon - font Replacement ////////  -->
	<script src="_layout/js/cufon/cufon.js" type="text/javascript"></script>
	<script src="_layout/js/cufon/Museo_Sans_500.font.js" type="text/javascript"></script>
	
	<!-- //////// Tipsy - tooltips ////////  -->
	<script src="_layout/js/tipsy/jquery.tipsy.js" type="text/javascript"></script>
	<link href="_layout/js/tipsy/css.tipsy.css" rel="stylesheet" type="text/css" />
	
	<!-- //////// prettyPhoto - lightbox ////////  -->
	<script src="_layout/js/prettyphoto/jquery.prettyPhoto.js" type="text/javascript"></script>
	<link href="_layout/js/prettyphoto/css.prettyPhoto.css" rel="stylesheet" type="text/css" />
	
	<!-- //////// Validity - form validation ////////  -->
	<script src="_layout/js/validity/jquery.validity.js" type="text/javascript"></script>
	<link href="_layout/js/validity/css.validity.css" rel="stylesheet" type="text/css" />
	
	<!-- //////// Cycle - content slider  ////////  -->
	<script src="_layout/js/cycle/jquery.cycle.all.min.js" type="text/javascript"></script>
	
	<!-- //////// Tabify - create tabs ////////  -->
	<script src="_layout/js/tabify/jquery.tabify-1.4.js" type="text/javascript"></script>
	
	<!-- //////// Accordion - create accordions ////////  -->
	<script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script>
	
	<!-- //////// Custom Js ////////  -->
	<script src="_layout/js/scripts.js" type="text/javascript"></script>
	<script src="_layout/js/plugins.js" type="text/javascript"></script>
	
</head>
<body>

	<noscript>
			<link href="_layout/style-nojs.css" rel="stylesheet" type="text/css" /> 
			<div class="nojs-warning"><strong>JavaScript seems to be Disabled!</strong> 
			Some of the website features are unavailable unless JavaScript is enabled.</div>
	</noscript>
		
	<div id="wrap">

	...

	</div><!-- end #wrap -->

	<script type="text/javascript"> Cufon.now(); </script> 
	
	<!-- analytics code here -->
	
</body>
</html>		
		

I'll break the code down into smaller section's and make comments where necessary:

1. Metadate + Favicon

		
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
<title> :: Solid Business Solution ::</title>
<meta name="description" content=" add description  ... " />
<meta name="keywords"    content=" add keywords     ... " />

<!-- //////// Favicon ////////  -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
		

You have to change the title, description and keywords for each page for SEO purposes.
The charset used by the pages is utf-8.
You can generate a new favicon over at http://tools.dynamicdrive.com/favicon/. And then just overwrite the current one in the folder, there is no need to change the href...

2. Css StyleSheets + How to target specific browsers for bug fixes.

The template uses 3 main Css stylesheets:

The first two are

  1. style.css - main css stylesheet for all media
  2. style-print.css - print stylesheet

and they are always loaded.

		
<!-- //////// Css - stylesheets ////////  -->
<link href="_layout/style.css"       rel="stylesheet" type="text/css" media="all" />
<link href="_layout/style-print.css" rel="stylesheet" type="text/css" media="print" />		
		

The last stylesheet is style-nojs.css which contains styling to be used in case Javascript support is missing. The link to this stylesheet is inside an noscript tag, so this stylesheet is only loaded is javascript is not available. Also a message will be displayed to let the user know that only a part of the functionality is availabe without javascript enabled.

		
<noscript>
			<link href="_layout/style-nojs.css" rel="stylesheet" type="text/css" /> 
			<div class="nojs-warning"><strong>JavaScript seems to be Disabled!</strong> 
			Some of the website features are unavailable unless JavaScript is enabled.</div>
	</noscript>	
		

One problem that always appears is that sometimes you need to write specific Css for Internet Explorer browsers to make them "play nice". The way this problm is tackled is that using Conditional Comments a class is applyed to the <html> element, according to the version of Internet Explorer the page is opened in:

		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
		

So it you open the page with a version of Internet Explorer smaller or equal to 6 for example the <html> element will have have the class .ie6 applyed. Now when you want to write some css targeting IE7 you just start the Css Selector with .ie6 :

		
( from style.css ... )
		
#index-slideshow-pager{ width:200px; text-align:left; z-index:35; position:absolute; left:20px; bottom:12px;  }
	.ie7 #index-slideshow-pager{ bottom:15px; }	
		

If you need to target Internet Explorer 6 then you start the css selector with .ie6, .ie8 for Internet Explorer 8 and .ie9 for Internet Explorer 9. And you write these css rules directly into style.css.

3. Javascript Script and Plugins

The template uses the jQuery javascript framework + jQuery plugins to add functionality to the website.

First jQuery + the js and css files for the Plugins are added:

		
<!-- //////// jQuery ////////  -->
<script src="_layout/js/jquery-1.5.2.min.js" type="text/javascript"></script>

<!-- //////// DD_belatedPNG - png fix for IE6 ////////  -->
<!--[if IE 6 ]>
	<script src="_layout/js/pngfix/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<![endif]-->

<!-- //////// Cufon - font Replacement ////////  -->
<script src="_layout/js/cufon/cufon.js" type="text/javascript"></script>
<script src="_layout/js/cufon/Museo_Sans_500.font.js" type="text/javascript"></script>

<!-- //////// Tipsy - tooltips ////////  -->
<script src="_layout/js/tipsy/jquery.tipsy.js" type="text/javascript"></script>
<link href="_layout/js/tipsy/css.tipsy.css" rel="stylesheet" type="text/css" />

<!-- //////// prettyPhoto - lightbox ////////  -->
<script src="_layout/js/prettyphoto/jquery.prettyPhoto.js" type="text/javascript"></script>
<link href="_layout/js/prettyphoto/css.prettyPhoto.css" rel="stylesheet" type="text/css" />

<!-- //////// Validity - form validation ////////  -->
<script src="_layout/js/validity/jquery.validity.js" type="text/javascript"></script>
<link href="_layout/js/validity/css.validity.css" rel="stylesheet" type="text/css" />

<!-- //////// Cycle - content slider  ////////  -->
<script src="_layout/js/cycle/jquery.cycle.all.min.js" type="text/javascript"></script>

<!-- //////// Tabify - create tabs ////////  -->
<script src="_layout/js/tabify/jquery.tabify-1.4.js" type="text/javascript"></script>

<!-- //////// Accordion - create accordions ////////  -->
<script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script>

<!-- //////// Custom Js ////////  -->
<script src="_layout/js/scripts.js" type="text/javascript"></script>
<script src="_layout/js/plugins.js" type="text/javascript"></script>		
		

Then two custom Js files are loaded:

  1. plugins.js - calls the plugins. All calls to plugins should be made in this file.
  2. scripts.js - contains custom scripts. All new custom scripts should be added in this file.

Layout Overview

A page is formed from 3 main <div>'s: #header, #content and #footer. These three div's inside another div named #wrap.

		
<div id="wrap">

	<div id="header">
	<!-- ///   HEADER   /////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	
		...

	<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	
	</div><!-- end #header -->
	<div id="content">
	
	<!-- ///   CONTENT   /////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		
		...
		
		
	<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	
	</div><!-- end #content -->
	<div id="footer">
	
	<!-- ///   FOOTER   //////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

		...
		
	<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	
	</div><!-- end #footer -->

</div><!-- end #wrap -->	
		

The #wrap div is centered and sets the total width of the layout. The shadow that it drops is created with the CSS 3 box-shadow proprety. You can remove the shadow or change it's color if you change the background and it doesn't match with it:

		
( from style.css ... )
	
#wrap{ width:940px; padding:0 40px; margin:0 auto; background-color:#ffffff;
-moz-box-shadow:0 -10px 10px 0 #333; -webkit-box-shadow:0 -10px 10px 0 #333; box-shadow:0 -10px 10px 0 #333; }
		

A grid layout is used to create the layout inside the #header, #content and #footer div's


( from style.css ... )

/* =grid
-------------------------------------------------------------- */

/* Clear Fix Hack - add  class="fixed"  to div's that have floated elements in them */
.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
	.fixed{display:block;}
	/*  \*/
	.fixed{min-height:1%;}
	* html .fixed{height:1%;}
		
.row{ width:940px; }
	
	.col-700{ width:700px; float:left; margin-right:20px; }
	.col-580{ width:580px; float:left; margin-right:20px; }
	.col-520{ width:520px; float:left; margin-right:20px; }
	.col-460{ width:460px; float:left; margin-right:20px; }
	.col-340{ width:340px; float:left; margin-right:20px; }
	.col-300{ width:300px; float:left; margin-right:20px; }
	.col-220{ width:220px; float:left; margin-right:20px; }
	.col-180{ width:180px; float:left; margin-right:20px; }
	.col-160{ width:160px; float:left; margin-right:20px; }
	
.last{ margin-right:0px; }
.clear{ clear:both; }
.block{ display:block; }
.hide{ display: none; }	
				
		

A breakdown of the classes and their usage:

  1. .fixed - is a class used to clear floated content. It should be applied to any element that contains float -ed content in it.
  2. .row - creates row
  3. .col-160 to .col-700 - different sized columns. They are floated left and have an margin-right. You can add one or more columns in a .row or any other div that is .fixed as long as you make sure that the total with of the columns is smaller or equal to that of the containing div and that you add the .last to the last column to remove it's right margin.

Example #1: Creating a layout with a left sidebar + right main content area

		
<div class="row fixed">
			
	<div class="col-220">
	
	<!-- ///   SIDEBAR   ////////////////////////////////////// -->
		
		sidebar content here...
	
	<!-- ////////////////////////////////////////////////////// -->
		
	</div><!-- end .col-220 -->
	<div class="col-700 last">
	
	<!-- ///   CONTENT   ////////////////////////////////////// -->
		
		main content here...  
	
	<!-- ////////////////////////////////////////////////////// -->
	
	</div><!-- end .col-700 -->

</div><!-- end .row -->		
		

Example #2: Creating 2 columns in the main content area created in example #1:

		
..
<div class="col-700 last">
	
<!-- ///   CONTENT   ////////////////////////////////////// -->
	
	...
	
	<div class="fixed">
					 
		<div class="col-340">
			
			column 1 content here...

		</div><!-- end .col-340 -->
		<div class="col-340 last">

			column 2 content here...

		</div><!-- end .col-340 -->
		
	</div><!-- end .fixed --> 

	...
	
<!-- ////////////////////////////////////////////////////// -->

</div><!-- end .col-700 -->		
		

Main Css File Overview

The main css file is style.css

To make it simpler to find out which css rules corespund to which page templates and so on, it has been divided in sections and sub-sections:


T.O.C
	=RESET
	=LAYOUT
	=PAGES
		=INDEX
		=TEAM
		=NEWS
		=TESTIMONIALS
		=SERVICES
		=PORTOFOLIO
		=BLOG
		=CONTACT	
		
  1. It starts with the Eric Meyer Css Reset =RESET
  2. In the =GENERAL section we style the elements we user in the template from header to form elements (needed as we reset them earlier)
  3. The =LAYOUT section has all the css rules that apply to the layout of all pages
  4. The =PAGES section contains css rules that apply only to specific pages and it is divided into subsections, generally every page type available having it's subsection with it's specific css rules.

1. DD_BelatedPNG - png transparancy fix for IE6

	
<!-- //////// DD_belatedPNG - png fix for IE6 ////////  -->
<!--[if IE 6 ]>
	<script src="_layout/js/pngfix/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<![endif]-->


( from plugins.js...)

/// -------------------------------------------------------------------------------------------------------
// DD_belated - IE6 png transparency fix
// -------------------------------------------------------------------------------------------------------

if ( $.browser.msie ){
	if ( $.browser.version == 6 ){ // only apply the png transparency fix for Internet Explorer 6
		
		DD_belatedPNG.fix('#logo img');
		DD_belatedPNG.fix('.errormsg, .successmsg, .infomsg, .noticemsg. .pdf');
		DD_belatedPNG.fix('#index-slideshow-pager a, #index-slideshow-pager .activeSlide');
		
	}
}
		

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the src of an <img/> element or as a background-image property in CSS.

Usage is very simple:

  1. add function calls to DD_belatedPNG.fix().
  2. fix() requires one argument: a text string representing a CSS selector.
  3. you can roll a bunch of CSS selectors into one argument, just like how you'd do a selector group in a CSS file: fix('.example1, .example2, img');

2. Cufon - font replacement

				
<!-- //////// Cufon - font Replacement ////////  -->
<script src="_layout/js/cufon/cufon.js" type="text/javascript"></script>
<script src="_layout/js/cufon/Museo_Sans_500.font.js" type="text/javascript"></script>

( from plugins.js...)

// -------------------------------------------------------------------------------------------------------
// Cufon - font replacement
// -------------------------------------------------------------------------------------------------------

if ( ! ( $.browser.msie && ($.browser.version == 6) ) ){ // only apply cufon on modern browsers

	Cufon.replace('h1, h2, h3, h4, h5, h6, #dropdown-menu li a', {hover: true});
}
		

Cufon is used to replace standard fonts with more stylish ones. The custom font the template uses is called Museo Sans 500.

If you want to use another custom font, first you must generate a file with that the cufon can use. You can do this here. Then add the file in /_layout/js/cufon and change this line <script src="_layout/js/cufon/Museo_Sans_500.font.js" type="text/javascript"></script> with a link to the new file.

Usage of cufon is very simple:

  1. add function calls to Cufon.replace().
  2. replace() requires one argument: a text string representing a CSS selector.

Note: Cufon font replacement is only called if the browser is not Internet Explorer 6 [ if ( ! ( $.browser.msie & ($.browser.version == 6) ) ) ]

3. Tipsy (jQuery plugin) - display tooltips out of <a>'s title attribute

Another script added is Tipsy - a jQuery pluggin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.


<!-- //////// Tipsy - tooltips ////////  -->
<script src="_layout/js/tipsy/jquery.tipsy.js" type="text/javascript"></script>
<link href="_layout/js/tipsy/css.tipsy.css" rel="stylesheet" type="text/css" />

( from plugins.js...)

// -------------------------------------------------------------------------------------------------------
// Tipsy - facebook like tooltips jQuery plugin
// -------------------------------------------------------------------------------------------------------

$('.tip').tipsy({gravity: 'w', fade: true});		
		

It is configured to transform the title attribute of anchor tags <a> with the class class="tip" into tooltips. For more customization purposes check out the documentation and examples at http://onehackoranother.com/projects/jquery/tipsy/#examples

4. PrettyPhoto - lightbox (jQuery plugin)

PrettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox.


<!-- //////// prettyPhoto - lightbox ////////  -->
<script src="_layout/js/prettyphoto/jquery.prettyPhoto.js" type="text/javascript"></script>
<link href="_layout/js/prettyphoto/css.prettyPhoto.css" rel="stylesheet" type="text/css" />

( from plugins.js...)

// -------------------------------------------------------------------------------------------------------
// pretyPhoto - jQuery lightbox plugin
// -------------------------------------------------------------------------------------------------------

$("a[rel^='prettyPhoto']").prettyPhoto({
	opacity: 0.80, 						// Value between 0 and 1
	default_width: 500,
	default_height: 344,
	theme: 'light_square', 				// light_rounded / dark_rounded / light_square / dark_square / facebook 
	hideflash: false, 					// Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto 
	modal: false 						// If set to true, only the close button will close the window 
});

( from portfolio-1-column.html...)
<a href="_content/portfolio/640x550.jpg" class="portfolio-item-preview" rel="prettyPhoto[portfolio]">
	<img src="_content/portfolio/460x180-3.jpg" width="460" height="180" alt="" />
</a>

		

How to use:

5. Cycle - Content slider (jQuery plugin)

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.

The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned.


<!-- //////// Cycle - content slider  ////////  -->
<script src="_layout/js/cycle/jquery.cycle.all.min.js" type="text/javascript"></script>

...

<div id="slideshow-index">
				
	<ul>
		<li>
			<img src="_content/index/slider/940x350-1.jpg" width="940" height="350" alt="" />
			<div class="slidetext">
				
				<h2>Proin porttitor<br /> pulvinar risus nec</h2>
				<p>Sed interdum eleifend mollis. Proin quis lectus libero. Integer eu lectus erat, id aliquet risus.
				 Vivamus vitae mollis purus. Fusce id diam at purus sodales mollis.  <a href="#">more</a></p>

			</div>
		</li><!-- end slide 1 -->
		<li>
			<img src="_content/index/slider/940x350-2.jpg" width="940" height="350" alt="" />
			<div class="slidetext">
				
				<h2>Curabitur<br /> sed sollicitudin orci.</h2>
				<p>Nunc eu tellus sed felis vestibulum pulvinar sed ac enim. Quisque tincidunt urna id arcu egestas
				 a rhoncus purus molestie erat eget nunc varius. <a href="#">more</a></p>
				
			</div>
		</li><!-- end slide 2 -->
		<li>
			<img src="_content/index/slider/940x350-3.jpg" width="940" height="350" alt="" />
			<div class="slidetext">
				
				<h2>Suspendisse vest<br /> pretium laoreet</h2>
				<p>Aliquam erat volutpat. Maecenas tincidunt porta hendrerit. Sed quis tristique nulla. Fusce volutpat
				 lobortis tellus sed tincidunt consequat egestas a elementum dolor. <a href="#">more</a></p>
				
			</div>
		</li><!-- end slide 3 -->
	</ul>
	
	<div id="index-slideshow-pager">&nbsp;</div>
	
</div><!-- end #slideshow -->	
...

( from style.css...)

/* =slideshow-index
-----------------------------------------------------------------------------------------------*/

#slideshow-index{ position:relative; z-index:10; }

	#slideshow-index ul{ position:relative; width:940px; height:350px; overflow:hidden; margin-bottom:0; list-style:none; z-index:15; }
	#slideshow-index ul li{ width:940px; height:350px; position:relative; }
	#slideshow-index ul li img{ position:absolute; top:0; left:0; z-index:20; }
	
		#slideshow-index ul li .slidetext{ position:absolute; bottom:65px; right:0px; z-index:25; overflow:hidden;
										   padding:45px 50px; width:360px; height:130px; background:url(images/bg-slider.png) repeat top left; }
			.slidetext h2{ color:#fff; }
			.slidetext p{ color:#999; margin-bottom:0; }								  
			.slidetext a{ color:#fff; text-decoration:underline; }	
								
#index-slideshow-pager{ width:200px; text-align:left; z-index:35; position:absolute; left:20px; bottom:12px;  }
.ie7 #index-slideshow-pager{ bottom:15px; }								  
#index-slideshow-pager a{ text-align:left; background:url(images/bg-pager.png) no-repeat 0 0; display:inline-block; 
						 width:14px; height:14px; margin-left:1px; outline-style:none; text-indent:-9999px; }
#index-slideshow-pager .activeSlide{ background:url(images/bg-pager.png) no-repeat 0 -64px; }

...

( from plugins.js...)

// -------------------------------------------------------------------------------------------------------
// Cycle - slider jQuery plugin 
// -------------------------------------------------------------------------------------------------------

$('#slideshow-index ul').cycle({
	timeout: 5000,// milliseconds between slide transitions (0 to disable auto advance)
	fx: 'fade',// choose your transition type, ex: fade, scrollUp, shuffle, etc...            
	pager: '#index-slideshow-pager',// selector for element to use as pager container
	delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
	speed: 1000,  // speed of the transition (any valid fx speed value) 
	pause: true,// true to enable "pause on hover"
	cleartypeNoBg: true,// set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
	pauseOnPagerHover: 0 // true to pause when hovering over pager link
});
		

As you can see the container element is an UL and each LI becomes a slide.
So to add another slide you just have to add another LI element.

6. Tabify - Tabbed content with ease (jQuery plugin)

		
<!-- //////// Tabify - create tabs ////////  -->
<script src="_layout/js/tabify/jquery.tabify-1.4.js" type="text/javascript"></script>

...

<ul id="tab-1" class="tabs-menu fixed">
	<li class="current"><a href="#content-tab-1-1">Why Us?</a></li>
	<li><a href="#content-tab-1-2">Testimonials</a></li>
</ul>

<div id="content-tab-1-1" class="tabs-content">

	<p>Nam eu tortor eget nunc blandit rutrum. Praesent hendrerit ante sed nulla molestie gravida.
	 Vestibulum ante ipsum primis in faucibus orci luctus.</p>

	
	<ul class="checklist">
		<li>Lorem ipsum dolor sit amet consectetur.</li>
		<li>Phasellus adipiscing ante ac mi laoreet.</li>
		<li>Fusce iaculis lectus quis enim dictum ultrices.</li>
	</ul>

</div>
<div id="content-tab-1-2" class="tabs-content">

	
	<blockquote>
		<p>Praesent nec aliquet elit. Nullam convallis placerat metus, sit amet ultrices nulla
		 faucibus sit amet. Quisque dictum lorem sedep sem.
		 <br /><span><strong>John Doe</strong>, Some Business.</span></p>
	</blockquote >
	
</div>

...

( from plugins.js...)

// -------------------------------------------------------------------------------------------------------
//  Tabify - jQuery tabs plugin
// -------------------------------------------------------------------------------------------------------

$('#tab-1').tabify();		
		

To create a tabs section you have to create the tab menu which is a UL with the class .tabs-menu applyed and a unique ID. Then for each tab in the menu you have to create a DIV with the class .tabs-content applyed and an ID that matches the one the link in the tab menu is pointing too.

When you have created this necessary html code you need to call the tabify method.

7. Accordeon - Super simple accordion (jQuery plugin)

		
<!-- //////// Accordion - create accordions ////////  -->
<script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script>

...

<ul id="accordion-1" class="accordion fixed">
	<li>
		<a href="#accordion-1-slide-1">Accordeon Slide 1</a>
		<div>
		
			<p>Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum sit amet urna egestas rhoncus.
			 Etiam quis lacus a nulla lacinia lobortis ut nec orci. Morbi in metus non tellus viverra convallis
			 quis sit amet lacus.</p>
		
		</div>

	</li>
	<li>

		<a href="#accordion-1-slide-2">Accordeon Slide 2</a>
		<div>
		
			<p>Vivamus in nibh cursus ipsum condimentum imperdiet. Mauris in magna sed felis ornare rhoncus.
			 Etiam ac mi id leo tincidunt gravida sit amet vel erat. Fusce in magna neque. Vestibulum dignissim
			 diam non arcu vehicula scelerisque ornare felis pellentesque. Mauris ac metus arcu.</p>
		
		</div>
	</li>

</ul>

...

( from style.css...)

/* =accordion
-----------------------------------------------------------------------------------------------*/
.accordion { list-style-type: none;  }
.accordion li { background:#212121; cursor: pointer; float: left; display: block; width:100%; }
.accordion li.current>a { background: url(images/bg-accordion.png) no-repeat right 8px; }
.accordion li div { padding:20px 20px; background:#f5f5f5; }
.accordion li a{ text-decoration: none; display: block; cursor: pointer; background: url(images/bg-accordion.png) no-repeat right -55px; 
				 padding:5px; border-bottom:1px solid #ffffff;  padding:5px 20px; color:#fff; }

...

( from plugins.js...)

// -------------------------------------------------------------------------------------------------------
//  Accordeon - jQuery accordeon plugin
// -------------------------------------------------------------------------------------------------------
		
$('#accordion-1').accordion();		
		

8. Contact Form (Custom JS)

		
<!-- //////// Validity - form validation ////////  -->
<script src="_layout/js/validity/jquery.validity.js" type="text/javascript"></script>
<link href="_layout/js/validity/css.validity.css" rel="stylesheet" type="text/css" />

...

<form id="contact-form" class="fixed" action="javascript:void(0);">
	<fieldset>
		<p id="formstatus"></p>

		<p>
			<label for="name">Your name: <span class="required">*</span></label><br />
			<input class="text" type="text" id="name" name="name" value="" />
		</p><p>
			<label for="email">Your Email Adress: <span class="required">*</span></label><br />
			<input class="text" type="text" id="email" name="email" value="" />
		</p><p>
			<label for="subject">Subject: <span class="required">*</span></label><br />
			<input class="text" type="text" id="subject" name="subject" value=""  />
		</p><p>
			<label for="message">Message: </label><br />
			<textarea id="message" name="message" rows="3" cols="25"></textarea>
		</p><p>
			<input type="submit" name="submit" value="Send!" />
			<br />
		</p>
	</fieldset>

</form><!-- end #contact-form -->

...

( from scripts.js...)

// -------------------------------------------------------------------------------------------------------
// Form Validation script - used by the Contact Form script
// -------------------------------------------------------------------------------------------------------

function validateMyAjaxInputs() {

	$.validity.start();
	// Validator methods go here:
	$("#name").require();
	$("#email").require().match("email");
	$("#subject").require();	

	// End the validation session:
	var result = $.validity.end();
	return result.valid;
}

// -------------------------------------------------------------------------------------------------------
// Form Clear
// -------------------------------------------------------------------------------------------------------

$.fn.clearForm = function() {
  return this.each(function() {
 var type = this.type, tag = this.tagName.toLowerCase();
 if (tag == 'form')
   return $(':input',this).clearForm();
 if (type == 'text' || type == 'password' || tag == 'textarea')
   this.value = '';
 else if (type == 'checkbox' || type == 'radio')
   this.checked = false;
 else if (tag == 'select')
   this.selectedIndex = -1;
  });
};


// -------------------------------------------------------------------------------------------------------
// Contact Form 
// -------------------------------------------------------------------------------------------------------

$("#contact-form").submit(function () {
									
	if (validateMyAjaxInputs()) { //  procced only if form has been validated ok with validity
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "_layout/php/send.php",
			data: str,
			success: function (msg) {
				$("#formstatus").ajaxComplete(function (event, request, settings) {
					if (msg == 'OK') { // Message Sent? Show the 'Thank You' message
						result = '<div class="successmsg">Your message has been sent. Thank you!</div>';
						$('#contact-form').clearForm();
					} else {
						result = msg;
					}
					$(this).html(result);
				});
			}

		});
		return false;
	}
});

...

( from send.php...)

/////////// Add your own email below //////////////// 

define("WEBMASTER_EMAIL", 'bitpublimedia@gmail.com');	
		

To make the contact script work you just have to go in the send.php file located in _layout/php/ and change in the line below the email adress with your own.

The way the email works is that the contact.html file calls through ajax the send.php file ( if the inputs are properly filled out) it is processed and the result is returned to the contact.html page and placed in <p id="formstatus"></p>. So you must have it loaded on a server with php enabled to get it to work otherwise it will return the php code.

If the mail is succesfully sent then the contact form is cleared. If you do not want the form to be cleared delete the following highlited line only:

		
( from scripts.js...)		
...
$("#formstatus").ajaxComplete(function (event, request, settings) {
	if (msg == 'OK') { // Message Sent? Show the 'Thank You' message
		result = '<div class="successmsg">Your message has been sent. Thank you!</div>';
		$('#contact-form').clearForm();
	} else {
...					
		

Validity contact form validation (jQuery plugin) is used to validate the inputs. The validateMyAjaxInputs() function contains the rules the info filled in the inputs must follow in order to be validated. If you add new inputs and want new rules you have to add them in this function. Read the Validity documentation for more info.


When Starting to create a new website you have two options:

  1. Edit the put togheter website in the /01.html-website folder.
  2. Build you own by selecting page templates from the /02.html-website-pages folder and linking them togheter.

This template is possible in part also thanks to:

  1. JQuery - Javascript Framework
  2. Cufon - font replacement (jQuery plugin)
  3. DD_BelatedPNG- png transparancy fix for IE6 (jQuery plugin)
  4. Tipsy - display tooltips (jQuery plugin)
  5. PrettyPhoto - lightbox (jQuery plugin)
  6. Validity - contact form validation (jQuery plugin)
  7. Cycle - Content slider (jQuery plugin)
  8. Tabify - Tabbed content with ease (jQuery plugin)
  9. Accordeon - Super simple accordion (jQuery plugin)