There are two templates for Home page layout. One uses Layer slider, second - Flex Slider. Each slider has its own bright features and nice looking design, they perfectly fit any sphere of business and projects.

Layer Slider options and settings:

						var objLayerSlider = {
												width : '100%',						
												height : '400px',
												responsive : true,					//Boolean:  (true/false)
												responsiveUnder : 940,
												sublayerContainer : 940,
												autoStart : true,					//Boolean:  If true, slideshow will automatically start after loading the page. (true/false)
												pauseOnHover : true,				//Boolean: If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container. (true/false)
												firstLayer : 1,						//Integer:  LayerSlider will begin with this layer. (Positive Integer)
												animateFirstLayer : true,			//Boolean:  (true/false)
												randomSlideshow : false,			//Boolean:  (true/false)
												twoWaySlideshow : true,				//Boolean: If true, slideshow will go backwards if you click the prev button. (true/false)
												loops : 0,
												forceLoopNum : true,				//Boolean:  (true/false)
												autoPlayVideos : false,				//Boolean:  (true/false)
												autoPauseSlideshow : 'auto',
												keybNav : true,						 //Boolean: Keyboard navigation. You can navigate with the left and right arrow keys. (true/false)
												touchNav : true,					 //Boolean:  (true/false)
												skin : 'goodnex',					 //String: You can change the skin of the Slider. (name_of_the_skin) 
												skinsPath : 'js/layerslider/skins/', //String: You can change the default path of the skins folder. Note, that you must use the slash at the end of the path. (path_of_the_skins_folder/)
												globalBGColor : '#f6f6f6',			 //CSS Color Methods. Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background. 
												navPrevNext : true,					 //Boolean: If false, Prev and Next buttons will be invisible. (true/false)
												navStartStop : false,				 //Boolean: If false, Start and Stop buttons will be invisible. (true/false)
												navButtons : false,					 //Boolean: If false, slide buttons will be invisible. (true/false)
												hoverPrevNext : true,				//Boolean:  (true/false)
												hoverBottomNav : false,				//Boolean:  (true/false)
												thumbnailNavigation : 'disabled',
												tnWidth : 100,
												tnHeight : 60,
												tnContainerWidth : '60%',
												tnActiveOpacity : 35,
												tnInactiveOpacity : 100
										};

				

Flex Slider options and settings:

						var objFlexSlider = {
												animation: "slide",			//String: Select your animation type, "fade" or "slide"
												easing: "swing",			// Refer to the link below  http://easings.net/
												direction: "horizontal",    //String: Select the sliding direction, "horizontal" or "vertical"
												controlNav: false,			//Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
												directionNav: true,			//Boolean: Create navigation for previous/next navigation? (true/false)
												slideshowSpeed: 6000,		//Integer: Set the speed of the slideshow cycling, in milliseconds
												animationSpeed: 600,        //Integer: Set the speed of animations, in milliseconds
												randomize: false            //Boolean: Randomize slide order
										};

				

All posts on Blog page are built in from blocks .preloader, .entry-title, .entry-meta, .entry-body

						<article class="entry clearfix">

						<div class="preloader">
								<a class="bwWrapper single-image link-icon" href="blog-single.html">
								<img src="images/blog/blog-img-1.jpg" alt="" >
								</a>						
						</div>

						<div class="entry-title">
								<h2 class="title"><a href="blog-single.html">-- Post Title --</a></h2>
						</div><!--/ .entry-title-->

						<div class="entry-meta">
								<span class="date"><a href="#"> -- Post Date -- </a></span>
								<span class="author"><a href="#"> -- Post Author -- </a></span>
								<span class="tag"><a href="#"> -- Post Tag -- </a>, <a href="#"> -- Post Tag -- </a></span>
								<span class="comments"><a href="#"> -- Post Comments -- </a></span>
						</div><!--/ .entry-meta-->

						<div class="entry-body">

								<p> 
								-- Post Text --
								</p>

								<a class="button default small" href="blog-single.html"> -- Learn More Button -- </a>

						</div><!--/ .entry-body-->

						</article><!--/ .entry-->

				

