“Xero XHTML & CSS Template” Documentation by “Wizy Labs” v1.0

“Xero Theme Documentation”

Created: 05/08/2010
By: Wizy Labs
Email: taha@wizylabs.com

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. Make sure to check the theme files in the /template folder. It has better, more commented and clear code than the preview site. Thanks so much!

NOTE: Only parent sections are listed below in the table of contents. Each section may have a children sections

HTML Structures
Template Components (eg header, footer etc...)
Blog Layout
Portfolio Layout
Contact Form
HTML Elements
CSS in the template
jQuery in the template

Note that in this section, an outer/general layout/code will be given. No content will be added just yet

a) Front Page HTML Structure - HTML Structures - top

Below is the general HTML structure of the front page. Notice the class front_page in the body tag, this class is just to use a different background image for the header on the front page only.

The code below shows all the general elements, it has no content just yet. Also notice that the header, content, sidebar and footer divs has an outer 100% width container. Please do not remove these 100% containers otherwise it will result in layout collapsing.

The front page's layout consist of header, slider, front boxes, content, sidebar and footer

<!DOCTYPE HTML>
<html lang="en_US">
<head>
<meta charset="UTF-8">
<title> [.. page title ..] </title>
</head>

<body class="front_page">
<div id="wrapper">
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> [.. contains an anchor tag for the logo link and the background image ..] </h1>
			<!-- end logo -->
			
			<ul id="nav">
				[.. containes all menu's list items and sub lists ..]
			</ul>
			<!-- end navigation -->
			
			<div id="slider_container">				
				<div id="slider">
					[.. contains the slide images ..]
				</div>
				<!-- actual slider--> 
			</div>
			<!-- end slider container -->
		</div>
		<!-- end actual header -->
	</div>
	<!-- end header container -->
	
	<div id="body_content">
		<div id="front_boxes">
			[.. contains the front boxes three columns and its content ..]
		</div>
		<!-- end front boxes -->
		
		<div id="content" class="has_sidebar left">
			[.. contains all the page content ..]
		</div>
		<!-- end content -->
		
		<div id="sidebar" class="right">
			[.. containes sidebar widgets and its content ..]
		</div>
		<!-- end sidebar -->
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			[.. contains footer image, footer nav and social profile nav ..]
		</div>
		<!-- end actual footer -->
	</div>
	<!-- footer container -->
</div>
<!-- end wrapper -->
</body>
</html>

b) Inner Pages HTML Structure - HTML Structures - top

The inner pages HTML structure is very similar to the front page one except that some elements are not needed for inner pages eg. the slider and the front boxes

The inner pages' layout consist of header, content, sidebar and footer

<!DOCTYPE HTML>
<html lang="en_US">
<head>
<meta charset="UTF-8">
<title> [.. page title ..] </title>
</head>

