“Extensio - Clean and Modern Website Template” Documentation by “AtiX” v1.1.0


“Extensio - Clean and Modern Website Template”

Created: 05/04/2012
Last Update: 17/04/2012
By: AtiX
Contact: profile page on ThemeForest

Thank you for purchasing my theme. Please do not hesitate to contact us, we are here to help you. If you experience problems or difficulties with our template please send us an email through our profiles page here, and please, provide a link to your uploaded theme.
Thank you so much!


Table of Contents

  1. Features
  2. HTML Files Structure
  3. CSS Files Structure
  4. Color Themes
  5. JavaScript Files
  6. Contact Form
  7. PSD Files
  8. Sources and Credits

A) HTML Structure - top


B) HTML Structure - top

1. Home (index.html, homepage-2.html, homepage-3.html, homepage-4.html, homepage-5.html, homepage-6.html, homepage-7.html, homepage-8.html)

2. Sliders (index.html, slider-accordion.html, slider-carouFredSel.html, slider-nivo.html.html, slider-piecemaker.html)

3. Features
3.1 Typography (typography.html)
3.2 Elements (buttons.html, infoboxes.html, columns.html, tabs.html, pricing-tables.html, media.html)
3.3 Layouts (about.html, services.html, tour.html, faq.html, sitemap.html, 404.html, page-right-sidebar.html)
4. Portfolio Pages
4.1 Portfolio One Column (portfolio-one-column.html)
4.2 Portfolio Two Columns (portfolio-two-columns.html)
4.3 Portfolio Three Columns (portfolio-three-columns.html)
4.4 Portfolio Four Columns (portfolio-four-columns.html)
4.5 Sortable Portfolio (portfolio-sortable.html)
5. Blog Pages
5.1 Blog Layout 1 (blog-layout-1.html)
5.2 Blog Layout 2 (blog-layout-2.html)
5.3 Blog Layout 3 (blog-layout-3.html)
5.4 Blog Layout 4 (blog-layout-4.html)
5.5 Blog Single Post (blog-single-post.html)

6. Contact (contact-1.php, contact-2.php)

This theme is a fixed wide and boxed layout with 4+ columns. All of the information within the main content area is nested within a div or sections with a section id of "content". The sidebar's content is within a aside tag with a class of "sidebar". The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

HTML Structure


Main menu


The Main menu is build from floated list elements and easily extendable.

Editing the Main menu
You can easily edit the Main menu item by replacing or editing the text between the <a> element. Editing the navigation will extend the bar to the left, because they is positioned to the right. To set the navigation point related to the page on the status active u must add the class active to the related <li> element.
Also Main menu has multilevel dropdown submenu. You can easily add it to any Main menu element just adding submenu ul-li stucture.

Main menu
Main menu

Main menu with submenu structure
Main menu with submenu structure

Setting links
The navigation between different pages is simple. To set a link to the page edit the <a href="page_name.html">Example</a>


Header


The header is a block with main menu and logo.


Content


The Content section contains the whole content with pictures, text and plugins. The heigth of the Content depends on the height of the content inside.


There are 5 different sliders in template on pages index.html, slider-accordion.html, slider-carouFredSel.html, slider-nivo.html.html, slider-piecemaker.html. You can easily add/remove pictures & descripition in sliders by adding your own picures (<img src="images/your_picture.jpg" alt="" />) in related blocks:



First slider - OneByOne slider, page index.html

OneByOne Slider
Adding images to OneByOne slider
one image and its description are located in <img src="images/your_picture.jpg" class="bigImage"></img>, where

1) Recomended image sizes width 990px & height 397px.

2) Image description. Add text with header h2:

   <span class="slideh2">Be successful, <br/>it's easy!</span>

3) Image description. Add text with header h3:

   <span class="slideh3">we work for your profit!</span>

4) Image description. Add text with simple paragraph:

   <span class="slideparagraph">We are proud to deliver immediate results through active skills, and real-world tasks that are instantly relevant to everyday business life development.</span>

5) Image description. Add butons:

   <span class="slidebutton"><a href="http://themeforest.net/user/atix" target="_blank">try it free for 14 days</a></span>

6) JavaScript and CSS files for OneByOne slider are located in the folder /js/onebyone/


Second slider - Nivo slider, page slider-nivo.html, for more info go to Nivo Slider
Nivo Slider Adding images to Nivo Slider

1) Recomended image sizes width 990px & height 397px.

2) The image path are located in

	<img src="images/slider-1.jpg" width="990" height="397" alt="image description" />

3) JavaScript and CSS files for Nivo slider are located in the folder /js/nivo-slider/