Please be aware that as a featured image with class .single-image .link-icon, .image-post-slider or .video-container can be set.

Here is an example of Blog page with gallery:

						<div class="image-post-slider">
						<ul>
							<li>
								<div class="preloader">
									<a href="blog-single.html" class="bwWrapper single-image link-icon" rel="gallery">
										<img src="images/blog/blog-img-2.jpg" alt="" />
									</a>
								</div><!--/ .preloader-->
							</li>
							<li>
								<div class="preloader">
									<a href="blog-single.html" class="bwWrapper single-image link-icon" rel="gallery">
										<img src="images/blog/blog-img-3.jpg" alt="" />
									</a>
								</div><!--/ .preloader-->
							</li>
							<li>
								<div class="preloader">
									<a href="blog-single.html" class="bwWrapper single-image link-icon" rel="gallery">
										<img src="images/blog/blog-img-4.jpg" alt="" />
									</a>									
								</div><!--/ .preloader-->
							</li>										
						</ul>		
					</div><!--/ .image-post-slider-->

				

Example of Blog page with video:

						<a class="bwWrapper single-image" href="blog-single.html">
								<!-- <iframe src="http://player.vimeo.com/video/10112073" width="700" height="300"></iframe> -->
						</a>
				

This template is going with working inbuilt contact form.

To make it worked simply open a file php/contact-send.php (line 6) and edit there an email address then upload all the files to your server.

You can find all elements examples on Elements page.

Here for title .acc-trigger class is used, and for content - .acc-container one

						<span data-mode="toggle" class="acc-trigger">
								<a href="#"> -- Toggle Title -- </a>
						</span>

						<div class="acc-container">

								<p>
										-- Toggle Content --
								</p>	

						</div><!--/ .acc-container-->	

				

The main and very important point using this element is that attribute href value for each link in .tabs-nav list has to match the id value in block .tab-content

						<div class="content-tabs">
								
								<ul class="tabs-nav clearfix">
										<li class="active">
												<a href="#tab1"> -- Tab Title -- </a>
										</li>	
										
										...
								</ul>
								
								<div class="tabs-container" style="height: 154px;">
										<div id="tab1" class="tab-content" style="display: block;">
												<p> -- Tab Content -- </p>
										</div>
										
										...
												
								</div>
								
						</div>

				

								<div class="info-box">

										<h2> -- Info Box Title -- </h2>
										
										<p>
												-- Info Box Text --
										</p>
										
										<a class="button default small" href="#"> -- Read More Button -- </a>

								</div><!--/ .info-box-->
								
						

						<p class="error">
								-- Alert Text --
								<a class="alert-close" href="#"></a>
						</p>
						
						<p class="success">
								-- Alert Text --
								<a class="alert-close" href="#"></a>
						</p>

						<p class="info">
								-- Alert Text --
								<a class="alert-close" href="#"></a>
						</p>

						<p class="notice">
								-- Alert Text --
								<a class="alert-close" href="#"></a>
						</p>

				

						<blockquote>
								<p> -- Blockquote Text -- </p>
						</blockquote>

				

								<div class="quote-box">
					
										<ul class="testimonials">
										
												<li>
												
														<div class="quote-text">
																-- Quote Text -- 
														</div>
														<div class="quote-author"><b> --Quote Author --,</b> Manager</div>
														
												</li>
												<li>
												
														<div class="quote-text">
																-- Quote Text -- 
														</div>
														<div class="quote-author"><b>--Quote Author --,</b> Manager</div>
														
												</li>
												
										</ul>	

								</div><!--/ .quote-box-->

						

The peculiarity of this element is that fact, that each icon is output not as an image, but as font FontAwesome. So you simply need to add appropriate class for i tag.