<body class="front_page">
<div id="wrapper">
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> [.. contains an anchor tag for the logo link and the background image ..] </h1>
			<!-- end logo -->
			
			<ul id="nav">
				[.. containes all menu's list items and sub lists ..]
			</ul>
			<!-- end navigation -->
			
			<div id="page_title">
				[.. containes breadcrumb naviagtion & page title ..]
			</div>
			<!-- end page title -->
		</div>
		<!-- end actual header -->
	</div>
	<!-- end header container -->
	
	<div id="body_content">		
		<div id="content" class="has_sidebar left">
			[.. contains all the page content ..]
		</div>
		<!-- end content -->
		
		<div id="sidebar" class="right">
			[.. containes sidebar widgets and its content ..]
		</div>
		<!-- end sidebar -->
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			[.. contains footer image, footer nav and social profile nav ..]
		</div>
		<!-- end actual footer -->
	</div>
	<!-- footer container -->
</div>
<!-- end wrapper -->
</body>
</html>

2. Template Components - top

Header
1. Template Doctype & Head
2. Front Page Header
3. Inner Pages Header
4. Add Your Logo
5. Navigation
6. Page Title (Inner pages only)
Slider (Front page only)
Front Boxes (Front page only)
Featured Box (Front page only)
Content Layout
1. Option 1 (content + sidebar)
2. Option 2 (fullwidth content)
3. Layout Options (use with option 2 only)
Sidebar Layout
1. Sidebar HTML Structure
2. Search Widget
3. Inline Content Widget (used as text widget in live preview)
4. Tabbed Widget
Footer Layout

Template Doctype & Head

<!DOCTYPE HTML>
<html lang="en_US">
<head>

<!-- charset -->
<meta charset="UTF-8">

<!-- Title, description and keywords -->
<title> [.. page title ..] </title>
<meta name="description" content=" [.. page description ..] ">
<meta name="keywords" content=" [.. page keywords ..] ">

<!-- Stylesheets -->
[.. stylesheets ..]

<!--[if IE]>
[.. IE Spacefic stylesheet ..]
<![endif]-->

<!-- Javascripts -->
[.. javascripts ..]
</head>

This code below is for the header layout. It is the outlines of the header and all possible parts included in it. Two versions are included below, one for the front page and the other one is for the inner pages

div#header_container and div#slider_container are just container divs to set the layout correctly. Please do not remove them or prepend any content into them.

<div id="header_container">
	<div id="header">
		<h1 id="logo"> <a href="index.html"> [.. your website's name ..] </a> </h1>
		<!-- end logo -->
		
		<ul id="nav">
			[.. containes all menu's list items and sub lists ..]
		</ul>
		<!-- end navigation -->
		
		<div id="slider_container">				
			<div id="slider">
				[.. contains the slide images ..]
			</div>
			<!-- actual slider--> 
		</div>
		<!-- end slider container -->
	</div>
	<!-- end actual header -->
</div>
<!-- end header container -->

Inner Pages Header

<div id="header_container">
	<div id="header">
		<h1 id="logo"> <a href="index.html"> [.. your website's name ..] </a> </h1>
		<!-- end logo -->
		
		<ul id="nav">
			[.. containes all menu's list items and sub lists ..]
		</ul>
		<!-- end navigation -->
		
		<div id="page_title">
			[.. containes breadcrumb naviagtion & page title ..]
		</div>
		<!-- end page title -->
	</div>
	<!-- end actual header -->
</div>
<!-- end header container -->

Add Your Logo

To add your logo, you are expected to overide the current background image, width and height of the current logo (the default one). To do so you need to append the following code in the style.css file were YOUR-LOGO-URL is the url path to your logo image and were XXX is your logo width and height in pixels

div#header h1#logo a {
	background-image: url(YOUR-LOGO-URL);
	height: XXXpx;
	width: XXXpx;
}

The navigation on this template is powered by Superfish jQuery dropdown menu. It is as simple as adding an unordered list (ul) with and id of nav for your top level menu. For the buttons to display correctly, please wrap your menu item in span tags inside the anchor tag so it should look like the following.

<ul id="nav">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>Blog</span></a></li>
</ul>

To add a children menu and a grand children menu is as simple as adding an unordered list with a class subnav after your span of the parent menu item. This time, there is no need of wrapping the menu item in a span tags. Your code should look like the following.

Say you want to add a menu item called Portfolio that has 3 child items. Web design, Identity & Print design. Under the Identity item you want to add a couple grandchild items. One is Logo Design and the other is Business Cards. Your code should look like the following

<ul id="nav">
	<li><a href="#"><span>Porfolio</span></a>
		<ul class="subnav">
			<li><a href="#">Web Design</a></li>
			<li><a href="#">Identity</a>
				<ul class="subnav">
					<li><a href="#"></a></li>
					<li><a href="#">Business Cards</a></li>
				</ul>
			</li>
			<li><a href="#">Print Design</a></li>
		</ul>
	</li>
</ul>

The code above should give out a result similar to the following

To indicate the current page, add a class current to the top level anchor tag. Like the following

<ul id="nav">
	<li><a href="#" class="current"><span>Porfolio</span></a>
		<ul class="subnav">
			<li><a href="#">Web Design</a></li>
			<li><a href="#">Identity</a>
				<ul class="subnav">
					<li><a href="#"></a></li>
					<li><a href="#">Business Cards</a></li>
				</ul>
			</li>
			<li><a href="#">Print Design</a></li>
		</ul>
	</li>
</ul>

The code above should give out a result similar to the following

Pages Title

For adding a page title (required) in the header, simply add the following code after the navigation code. The breadcrumb navigation must be wrapped in an unordered list with a class 'breadcrumb_nav'. The page title must be wrapped in h1 heading tag.

<div id="page_title">
	<ul class="breadcrumb_nav">
		<li><a href="#">[.. grand parent page ..]</a></li>
		<li><a href="#">[.. parent page ..]</a></li>
	</ul>
	<!-- end breadcrumb navitgation -->
	
	<h1>[.. page title ..]</h1>
	<!-- end breadcrumb title -->
</div>

b) Slider - Template Parts - top

The home page slider is powered by Nivo Slider. The slider code is placed below. Add the code below exactly after the navigation and before the end of div#header. To add a new slide just create a new image 'img' with the full path to the slider image; note that the slide image must be 940px by 350px. Please stick to the original size otherwise it may result in layout errors. Wrap the img with an anchor tag to hyperlink the image also to add caption, just add the title attribute to the img tag with your caption.

Please refer to the "jQuery in the template" section and "CSS in the template" section to know exactly where to load the Nivo Slider scripts and stylesheet.

<div id="slider_container">
	<div id="slider">
		[.. the img tags ..]
	</div>
	<!-- actual slider--> 
</div>
<!-- end slider container -->

Add a slide

<img src=" [.. full url to the slide image (940x350) ..] " alt="">

Add a slide with link

<a href=" [.. the slide link to ..] ">
	<img src=" [.. full url to the slide image (940x350) ..] " alt="">
</a>

Add a slide with caption

<img src=" [.. full url to the slide image (940x350) ..] " alt="" title=" [.. slide caption here (text only) ..] ">

c) Front Boxes - Template Parts - top

For the front boxes, it must be place inside the #body_content and before the #content. The front boxes code is shown below.
Note: The box icon must be 64px width by 64px height.

<div id="body_content">
	<div id="front_boxes">
		<div class="box box_1">
			<h2 class="box_title"> [.. box title ..] </h2>
			<!-- box title --> 
			
			<img src=" [.. full path to the icon (must be 64px*64px ) ..] " alt="" class="box_icon"> 
			<!-- box icon -->
			
			<p class="box_content"> [.. box content ..] </p>
			<!-- box content --> 
		</div>
		<!-- end box 1 -->
		
		<div class="box box_2">
			<h2 class="box_title"> [.. box title ..] </h2>
			<!-- box title --> 
			
			<img src=" [.. full path to the icon (must be 64px*64px ) ..] " alt="" class="box_icon"> 
			<!-- box icon -->
			
			<p class="box_content"> [.. box content ..] </p>
			<!-- box content --> 
		</div>
		<!-- end box 2 -->
		
		<div class="box box_3">
			<h2 class="box_title"> [.. box title ..] </h2>
			<!-- box title --> 
			
			<img src=" [.. full path to the icon  ..] " alt="" class="box_icon"> 
			<!-- box icon -->
			
			<p class="box_content"> [.. box content ..] </p>
			<!-- box content --> 
		</div>
		<!-- end box 3 --> 
	</div>
	<!-- end front boxes -->

	<div id="content" class="has_sidebar left"> [.. content ..] </div>
	<div id="sidebar" class="right"> [.. sidebar ..] </div>
</div>

d) Featured Box - Template Parts - top

To add a featured box, prepend the code below into the div#content and fill in all gaps, image URL and link, title, title description if there is one and the content. Please remain all Ids and Classes as it is to maintain style.

<div class="featured_box">
	<a class="featured_box_image" href=" [.. link ..] ">
		<img src=" [.. full path to the featured box image (must be 620px width and any heigh) ..] " alt="">
	</a><!-- end featured box image -->
	
	<h2 class="featured_box_title">
		[.. featured box title ..]
		<em class="heading_description"> [.. featured box description (displayed below the heading dotted line) ..] </em>
	</h2><!-- end featured box description -->
	
	<p class="featured_box_content">
		[.. featured box content ..]
	</p><!-- end featured box content -->
	
	<a href="single-post.html" class="post_read_more">(Read More)</a>
</div>

e) Content Layout - Template Parts - top