Third slider - CarouFredSel slider, page slider-carouFredSel.html, for more info go to jQuery Cycle Plugin page

carouFredSel Slider Adding images to CarouFredSel Slider

1) Recomended image sizes width 990px & height 397px.

2) The image path are located in

	<li><img src="images/slider-1.jpg" width="990" height="397" alt="image description" /></li>

3) JavaScript and CSS files for CarouFredSel slider are located in the files /js/jquery.carouFredSel-5.5.0.js and /css/carousel.css


Fourth slider - Accordion slider, page slider-accordion.html

Accordion Slider
Adding images to Accordion Slider

one image and its description are located in <li>, where

1) Recomended image sizes width 990px & height 397px.

   <img src="images/slider-ac-1.jpg" alt="" class="slider_image" />

2) your image description (optional):

   <div class="accordation_text">
		  <div class="short_text">Short Description with "more" link [optional]</div>
		  <div class="detail_text">Long Description [optional]</div>
	   </div>

3) adding info & image for prettyPhoto [optional], more info prettyPhoto

   <a href="images/your_big_image.jpg"
		  rel="prettyPhoto[group_name]"
		  title="Your Image Title">
		  <img src="images/your_image_580x290.jpg" alt="" class="slider_image" />
	   </a>

4) JavaScript and CSS files for Accordion slider are located in the folder /js/accordion/


Fifth slider - Piecemaker2 3D, page slider-piecemaker.html

Piecemaker 3D Slider

1) You can add any number of images and change the colors of the slider in piecemaker.xml [/js/piecemaker/piecemaker.xml]

Piecemaker 3D Slider XML

1) JavaScript and CSS files for Piecemaker slider are located in the folder /js/piecemaker/


On several pages prettyPhoto Plugin is used for making popups. It's very simple to use it. All what u need is to change html a little bit:

<a href="images/full_size_image.jpg" rel="prettyPhoto[Your_Gallery]" title="Title for picture">
<img src="images/resized_picture.jpg" alt="" /></a>

For more information u can go to prettyPhoto Plugin page


Footer


The footer is a block with a copyright and some useful blocks located in 4 columns (e.g. Get in Touch, Social Media, For Our Clients, Flickr Stream.)



C) CSS Files and Structure - top

The CSS files are located in /css/ folder. Main CSS file contains reset data. Many browser interpret the default behavior of html elements differently. By using a general reset CSS data, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		

If you would like to edit the color, font, or style of any elements for template, find all info in css files /css/green-style.css, /css/blue-style.css, /css/magenta-style.css, /css/orange-style.css, /css/red-style.css:

Font, Document Background and Color of fonts (for <body> style):

		html {
			height:100%;
			overflow-y:hidden;
		}
		body {
			height:100%;
			color:#555;
			font:12px/21px 'Merriweather', Arial, Helvetica, sans-serif;
			background:#fff;
			min-width:990px;
		}
		img {
			border-style:none;
		}
		a {
			text-decoration: none;
			color:#b8d30b;
		}
		a:hover {
			color:#95a105;
		}
		input,
		textarea,
		select {
			font:12px 'Open Sans', Arial, Helvetica, sans-serif;
			vertical-align:middle;
			color:#555;
		}
		

Navigation styles:

		/* main nav */
		#nav {
			font:14px/17px 'Open Sans', Arial, Helvetica, sans-serif;
			position:absolute;
			top:43px;
			right:30px;
		}
		#nav ul {
			float:left;
		}
		#nav ul ul {
			display:none;
			width:206px;
			padding:5px 0;
			font-size:12px;
			position:absolute;
			top:100%;
			left:16px;
			border:1px solid #ecedf3;
			border-top:2px solid #b8d30b;
			background:#fff;
		}
		#nav ul ul ul {
			top:-6px;
			left:100%;
		}
		#nav ul li {
			position:relative;
			float:left;
			padding:0 0 0 30px;
		}
		#nav ul ul li {
			padding:0 15px;
			float:none;
			background:url(../images/divider2.png) 50% 0 no-repeat;
		}
		#nav ul ul li:first-child {
			background:none;
		}
		#nav ul ul a {
			float:none;
			width:171px;
			padding:11px 0 11px 5px;
			display:block;
		}
		#nav ul a {
			color:#555;
			float:left;
			padding-bottom:12px;
		}
		#nav ul a:hover {
			color:#222;
		}
		#nav ul li:hover ul {
			display:block;
		}
		#nav ul li:hover a {
			color:#222;
		}
		#nav ul li:hover ul a {
			color:#555;
		}
		#nav ul li:hover ul a:hover {
			color:#222;
		}
		#nav ul ul li:hover a {
			color:#555;
		}
		#nav ul ul ul li:hover a {
			color:#222;
		}
		#nav ul ul ul li:hover a:hover {
			color:#222;
		}
		#nav ul li:hover ul ul {
			display:none;
		}
		#nav ul ul li:hover ul {
			display:block;
		}
		