Unordered List Style:

						<ul class="list">
								
								<li>
										<i class="icon-ok"></i>
										-- List Item -- 
								</li>
								
								...
						</ul>
				
				

						<span class="dropcap">A</span>

						<span class="dropcap circle dark">B</span>

						<span class="dropcap color">C</span>

				

							<p>
								-- Some Text --
								 <a href="#" data-tooltip=" -- This is some information for our tooltip.-- " class="tooltip"> -- Link Text for out tooltip-- </a> 
								-- Some Text -- 
							</p>	
						

Each icon element is a list element, here the main is to use already styled class with the social network name for li tag.

						<ul class="social-icons">
								
								<li class="twitter"><a href="#">Twitter<span></span></a></li>
								<li class="facebook"><a href="#">Facebook<span></span></a></li>
								<li class="dribble"><a href="#">Dribble<span></span></a></li>
								<li class="vimeo"><a href="#">Vimeo<span></span></a></li>
								<li class="youtube"><a href="#">Youtube</a></li>
								<li class="rss"><a href="#">Rss<span></span></a></li>
								<li class="picasa"><a href="#">Picasa<span></span></a></li>
								<li class="stubleupon"><a href="#">StubleUpon<span></span></a></li>
								<li class="skype"><a href="#">Skype<span></span></a></li>
								<li class="dropbox"><a href="#">Dropbox<span></span></a></li>
								<li class="cat"><a href="#">Cat<span></span></a></li>
								<li class="linkedin"><a href="#">LinkedIn<span></span></a></li>
								<li class="plus"><a href="#">Plus<span></span></a></li>
								<li class="pinterest"><a href="#">Pintrest<span></span></a></li>
								<li class="blogger"><a href="#">Blogger2<span></span></a></li>
								<li class="flickr"><a href="#">flickr<span></span></a></li>
								<li class="delicious"><a href="#">Delicious<span></span></a></li>
								<li class="yahoo"><a href="#">Yahoo<span></span></a></li>
								<li class="evernote"><a href="#">Evernote<span></span></a></li>
								<li class="apple"><a href="#">Apple<span></span></a></li>
								<li class="behance"><a href="#">Behance<span></span></a></li>
								<li class="gplus"><a href="#">Gplus<span></span></a></li>
								<li class="digg"><a href="#">Digg<span></span></a></li>
								<li class="lastfm"><a href="#">LastFm<span></span></a></li>
								<li class="myspace"><a href="#">MySpace<span></span></a></li>
								<li class="social2"><a href="#">Social2<span></span></a></li>
								<li class="wordpress"><a href="#">Wordpress<span></span></a></li>
								<li class="mail"><a href="#">Mail<span></span></a></li>
								
						</ul>

				

						<a class="button small turquoise" href="#">Button</a>
						
						<a class="button medium blue" href="#">Button</a>
						
						<a class="button big violet" href="#">Button</a>

				

								<p>
										 -- Some text -- <a class="highlight" href="#">-- Highlight Text -- </a>  -- Some text --
								</p>

						

All css files are located in css folder:

• font-awesome.css
• layout.css
• skeleton.css
• style.css

I'm using one main CSS file and three addition styles, there are general styles for whole theme and reset styles inside main style.css. Many browser interpret the default behavior of html elements differently. By using a general reset CSS styles in this file, 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.