In Xero template, you have two content layouts. The first one is having the content and the sidebar. The second one is having full width content which leaves your with further more options like halfwidth, quartwidth etc...

Option 1 (content + sidebar)

Option 1, as mentioned above, allows you to have content and a sidebar on the same page. You have the choice to either keep the content on the left and the sidebar on the right or switch their positions so the sidebar becomes on the left and the content floats to the right. You can change their positions by changing the 'right' and 'left' class on both containers.

Please make sure that one of the containers (sidebar and content) has the opposite position to the other one otherwise it will result in layout collision. Also you must place the sidebar container after the content container (even if it is on the left or the right) otherwise it will result in layout collision.

<div id="body_content">
	<div id="content" class="has_sidebar left">
		[.. the content ..]
	</div>
	<!-- end content -->
	
	<div id="sidebar" class="right">
		[.. sidebar content ..]
	</div>
	<!-- end sidebar --> 
</div>
<!-- end body content -->

Option 2 (fullwidth content)

This option is very simple to understand as you are only expected to get rid of the #sidebar and the classes 'has_sidebar' & 'right' or 'left'. The code below shows exactly what to do. Make sure you read the layout options section for important notices.

<div id="body_content">
	<div id="content" class="">
		[.. your content ..]
	</div>
	<!-- end content --> 
</div>
<!-- end body content -->

Option 2 Layout Options

Using Options 2 allows you to have further more layout options like dividing the content in half, thirds etc... Below the code shows you how to do so.

Do not insert any content inside div#content directly , please wrap it with any of the options below like full, thirds, quarts etc... Also to have a good looking layout, please make sure you use suitable containers next to each other eg. Half with half, not a half with three quarters

	<div id="body_content">
		<div id="content">
			<div class="full">
				[.. full width content ..]
			</div>
			
			<div class="half">
				[.. half width content ..]
			</div>
			
			<div class="threequarts">
				[.. three quarters width content ..]
			</div>
			
			<div class="quart">
				[.. one quarter width content ..]
			</div>
			
			<div class="twothirds">
				[.. two thirds width content ..]
			</div>
			
			<div class="onethird">
				[.. one third width content ..]
			</div>
			
		</div>
		<!-- end content -->
	</div>
	<!-- end body content -->

	<div id="body_content">
		<div id="content" class="has_sidebar [.. chosen position ..]">
			[.. content ..]
		</div>
		<!-- end content -->
		
		<div id="sidebar" class="[.. chosen position ..]">
			[.. sidebar content & widgets ..]
		</div>
		<!-- end sidebar -->
	</div>
	<!-- end body content -->

Below is the code for the sidebar search widget. Please leave the inputs Ids as they are because they are used in the CSS and jQuery. You will notice that the label has the 'for' attribute targeted to the search text input and also has a class of 'auto_clear'. This converts the label into a value for the search text input and auto clears it as soon as it is focused. Please do not remove either the 'for' attribute and the class otherwise it will result in layout collision.

<form action="" id="search_widget">
	<label for="search_field" class="auto_clear">Search...</label>
	<input type="text" name="search_field" id="search_field">
	<input type="submit" name="search_submit" id="search_submit" value="">
</form>

To insert a content widget, test widget or whatever you call it, just copy the following code and fill in with the widget title and content.

<div class="inline_content_widget">
	<h3 class="widget_title">
		[.. widget title ..]
	</h3>
				
	<div class="widget_content">
		[.. widget content ..]
	</div>
	<!-- end widget content --> 
</div>
<!-- end widget -->

The tabbed widget is really simple in Xero theme. To add a new tab just prepend a new 'li' into the ul. widget_tabs with the tab title wraped in a 'span' tag. In the same time, add a new 'div' with a class 'tab_content' to the div. widget_tabs_content. Make sure that the list item and the tab content taking the same order eg. if the li added is the third, the div. tab_content added should be the third aswell. The code below explains everything.

<div class="tabbed_widget">
	<ul class="widget_tabs">
		<li><a href="#"><span> [.. tab 1 title ..] </span></a></li>
		<li><a href="#"><span> [.. tab 2 title ..] </span></a></li>
	</ul>
	<!-- end tabs titles -->
				
	<div class="widget_tabs_content">
		<div class="tab_content">
			[.. tab 1 content ..]
		<div class="tab_content">
			[.. tab 2 content ..]
		</div>
	</div>
	<!-- end tabs content -->
</div>
<!-- end widget -->

The templates footer is divided into two parts, the copyright info and the footer nav. The copyright info is an unordered list with to list items. The first one is an image which acts like the footer logo. The second list item is the footer text and the copyright info. You can fill this part with whatever you want but please keep it short.

The second part is the footer nav container which contains to unordered lists. The first one is the footer navigation. You can link to anything in this navigation eg. Credits, advertise etc... To add a new nav item, append a new list item 'li' with a anchor tag 'a' in it. Insert the nav item text in the anchor tag and add a '/' character after the anchor tag to keep things tidy. Please do not add the forward slash on the last list item. I apologies that I could not sort the forward slash character with jQuery as I have to get rid of the it on the last 'li' item and I couldn't.

The second unordered list is for the social profiles. It is pretty self explanatory as you only need to add list items with an anchor tag that contains the social profile icon as an 'img' tag. The code below with explain everything. Please do not remove any classes or Ids from the elements as it is used the elements styles.