Footer styles:

		/* footer */
		#footer {
			display:table-row;
			width:100%;
			line-height:18px;
			background:#222;
			color:#999;
		}
		.footer-holder {
			display:table-cell;
			height:1%;
			width:100%;
		}
		#footer .container {
			height:auto;
			width:100%;
			position:relative;
			margin:0 -9999px;
			padding:0 9999px;
			background:#222;
		}
		#footer .case {
			padding:28px 30px 15px;
			overflow:hidden;
		}
		/* add */
		.add {
			width:100%;
			position:relative;
			margin:0 -9999px;
			padding:0 9999px;
			background:#1a1a1a;
		}
		#footer .add .case {
			background:#1a1a1a;
		}
		#footer h4 {
			margin:0 0 19px;
			color:#fff;
			font:bold 14px/16px 'Open Sans', Arial, Helvetica, sans-serif;
		}
		



Other css files are:

tabs.css - this style is for tabs elements.

ie.css - this style is for IE fixing.

prettyPhoto.css - this style is for prettyPhoto script.


D) Color Themes - top

This template has 5 color themes (default - green, orange, red, green, magenta) and 2 themes (wide and boxed).

To change the color theme you need to chnage in all html files this line:

<link media="all" rel="stylesheet" type="text/css" href="css/green-style.css">

Change the background image or color in boxed theme. Find the code in css:

		body {
			height:100%;
			color:#555;
			font:12px/21px 'Merriweather', Arial, Helvetica, sans-serif;
			background:#fff;
			min-width:990px;
		}
		

E) JavaScript Files - top

The theme makes use of various JavaScripts and the jQuery framework to add dynamic functionality. Some of the scripts used include:
1. jQuery
2. prettyPhoto
3. Nivo Slider
4. Validation Engine
5. An exquisite jQuery plugin for magical layouts
6. jQuery carouFredSel

If you would like to edit the javascript/jQuery code all js files are in folder "js".


Twitter


This is twitter code. Where appmobilize is the username.

		<div id="twitter_update_list_socialbox" class="twitter-wrap"></div>
		<!-- twitter start script -->
		<script type="text/javascript">	
			function twitterCallback_socialbox(twitters) {
			  var statusHTML = [];
			  for (var i=0; i<twitters.length; i++){
				var username = twitters[i].user.screen_name;
				var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
				  return '<a href="'+url+'">'+url+'</a>';
				}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
				  return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
				});		
				statusHTML.push('<article class="post"><p>'+status+'</p> <footer class="date">'+relative_time(twitters[i].created_at)+'</footer></article>');
			  }
			  document.getElementById('twitter_update_list_socialbox').innerHTML = statusHTML.join('');
			}
		</script>
		<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/appmobilize.json?callback=twitterCallback_socialbox&count=3"></script>		
		

Flickr


1. This is flickr code that is used in page sidebar with class name photostream. Where 24878717@N06 is the flickr ID.

		<div class="photostream">
			<script flickr_type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&flickr_display=random&size=s&layout=x&source=user&user=24878717@N06"></script>
		</div>
		

2. This is flickr code that is used in page sidebar with class name flickr. Where 24878717@N06 is the flickr ID.

		<section class="flickr">
			<script flickr_type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&flickr_display=random&size=s&layout=x&source=user&user=24878717@N06"></script>
		</section>
		

F) Contact Form - top

There are two php files contact-1.php and contact-2.php.

Chnage the email address with yours:

		//==============
		//CONFIGURATION
		//==============

		//IMPORTANT!!
		//Put in your email address below:
		$to = 'atixscripts@gmail.com';
		

Note: Please install the Apache Server and PHP in order to run the PHP code or files to server via FTP and test live site not local.


G) PSD File - top

All PSD Source Files files for further customization. You can find the PSD files in the folder extensio-psd.

1. extensio_blog_list.psd
2. extensio_blog_post.psd
3. extensio_homepage.psd
4. extensio_typography.psd

H) Sources and Credits - top

Special Thanks to authors of third party code or graphics:
Andreas Levers
IconSweets2 Icons

We've used the following fonts, lightbox, images, icons or other files as listed:


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.

AtiX Team

Go To Table of Contents