This template allows you easily change the color scheme of the site, and install the necessary patterns as a background for Boxed version. All the styles needed are already registered in our style.css file. All you need to do is to specify the appropriate class for tag body. Specifically, to set color scheme you can put class .color-1 - .color-16, for mixed color schemes .mixed-1 - .mixed-4, for shabby version - .scribble, for full width - .wide, for boxed - .boxed and here you cam also choose pattern .pattern-1 - .pattern-15. There are such classes installed in template by default: class="wide normal pattern-1 color-1".

						
						/* -------------------------------------------------------------------
						Stylesheet Guide
						----------------------------------------------------------------------

						01. Reset

						02. Basic Elements
							1. Clearfix
							2. General Classes
							3. Typography
							4. Dropcap
							5. Images
							6. Fluid Width Video
							7. Dividers
							8. Forms
							9. Contact and Comments Form
							10. Buttons

						03. Wrapper

						04. Header
							1. Logo
							2. Phone
							3. Social Icons
							4. Main Navigation
							5. Search

						05. Slider

						06. Page Header

						07. Content
							1. Main
								- Detail Columns
								- Project Carousel
								- Team
								- 404 Page
								- Clients
								- Pricing Tables

						08. Blog
							1. Image Post Slider
							2. Page Navigation
							3. About Author
							4. Comments

						09. Portfolio
							1. Portfolio Filter
							2. Portfolio Items
							3. Portfolio Controls
							4. Isotope Styles

						10. Sidebar
							1. Widgets
								- Default Widgets
								- Calendar
								- Popular Posts
								- Tags Cloud

						11. Footer 
							1. Widgets
								- Flickr
							2. Copyright

						12. Widgets + Shortcodes
							1. Accordion and Toggle
							2. Testimonials
							3. Tabs
							4. Info Box
							5. Notifications
							6. List
							7. Map
							8. Tooltip

						13. Other
							1. Services
							2. Back To Top

						14. Styling


						 */
				

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

If you need to change the color, size or font family for the main pages headings or titles of some blocks on pages, you can do this by finding and editing appropriate lines:

						.page-header h1{
								change styles here
						}
				

						.section-title{
								change styles here
						}
				

You can also change the styles in widgets as you wish:

						#sidebar .widget{
								change styles here
						}
				

						#sidebar .widget-title{
								change styles here
						}
				

This theme imports 12 Javascript files. You can see some help info, when click links which are below each regarding script:

1. jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit <a href="http://www.jquery.com/">http://www.jquery.com/</a>
2. jQuery Fancybox for images, videos, YouTube, iframes. Refer to the <a href="http://fancybox.net/">author's documentation</a> for additional notes on how to use it.
3. jQuery FlickrFeed. Refer to the <a href="http://www.newmediacampaigns.com/page/jquery-flickr-plugin">author's documentation</a> for additional notes on how to use it.
4. jQuery Cycle Refer to the <a href="http://jquery.malsup.com/cycle/">author's documentation</a> for additional notes on how to use it
5. jQuery Easing Refer to the <a href="http://gsgd.co.uk/sandbox/jquery/easing/">author's documentation</a> for additional notes on how to use it.
6. jQuery Gmap Refer to the <a href="http://www.smashinglabs.pl/gmap">author's documentation</a> for additional notes on how to use it.
7. jQuery Isotope Refer to the <a href="http://isotope.metafizzy.co">author's documentation</a> for additional notes on how to use it.
8. Modernizr Refer to the <a href="http://www.modernizr.com/download/#-touch-shiv-addtest-teststyles-prefixes">author's documentation</a> for additional notes on how to use it.
9. Touchswipe Refer to the <a href="http://labs.rampinteractive.co.uk/touchSwipe/docs/">author's documentation</a> for additional notes on how to use it.
10. Blackandwhite Refer to the <a href="http://www.gianlucaguarini.com/">author's documentation</a> for additional notes on how to use it.
11. Jcarousel Refer to the <a href="http://sorgalla.com/jcarousel/">author's documentation</a> for additional notes on how to use it.
12. Selectivizr Refer to the <a href="http://selectivizr.com/">author's documentation</a> for additional notes on how to use it.

To make it easier and more usable for you to work with the template we have gathered all options in one file config.js. Each setting value is commented, and only thing you need to do is just set the property needed.