<div id="footer">
	<ul class="copyright_info reset_style">
		<li><img src="[.. full path to your footer logo ..]" alt="" id="footer_logo" class="reset_style center"></li>
		<li> [.. footer text, one line max ..] </li>
	</ul>
	<!-- end footer copyright infor and footer logo -->
	
	<div class="footer_nav_container">
		<ul class="footer_nav reset_style">
			<li><a href="#"> [.. nav item 1 ..] </a> /</li>
			<li><a href="#"> [.. nav item 2 ..] </a> /</li>
			<li><a href="#"> [.. nav item 3 ..] </a> /</li>
			<li><a href="#"> [.. nav item 4 ..] </a></li>
		</ul>
		<!-- end footer nav -->
		
		<ul class="social_profiles reset_style">
			<li><a href="#"><img title="By mail" src="images/icons/social_profiles/16/email.png"></a></li>
			<li><a href="#"><img title="My Facebook account" src="images/icons/social_profiles/16/facebook.png"></a></li>
			<li><a href="#"><img title="My Flickr account" src="images/icons/social_profiles/16/flickr.png"></a></li>
			<li><a href="#"><img title="My Twitter account" src="images/icons/social_profiles/16/twitter.png"></a></li>
			<li><a href="#"><img title="RSS feed" src="images/icons/social_profiles/16/rss.png"></a></li>
		</ul>
		<!-- end social profiles nav -->
	</div>
	<!-- end footer nav container -->
</div>

3. Blog Layout - top

Blog Page
Single Blog Post

a) Blog Page - blog layout - top

To add a blog page, in the content div add the code below and fill it in with the desired content. Please remain the ids and classes names as it is and stick to the right image size to save the look and the layout. Copy/Past the code to add more posts

Replace the [.. content ..] with the blog post code

<div id="body_content">
    <div id="content" class="has_sidebar [.. chosen position ..]">
        [.. content ..]
    </div>
    <!-- end content -->
     
    <div id="sidebar" class="[.. chosen position ..]">
        [.. sidebar content & widgets ..]
    </div>
    <!-- end sidebar -->
</div>
<!-- end body content -->

The blog post code

<div class="post">
	<a href=" [.. post permalink ..] " class="post_thumb">
		<img src=" [.. post thumbnail url 220x200px ..] " alt="">
	</a>
	<!-- post thumb --> 
	
	<div class="post_content">
		<h2 class="post_title"><a href=" [.. post permalink ..] "> [.. post title ..] </a></h2>
		<!-- post title --> 
		
		<div class="post_info">
			<ul class="post_cats">
				<li><a href="#"> [.. category 1 ..] </a> /</li>
				<li><a href="#"> [.. category 2 ..] </a></li>
			</ul>
			<!-- post categories --> 
			
			<p> [.. post date &amp; author name ..] </p>
			<!-- post info --> 
			
			<span class="comment_count"> [.. comment count (numbers only) ..] </span>
			<!-- comment count --> 
		</div>
		<!-- end post info -->
		
		<p class="post_brief">
			[.. post excerpt ..]
		</p>
		<!-- end post excerpt --> 
		
		<a href="single-post.html" class="post_read_more">(Read More)</a>
	</div>
	<!-- end post content --> 
</div>
<!-- end post -->

b) Single Blog Post - blog layout - top

The single blog post must be placed inside the content div. Replace the [.. content ..] in the following code with the code from the sections below. Also all the code from the following sections must be place inside a div with an ID of sgl_post

<div id="body_content">
    <div id="content" class="has_sidebar [.. chosen position ..]">
        [.. content ..]
    </div>
    <!-- end content -->
     
    <div id="sidebar" class="[.. chosen position ..]">
        [.. sidebar content & widgets ..]
    </div>
    <!-- end sidebar -->
</div>
<!-- end body content -->

Signle Post Body

The single post body consists of four parts, post info, post categories, post title and post content. Post info is where the comments count, date posted, author name and post image goes. Please remain the attr width of the post image as it is as it fixes a renedering issue. Post categories area for the categories containing the post. In the post categories are please append a forward slash "/" after the anchor tag to separate the categories. The last two parts are pretty self explanatory, post title is for the title and post content is for its content.

Note: Please remain all Ids and classes and stick to the allowed post image size.

<div id="sgl_post">

	<div class="post_info_image">
		<ul class="post_info">
			<li><span class="comment_icon"> [.. comment count ..] </span></li>
			<li><span class="date_icon"> [.. date posted ..] </span></li>
			<li><span class="author_icon"> [.. author name ..] </span></li>
		</ul>
		<!-- end post info -->
		
		<div class="post_image_container">
			<img src=" [.. full path to post image, mus be 480x200px ..] " width="486" class="post_image">
		</div>
		<!-- end post image -->
	</div>
	<!-- end post info container -->
	
	<ul class="post_cats">
		<li><a href="#">Category</a> /</li>
		<li><a href="#">Category</a></li>
	</ul>
	<!-- end post categories -->
	
	<h2 class="post_title">
		[.. post title ..]
	</h2>
	<!-- end post title -->
	
	<div class="post_content">
		[.. post content ..]
	</div>
	<!-- end post content -->
	
	
	<!--
	Rest of the code from the following sections
	-->
</div>

Single Post Widgets

The post widget consists of two parts, the post sharing container and the author bio container. The code bellow must be inserted straight after the div.post_content. The code is self explanatory and well commented.

Note: Buttons and buttons array is allowed in the bio section

<div class="post_widgets">
	<div class="post_share">
		<h3> [.. post share title e.g. 'share this post' ..] </h3>
		<ul class="share_icons">
			[.. shring options, wrap with 'li' tags ..]
		</ul>
	</div>
	<!-- end post share -->
	
	<div id="author_bio_container">
		<img src="images/global/avatar_small.png" id="author_avatar" alt="">
		<!-- end post author avatar -->
		
		<div id="author_bio">
			<h4 class="author_name"> [.. auhtor name ..] </h4>
			<p>Rollover the avatar to read this author's bio</p>
		</div>
		<!-- end post author name and bio message -->
		
		<div id="bio" class="bio_tooltip">
			<p class="noBottomMargin">
				[.. author bio ..]
			</p>
			
			<!--
			<ul class="button_array">
				<li><a class="small_button" href="#">My Blog</a></li>
				<li><a class="small_button" href="#">My porfolio</a></li>
			</ul>
			-->
		</div>
		<!-- end author bio -->
		
	</div>
	<!-- end author bio --> 
</div>
<!-- end post widget -->

Single Post Comments

Post comments section is quite tricky to understand as it has parent and child comments and can get confusing of you have lots of them. I decided to wrap the main comments in a ul with an ID of comments_container. Then the comment is wraped in a 'li' tag (hence ul) with its content. The main ul (parent comments) has an ID of 'comments_container'. Then the child comments are wrapped in another ul tag with a class 'child_comments_container'. If there is a chilid of a child, it will be wrapped in another ul with a class 'grandchild_comments_container'. The code shows the structure.

<ul id="comments_container">
	<li>
		[.. parent comment here ..]
		
		<ul class="child_comments_container">
			<li>
				[.. child comment here ..]
				
				<ul class="grandchild_comments_container">
					<li>
						[.. grand child comment here ..]
					</li>
					<!-- end child comment -->
					
					<li> [.. grand child comment here ..] </li>
					<!-- end child comment -->
				</ul>
				<!-- end grand child comments container -->
			</li>
			<!-- end child comment -->
			
			<li> [.. child comment here ..] </li>
			<!-- end child comment -->
		</ul>
		<!-- end child comments container -->
	</li>
	<!-- end parent comment -->
	
	<li> [.. parent comment here ..] </li>
	<!-- end parent comment -->
</ul>
<!-- end main comments container -->

The actual comment is the same in all levels, parent, child and grandchild. It is shown in the code below. Replace where is says [.. parent comment here ..], [.. child comment here ..], [.. grand child comment here ..] with the code below filled in with your content. Please do not change any Ids or class names as it is essential for the styling and layout.

	<li>
		<div class="comment_container">
			<a href="#" class="commentor_avatar"><img src=" [.. full path to commentor avatar ..] " alt=""></a>
			<!-- end commentor avatar -->
			
			<div class="comment">
				<ul class="comment_author_date">
					<li><h4 class="commentor_name"> [.. Commentor Name ..] </h4></li>
					<li><span class="posted_on"> [.. date and time posted ..] </span></li>
				</ul>
				<!--  end comment author and date -->
				
				<div class="comment_content">
					[.. comment content ..]
				</div>
				<!-- end comment content -->
				
				<a href="#" class="reply_button">Reply</a>
				<!-- end comment reply button -->				
			</div>
			<!-- end comment -->
		</div>
		<!-- end comment container -->
	</li>

Single Post Comment Form

The comment form code is pretty self explanatory. My only concern here is to leave the class auto_clear on the lables to add the auto clear form value. And also please remain all Ids and classes as it is.

<div id="comment_form_container">
	<h2>Post Your Comment</h2>
	
	<form action="" id="comment_form">
		<label for="comment_form_name" class="auto_clear">Name</label>
		<input type="text" name="comment_form_name" id="comment_form_name">
		
		<label for="comment_form_email" class="auto_clear">Email</label>
		<input type="text" name="comment_form_email" id="comment_form_email">
		
		<label for="comment_form_website" class="auto_clear">Website</label>
		<input type="text" name="comment_form_website" id="comment_form_website">
		
		<label for="comment_form_comment" class="auto_clear">Your Comment</label>
		<textarea name="comment_form_comment" id="comment_form_comment" cols="30" rows="10"></textarea>
		
		<input class="submit" type="submit" value="Add Comment" id="comment_form_submit" name="comment_form_submit">
	</form>
</div>

4. Portfolio Layout - top

Portfolio Heading
Portfolio Option 1
1. Full width project
2. Half width project
Portfolio Option 2
Portfolio Option 3
1. Adding a project
Portfolio Pagination

a) Portfolio Page Heading - Portfolio layout - top

Adding a heading in the portfolio page is same as adding it on any other page, the only concern is that it must be added in a div with a class of 'full'. This is just to fix a left and right margin issue. You can also add a short description for the portfolio wrapping it in 'p'.

<div class="full">
	<h2> [.. Heading ..]
		<em class="heading_description"> [.. heading description ..] </em>
	</h2>
</div>
<!-- end full width container -->

a) Portfolio Option 1 - Portfolio layout - top

Using this option will allow you to have a project image and a short description, also a check list to list all the features of the project. It is your choice to enable the colorbox plugin on this portfolio or not for adding an image gallery for each project. Please refer to the 'HTML elements' section and head down to the 'buttons' part to learn how to add buttons with different sizes and icons. If you are adding any buttons, please place it after the checklist to save the layout look.

Full Width project

Please copy and paste the code below if you want to add a full width project and fill it in with your content. Please note that there is a class 'full' to identify that it is a full width project. Please remain all Ids and classes to save the style and the layout.

<div class="folio1 full">
	<img src=" [.. full path to project image, must 620 width and prefered to have a 150px heigh ..] " alt="" class="project_image">
	<!-- end project image -->
	
	<div class="project_details">
		<h3 class="project_title"> [.. project title ..] </h3>
		<!-- end project title -->
		
		<p class="description">
			[.. project description ..]
		</p>
		<!-- end project description -->
		
		<ul class="checklist">
			<li> Feature 1 </li>
			<li> Feature 2 </li>
		</ul>
		<!-- end checklist -->
		
		<ul class="button_array">
			[.. please refer to the buttons section in the HTML Elements section ..]
		</ul>
		<!-- end button array -->
	</div>
	<!-- end project details -->
</div>
<!-- end full width folio item -->

Half Width project

If you want to use the half width portfolio item, use the same code as the full width one and change the class on div. folio1 from 'full' to 'half' and thats all.

a) Portfolio Option 2 - Portfolio layout - top