For example, if you need to turn off the fixed menu, simply set false for the fixed value in config.js file in line 10. You also have an ability to control images effect by hover. Originally all images are black-&-white, but on hovering they are getting colored. If you would like to make it vice verse - to makes images colored, but in hovering - black-&-white you simply need to change value for invertHoverEffect (line 139) and make it "true". If you would like to turn off this changing effect then put "false" for hoverEffect (line 134). However if invertHoverEffect has "true" then all images are always colored, if it has "false" then black-&-white

								/* ---------------------------------------------------------------------- */
								/*	Theme Settings														  */
								/* ---------------------------------------------------------------------- */
								
								/* ---------------------------------------------------- */
								/*	Menu												*/
								/* ---------------------------------------------------- */

								var objNavMenu = {
										fixed: true // Boolean:  (true/false)
									};

								/* ---------------------------------------------------- */
								/*	Flickr											    */
								/* ---------------------------------------------------- */

								var objFlickr = {
										limit: 6, // Max 9
										qstrings: {id : '54958895@N06'}, // ID
										itemTemplate: '<li><a class="bwWrapper" target="_blank" href="{{image_b}}" href="#"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
								};

								/* ---------------------------------------------------- */
								/*	Google Map											*/
								/* ---------------------------------------------------- */

								var objGoogleMap = {
										address: 'New York, USA', // City, County
										markers: [
										{'address' : 'Grand St, New York'} // Street
										],
										zoom: 14 // 0 - 21
								};

								/* ---------------------------------------------------- */
								/*	Layer Slider										*/
								/* ---------------------------------------------------- */

								var objLayerSlider = {
										width : '100%',						
										height : '400px',
										responsive : true,					//Boolean:  (true/false)
										responsiveUnder : 940,
										sublayerContainer : 940,
										autoStart : true,					//Boolean:  If true, slideshow will automatically start after loading the page. (true/false)
										pauseOnHover : true,				//Boolean: If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container. (true/false)
										firstLayer : 1,						//Integer:  LayerSlider will begin with this layer. (Positive Integer)
										animateFirstLayer : true,			//Boolean:  (true/false)
										randomSlideshow : false,			//Boolean:  (true/false)
										twoWaySlideshow : true,				//Boolean: If true, slideshow will go backwards if you click the prev button. (true/false)
										loops : 0,
										forceLoopNum : true,				//Boolean:  (true/false)
										autoPlayVideos : false,				//Boolean:  (true/false)
										autoPauseSlideshow : 'auto',
										keybNav : true,						 //Boolean: Keyboard navigation. You can navigate with the left and right arrow keys. (true/false)
										touchNav : true,					 //Boolean:  (true/false)
										skin : 'goodnex',					 //String: You can change the skin of the Slider. (name_of_the_skin) 
										skinsPath : 'js/layerslider/skins/', //String: You can change the default path of the skins folder. Note, that you must use the slash at the end of the path. (path_of_the_skins_folder/)
										globalBGColor : '#f6f6f6',			 //CSS Color Methods. Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background. 
										navPrevNext : true,					 //Boolean: If false, Prev and Next buttons will be invisible. (true/false)
										navStartStop : false,				 //Boolean: If false, Start and Stop buttons will be invisible. (true/false)
										navButtons : false,					 //Boolean: If false, slide buttons will be invisible. (true/false)
										hoverPrevNext : true,				//Boolean:  (true/false)
										hoverBottomNav : false,				//Boolean:  (true/false)
										thumbnailNavigation : 'disabled',
										tnWidth : 100,
										tnHeight : 60,
										tnContainerWidth : '60%',
										tnActiveOpacity : 35,
										tnInactiveOpacity : 100
								};

								/* ---------------------------------------------------- */
								/*	Flex Slider											*/
								/* ---------------------------------------------------- */

								var objFlexSlider = {
										animation: "slide",			//String: Select your animation type, "fade" or "slide"
										easing: "swing",			// Refer to the link below  http://easings.net/
										direction: "horizontal",    //String: Select the sliding direction, "horizontal" or "vertical"
										controlNav: false,			//Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
										directionNav: true,			//Boolean: Create navigation for previous/next navigation? (true/false)
										slideshowSpeed: 6000,		//Integer: Set the speed of the slideshow cycling, in milliseconds
										animationSpeed: 600,        //Integer: Set the speed of animations, in milliseconds
										randomize: false            //Boolean: Randomize slide order
								};

								/* ---------------------------------------------------- */
								/*	Carousel											*/
								/* ---------------------------------------------------- */

								var jCarousel = {
										animation: 600,
										easing: 'easeOutCubic' // Refer to the link below  http://easings.net/
								};

								/* ---------------------------------------------------- */
								/*	Image Post Slider									*/
								/* ---------------------------------------------------- */

								var objPostSlider = {
										easing: 'easeInOutExpo', // Refer to the link below  http://easings.net/
										speed: 600,
										timeout: 5000
								};

								/* ---------------------------------------------------- */
								/*	Image Gallery Slider								*/
								/* ---------------------------------------------------- */

								var objGallerySlider = {
										easing: 'easeInOutExpo', // Refer to the link below  http://easings.net/
										speed: 600,
										timeout: 5000
								};

								/* ---------------------------------------------------- */
								/*	Testimonials										*/
								/* ---------------------------------------------------- */

								var objTestimonials  = {
										easing: 'easeInOutExpo', // Refer to the link below  http://easings.net/
										speed: 600,
										timeout: 5000
								};

								/* ---------------------------------------------------- */
								/*	Black And White										*/
								/* ---------------------------------------------------- */

								var objBlackAndWhite  = {
										hoverEffect: true, // default true
										// set the path to BnWWorker.js for a superfast implementation
										webworkerPath: '',
										// for the images with a fluid width and height 
										responsive: true,
										invertHoverEffect: false,
										speed: {//this property could also be just speed: value for both fadeIn and fadeOut
											fadeIn: 400, // 400ms for fadeIn animations
											fadeOut: 800 // 800ms for fadeOut animations
										}
									};

								/* ---------------------------------------------------------------------- */
								/*	end Theme Settings													  */
								/* ---------------------------------------------------------------------- */			
				
						