Using this option will allow you to have a an image thumbnail either half width or quart width, you will also be able to add the product title just by adding the alt attribute on the image thumbnail and jQuery will take care of the rest.

You can either enable colorbox plugin and target the anchor tag to a full size image or add a url to the project website or blog post. If you are using colorbox to play a flash or open a full size image, add classes play or zoom or zoom_rounded to the anchor tag wrapping the image t add the fading animation to the image.

Please refer to the 'HTML elements' section and head to 'Image fade animation' to know about all available animations. Also, please refer to the 'jQuery in the Template' section to know how to work with colorbox and its options.

The projects image will be wrapped in 'ul' tag with id of 'folio2'. The code below shows how to add half and quart width project images.

<ul id="folio2">
	<li class="half">
		<a class=" [.. animation type class ..] " href=" [.. url or colorbox pluign ..] ">
			<img src=" [.. full path to image thumbnail, must be 460x150px ..] " alt=" [.. project title ..] ">
		</a>
	</li>
	<!-- end half width project -->
	
	<li class="quart">
		<a class=" [.. animation type class ..] " href=" [.. url or colorbox pluign ..] ">
			<img src=" [.. full path to image thumbnail, must be 220x150px ..] " alt=" [.. project title ..] ">
		</a>
	</li>
	<!-- end quart width project -->
</ul>

a) Portfolio Option 3 - Portfolio layout - top

Using this option will allow you to have a project title and description and also a project image slideshow using nivo slider.

Adding a new project

Adding a new project is almost identical to adding projects in portfolio option 1. The code below is pretty self explanatory. For adding slides jus add a new 'img' tag with the image path (must be 620px by 250px) and a title if you want a caption. Also refer to the 'jQuery in the template' and head to nive slider part to know where exactly how to set it up the right way for this template.

To break projects, please add a span with class 'br-dashed' to add a dotted line with top and bottom margins to breake projects from each other.

<div class="folio3">
    <div class="project_details">
        <h3 class="project_title"> [.. project title ..] </h3>
        <!-- end project title -->
         
        <p class="description">
            [.. project description ..]
        </p>
        <!-- end project description -->
         
        <ul class="checklist">
            <li> Feature 1 </li>
            <li> Feature 2 </li>
        </ul>
        <!-- end checklist -->
         
        <ul class="button_array">
            [.. please refer to the buttons section in the HTML Elements section ..]
        </ul>
        <!-- end button array -->
    </div>
    <!-- end project details -->
	
	<div class="project_slideshow">
		<img src=" [.. image slide 1 ..] " alt="">
		<img src=" [.. image slide 2 ..] " alt="">
		<img src=" [.. image slide 3 etc... ..] " alt="">
	</div>
	<!-- end project slidehsow -->
</div>

a) Adding Pagination - Portfolio layout - top

Adding pagination is very simple and it is the same in everywhere else template wide. Well, just copy the code below and its pretty self explanatory. To determine the current page, add a current class to the current anchor tag holding the page number. Please refer to buttons part in the 'HTML elements' section to learn more about paginations and its options

<ul class="pagination">
	<li><a href="#" class="large_button">&laquo; Pravious</a></li>
	<li><a href="#" class="large_button current">1</a></li>
	<li><a href="#" class="large_button">2</a></li>
	<li><a href="#" class="large_button">3</a></li>
	<li><a href="#" class="large_button">4</a></li>
	<li><a href="#" class="large_button">5</a></li>
	<li><a href="#" class="large_button">Next &raquo;</a></li>
</ul>

5. Contact Form - top

Contact form
Adding you settings

a) Contact form - Contact form - top

For adding the contact from, please copy the code below and past it where desired. It is preferred to add the following code in a div#content that has a sidebar next to it (same as the preview site). Just style wise.

Please refer to the 'jQuery in the template section' and head to 'contact form' part for knowing where to include the form validation and ajax processing code. Please remain all the attributes, Ids and class names the same. Only change the 'action' attribute on the 'form' tag if you changed the path of the 'contactform_processor.php' file from 'scripts/ contactform_processor.php'.

<form action="scripts/contactform_processor.php" method="post" id="contact_form">
	<ol>
		<li>
			<label for="name">Name (required)</label>
			<input type="text" name="name" class="text_field medium required" id="name">
		</li>
		<li>
			<label for="email">Email Address (required)</label>
			<input type="text" name="email" class="text_field medium required email" id="email">
		</li>
		<li>
			<label for="message">Your Message (required)</label>
			<textarea name="message" id="message" class="text_area medium required" cols="30" rows="7"></textarea>
		</li>
		<li>
			<input type="submit" value="Send Message" id="submit" class="submit">
			<input type="hidden" name="submitted" id="submitted" value="true" />
		</li>
	</ol>
</form>

b) Adding you settings - Contact form - top

To add you setting (e.g. the email for the message to be sent to) open the contactform_processor.php file in the /scripts folder and edit the code that looks like following code with your own options. Wrap your new string in double quotes "" same as the default options were and add a semi-colon ';' on the end of each line after the closing qoute.

<?php
$email_to = " the email that you want the messages to be sent to ";
$success_message = " success message e.g. You message has been successfully sent. We will respond to you ASAP";
$site_name = " you website name ";

6. HTML Elements - top

Generic Elements
Images
Buttons

a) Generic Elements - HTML Elements - top

In xero Template, nearly all HTML elements are supported, from text to lists to forms and much more. Please look at the following sections to learn more about supported elements and its options.

Text

All text and text related elements are supported in xero template, below there is a list of all supported elements.

Paragraph
Anchor
Acronym
Strong
Del
Break
Blockqoute
Pre
hr
Lists (Ordered and unordered)
Forms (all elements)
Tables (table, tbody, tr, th, td)

Lists

Lists in Xero Template divides into two categories, the ordered lists (ol) and unordered lists (ul). Ordered lists have two options. One numeric list and the other alphabetic list. Your option can be controlled by adding a class to the ol tags. The code below shows both options in ordered lists.

<ol class="ordered-decimals">
	<li> </li>
</ol>

<ol class="ordered-alphabet">
	<li> </li>
</ol>

Unordered lists have 8 options and again they can be controlled by changing the ul class name. Below there is a list of all available options and their class names also there is a code to show how they would be implemented in the code.

Default, class: 'unordered-bullet'
Arrow, class: 'unordered-arrow'
Yellow, class: 'unordered-yellow'
Notic Examination, class: 'unordered-info'
Notic Error (cross), class: 'unordered-cross'
Checklist or Tick, class: 'unordered-tick'
Red Examination, class: 'unordered-exclamation'
Earth or globe, class: 'unordered-globe'

<ul class="unordered-bullet">
	[.. Lists ..]
</ul>

<ul class="unordered-arrow">
	[.. Lists ..]
</ul>

<ul class="unordered-yellow">
	[.. Lists ..]
</ul>

<ul class="unordered-info">
	[.. Lists ..]
</ul>

<ul class="unordered-cross">
	[.. Lists ..]
</ul>

<ul class="unordered-tick">
	[.. Lists ..]
</ul>

<ul class="unordered-exclamation">
	[.. Lists ..]
</ul>

<ul class="unordered-globe">
	[.. Lists ..]
</ul>

Forms

To add an auto clearing label make sure you add a class 'auto_clear' to the label also makesure to direct the for attribute to the name of the text fiels/area that will hold the auto clearing value. Example below

<label for="hello" class="auto_clear">A auto clear label</label>
<input type="text" name="hello" id="hello" class="text_field small">

Adding a text field require a class called text_field added to the text input to target the style correctly. Also to controll the lenght of the text field or text area, please add classes 'small' or 'medium' or 'large' to adjust the lenght of the text input of textarea. An example is below

<!-- small text field -->
<input type="text" class="text_field small" value="Small width text field">

<!-- medium text field -->
<input type="text" class="text_field medium" value="Medium width text field">

<!-- large text field -->
<input type="text" class="text_field large" value="Large width text field">

<!-- small text area -->
<textarea name="" id="" cols="30" rows="5" class="small">Small width text area</textarea>

<!-- medium text area -->
<textarea name="" id="" cols="30" rows="5" class="medium">Medium width text area</textarea>

<!-- large text area -->
<textarea name="" id="" cols="30" rows="5" class="large">Large width text area</textarea>

Submit button and button tag

<!-- submit input with class submit -->
<input type="submit" class="submit" value="Submit">

<!-- button field -->
<button>A button field</button>

Warning, success, error and information notices can be added using the code below

<!-- Success Message -->
<span class="success_notice"> [.. Success message ..] </span>

<!-- Error Message -->
<span class="error_notice"> [.. Error message ..] </span>

<!-- Warning Message -->
<span class="warning_notice"> [.. Warning message ..] </span>

<!-- Information Message -->
<span class="info_notice"> [.. Information message ..] </span>

b) Images - HTML Elements - top

<!--
Image with caption, caption is the title attr
Make sure you add a class 'with_caption' to the img -->
<img src=" [.. path to img ..] " class="with_caption" title="Lorem ipsum dolor sit amet.">

<!--
Image with link
If using any alignment or reseting classes eg alignright or noTopMargin
Please add them to the anchor tag instead of the img tag  -->
<a href="#">
	<img src=" [.. path to img ..] " alt=" [.. img alt ..] ">
</a>


<!-- Image Animation, class to be added to the anchor tag -->
<a href="#" class="go"><img src=" [.. path to img ..] " alt=" [.. img alt ..] "></a>

<!--
Avaliable classes/animations
----------------------------
.go,
.play,
.zoom,
.view,
.read_more,
.external,
.arrow_left,
.arrow_right,
.read_article,
.zoom_rounded
 -->

c) Buttons - HTML Elements - top

Generic Buttons

<!-- Small Button -->
<a href="#" class="small_button">Button</a>

<!-- Large Button -->
<a href="#" class="large_button">Button</a>

Buttons Icons

<!-- small button with a magnifing glass icon -->
<a href="#" class="small_button view">Button</a>

<!-- small button with an arrow icon -->
<a href="#" class="small_button arrow">Button</a>

<!-- small button with a external site icon -->
<a href="#" class="small_button external_link">Button</a>

<!-- large button with a magnifing glass icon -->
<a href="#" class="large_button view">Button</a>

<!-- large button with an arrow icon -->
<a href="#" class="large_button arrow">Button</a>

<!-- large button with a external site icon -->
<a href="#" class="large_button external_link">Button</a>

Buttons Array

<!-- Small buttons array -->
<ul class="button_array">
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
	<li><a href="#" class="small_button">Button</a></li>
</ul>

<!-- small button pagination -->
<ul class="pagination">
	<li><a href="#" class="small_button">&laquo; Pravious</a></li>
	<li><a href="#" class="small_button">1</a></li>
	<li><a href="#" class="small_button">2</a></li>
	<li><a href="#" class="small_button">3</a></li>
	<li><a href="#" class="small_button">4</a></li>
	<li><a href="#" class="small_button">5</a></li>
	<li><a href="#" class="small_button">Next &raquo;</a></li>
</ul>


<!-- Large buttons array -->
<ul class="button_array"> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
	<li><a href="#" class="large_button">Button</a></li> 
</ul>

<!-- large button pagination -->
<ul class="pagination">
	<li><a href="#" class="large_button">&laquo; Pravious</a></li>
	<li><a href="#" class="large_button">1</a></li>
	<li><a href="#" class="large_button">2</a></li>
	<li><a href="#" class="large_button">3</a></li>
	<li><a href="#" class="large_button">4</a></li>
	<li><a href="#" class="large_button">5</a></li>
	<li><a href="#" class="large_button">Next &raquo;</a></li>
</ul>

7. CSS in the template - top

All CSS files must be included in the <head> section before the javascript files. Below is all the css files that come with the theme with a comment to let you know where it goes and on which page it should be included.

<!-- main stylesheet for ALL PAGES, found in /css folder -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