I've included three psds with this theme:

1. The Home page layout (Home-Page-Flex.psd)
2. The Portfolio page layout (Portfolio-3-Columns.psd)
3. The Blog page layout (Blog.psd)
4. The Elements page layout (Elements.psd)
5. The Pricing Tables page layout (Pricing-Tables.psd)

I've used <a href="http://kreaturamedia.com/layerslider-responsive-wordpress-slider-plugin/"> Layer Slider</a> and <a href="http://www.woothemes.com/flexslider/">Flex Slider</a> jQuery plugins in this template.

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

• <a href="http://photodune.net/item/five-goldfishes-moving-to-bigger-waters-change-and-improvement/186859">Five Goldfishes Moving To Bigger Waters, Change And Improvement</a>
• <a href="http://photodune.net/item/closeup-of-young-man-using-binoculars/191077">Closeup Of Young Man Using Binoculars</a>
• <a href="http://photodune.net/item/blueberries/621190">Blueberries</a>
• <a href="http://photodune.net/item/fashion-model-beauty-shot/941641">Fashion Model beauty shot</a>
• <a href="http://photodune.net/item/yacht-sailing-against-sunsetsailboatsepia-toned/1802903">Yacht Sailing against sunset.Sailboat.Sepia toned</a>
• <a href="http://photodune.net/item/paper-team/1879808">Paper team</a>
• <a href="http://photodune.net/item/extreme-ride/2359457">Extreme ride</a>
• <a href="http://photodune.net/item/coffe-time/2460171">Coffe time</a>
• <a href="http://photodune.net/item/scenic-route-through-the-mountains/2898652">Scenic Route Through the Mountains</a>
• <a href="http://photodune.net/item/hands-holding-tablet/2993669">Hands holding tablet</a>
• <a href="http://photodune.net/item/butterfly-and-eyeglasses/3111001">Butterfly and eyeglasses</a>
• <a href="http://photodune.net/item/your-world/3155499">Your World</a>
• <a href="http://photodune.net/item/sunset/524369">Sunset</a>

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.