<!-- colour skin stylesheet for ALL PAGES, found in /css/skins folder
	 options are: blue, cream, green, orange, purple, red, sky-blue, yellow -->
<link rel="stylesheet" type="text/css" href="css/skins/[.. skin css name ..].css" id="skin" media="screen"> 

<!-- Nivo Slider stylsheet for HOMEPAGE ONLY, found in /css folder -->
<link rel="stylesheet" type="text/css" href="css/slider.css" media="screen">

<!-- Nivo Slider stylsheet for PORTFOLIO 3 ONLY, found in /css folder -->
<link rel="stylesheet" type="text/css" href="css/folio3.css" media="all">

<!-- Colourbox stylsheet INCLUDE WHEN NEEDED, found in /css folder -->
<link rel="stylesheet" type="text/css" href="css/colorbox.css" media="all">

Theme's default style is the 'shiny' style. You can switch it to the grunge one by adding a class 'grunge' in the body tag

<!DOCTYPE HTML>
<html lang="en_US">
<head>
	[.. head stuff ..]
</head>
<body class="grunge">
	
</body>
</html>

8. jQuery in the template - top

Xero js
Xero Forms js
SuperFish (dropdown)
NivoSlider (slideshow on homepage anf portfolio 3)
Colorbox (overlay [lightbox])
jQuery Tools (Tabs &: Author bio)

below is all the javascript files in the theme and where to inclue them.

<!-- jQuery minified 1.4, INLUDE IN ALL PAGES -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- jQuery Superfish DropDown Menu Plugin, INCLUDE IN ALL PAGES -->
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>

<!-- jQuery Tools Plugin, PAGES WITH SIDEBAR AND SINGLE BLOG POST PAGES -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

<!-- Xero Theme js file, INCLUDE IN ALL PAGES -->
<script type="text/javascript" src="js/xero.js"></script>

<!-- Xero Theme Forms js file, PAGES WITH SIDEBAR, FORMS WITH AUTO CLEAR CLASS & CONTACT US PAGE -->
<script type="text/javascript" src="js/xero.forms.js"></script>

<!-- NivoSlider jQuery Plugin, HOMEPAGE & PORTFOLIO OPTION 3 -->
<script type="text/javascript" src="js/jquery.nivoslider.pack.js"></script>

<!-- ColorBoc jQuery Plugin, WHEN NECESSARY (e.g. portfolio 2) -->
<script type="text/javascript" src="js/jquery.colorbox.min.js"></script>

a) Xero Js - jQuery in the template - top

Xero .js file is located in the main /js folder. This file contains all necessary scripts for the theme to run properly. It does all the necessary float clearing for you also it has the image animation script (fading in and out), make the dropdown actually work. It also resizes the all images site wide by six pixels, as all images added will have 2px white padding and 1px grey border which will create a mess in the layouts, in some cases the resizing script makes the image quite blurry which you may not want in a specific image, you can fix that by adding the width attribute to the img tag with the image width + 6px e.g. if the image width is 100, write the image width in the width attr as 106. Please do not edit that file unless you know what you are doing exactly.

This file is required in all pages of the theme

b) Xero Forms Js - jQuery in the template - top

Xero.forms.js is the file that handles all the form in xero theme. It has the ajax script for the theme's contact form as well as the form field value auto clear function. This file should be included in all pages that will have sidebar or the 'auto_clear' class is used. Also it should be included on the contact us page which is necessary for the contact form submission, validation and more. Use the function below on the contact form to activate the contact form transactions and validation.

<script type="text/javascript"> 
	$(document).ready(function(){	
		xeroContactForm();
	});
</script>

SuperFish Plugin is a jQuery plugin used for the dropdown menu in Xero Theme. Its file must be included in all pages after including the jQuery file. Its options is placed in xero.js file. Please do not change it unless you are sure on what you are doing. Below the options clone of the one placed in xero.js.

// SuperFish dropDown navigation options
$("ul#nav").superfish({ 
	animation:		{height:'show', opacity:'show'},
	delay:			600,
	autoArrows:		true,
	dropShadows:	false
});

d) NivoSlider - jQuery in the template - top

NivoSlider is the plugin used for the images slideshow in the template. It's used twice in this theme, once on the home page and the other on the portfolio option 3. Both times use the same js files but different stylesheets and options, please refer to the 'CSS in the Template' Section to learn more about stylesheets in the template and where to include them. Below, there is the plugin options for both on homepage and on portfolio page.

Please do not change any of the element paths in the options e.g. #slider or .folio3 .project_slideshow

Options for home page slider

$(document).ready(function(){	
	$("#slider").nivoSlider({
		effect:				'random',	//Specify sets like: 'fold, fade, sliceDown'
		slices:				20,
		pauseTime:			5000,
		directionNavHide:	false,
		pauseOnHover:		true,		//Stop animation while hovering
		manualAdvance:		false,		//Force manual transitions
		captionOpacity:		0.8		//Universal caption opacity
	});
});

Options for portfolio option 3

$(document).ready(function(){	
	$(".folio3 .project_slideshow").nivoSlider({
		effect: 'sliceDown',
		controlNav: false,
		slices: 25,
		pauseTime: 5000,
		directionNavHide: false
	});
});

e) ColorBox - jQuery in the template - top

Colorbox is the lightbox plugin used in xero theme. Please visit the colorbox documentation to get a better explanation and learn more about the plugin and it options. Please note that you can use image animation classes with this plugin to give you nice and smooth portfolio effect like the one used on the preview site of the theme.

f) jQuery Tools - jQuery in the template - top

jQuery tools plugin is a very powerful library for jQuery. In xero theme, it is used in the tabs functionality in the sidebar as well as it is used in the author bio on the single post page. Please include its js file after the jquery file. The script that activates the plugin for the tabs & the author bio tooltip is found in the xero.js file. Please do not change any options unless you know exactly what you doing.

End of documentation

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.

Taha Hesham from Wizy Labs

Go To Table of Contents