Follow the steps below to get started with your Site Template:

Open the Package/HTML Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- HTML/css - Extra Stylesheets Folder
- HTML/images - Images Folder
- HTML/js - Javacripts Folder
- HTML/CSS/advisor.css - Main Stylesheet File you can also rename it to style.css (for wordpress)
- HTML/index.html - Index File/Homepage
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

advisor follows a simple coding structure. here is the sample:


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<base href="" >

<!-- Basic Page Needs

     ================================================== > 
	 <meta charset="utf-8">
	 
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
     <title></title>
    
     <meta name="description" content="">
    
     <meta name="keywords" content="">
    
     <meta name="author" content="">

	 
	 <!-- Mobile Specific Metas
    
     ================================================== -->
    
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    
     <meta name="format-detection" content="telephone=no">
	 
	 
    <!-- CSS
    
     ================================================== -->



	...

</head>
<body>

	<!-- The Main Wrapper
	============================================= -->
	

		<!-- Header
		============================================= -->
		<header id="header">

			...

		</header>

		<!-- Site Content
		============================================= -->
		<section>

				<div class="container clearfix">
					
					<!-- Sections inner content goes here -->
					
				</div>

		</section>

		<!-- Footer
		============================================= -->
		<footer class="footer">

			<div class="container">

				<!-- Footer Inner
				============================================= -->
			

			</div>

		</footer>


</body>
</html>

How to use CSS / JS files

CSS and JS both are important part of the website. we've included all the plugins css/js inside advisor.css, plugins.js and scripts.js files with proper commenting to avoid more http request to server and to make website farster.

advisor.css Inside HTML > CSS you can find advisor.css which contains all the css.

<link rel="stylesheet" href="css/advisor.css">

Bootstrap.css Inside HTML > CSS you can find bootstrap.css which is the main part of the website as advisor based on bootstrap 3.

<link rel="stylesheet" href="css/bootstrap.css">

Color.css Inside HTML > CSS you can find color-default.css which is compulsory for website's color scheming it is recommended to include color.css file right after plugins.css file. To understand more please refer color schemes section.

<link rel="stylesheet" href="css/color-default.css">

common.js Inside HTML > JS you can find common.js which contains all the plugins files's code we've used in website.

<script src="js/common.js"></script>

Scripts.js Inside HTML > JS you can find scripts.js which contains all the custom and plugins code used in website. It is necessary to place scripts.js after plugins.js file.

<script src="js/scripts.js"></script>

Logo Settings

The Logo Container can be found in the Header Container - .logo

 <a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>

Note The Logo Image's maximum width can be 209px and maximum height can be 48px.

Retina Logo

If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo.

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the css/color-default.css file & you are good to go. Follow these quick steps to get going:

Note Please refer README.txt file inside css color scheme folder.

Note Please refer README.txt file inside images color scheme folder.

Make sure you add the css/color-default.css stylesheet in your head after the plugins.css stylesheet.

<head>

	...

	<link rel="stylesheet" href="css/plugins.css" type="text/css" />


	<!-- Here goes your colors.css
	============================================= -->
	<link rel="stylesheet" href="css/color-default.css" type="text/css" />

	...

</head>

Now simply change the Codes according to your requirements.

Changing Fonts

Change your Fonts on the Fly as we have included fonts in header. advisor uses 2 Fonts namely: Montserrat, Open Sans from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans:400,300,600,700' rel='stylesheet' type='text/css' />

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

Header Types

You can choose between 2 Types of headers while creating your Pages. Simply adding the Header Type Code will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class	Features	Code Example
`Default [#header]`	Header with a Transparent Background. This header is effective for showing Sliders or other types of Hero Images on the Top with a Transparent Logo & Menu.	<header id="header"> ... </header>
`[#header] [.header-two]`	Header with a Solid Background & Dark text.	<header class="header-two"> ... </header>
`<body class="fixed-header">`	Stickey Header One.	<body class="fixed-header"> ... </body>
`<body class="fixed-header two">`	Stickey Header Two.	<body class="fixed-header two"> ... </body>
`<body class="fixed-header header-transparent">`	Stickey Header One Transparent.	<body class="fixed-header header-transparent"> ... </body>

Page Titles [subpage title]

Class Description Example

Class	Description	Example
`Default`	Default Page Title style with Breadcrumbs & And a Contact Us button.	<section class="subpage-header"> <div class="container clearfix"> <div class="site-title clearfix"> <h2>Page Title</h2> <ul> <li><a href="">Home</a></li> <li>Current Page</li> </ul> </div> <a data-text="Contact us" class="btn btn-primary get-in-touch" href="contact-us.html"><i class="icon-telephone114"></i>Contact us</a> </div> </section>

Default

Default Page Title style with Breadcrumbs & And a Contact Us button.

<section class="subpage-header">

	<div class="container clearfix">
		<div class="site-title clearfix">
			<h2>Page Title</h2>
			<ul>
				<li><a href="">Home</a></li>
				<li>Current Page</li>
			</ul>
		</div>
		
		<a data-text="Contact us" class="btn btn-primary get-in-touch" href="contact-us.html"><i class="icon-telephone114"></i>Contact us</a>
	</div>

</section>

Columns & Grid

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Helper Classes

We have created some really useful helper classes for you. You can see all of them in advisor.css starting from line #20.

Useful Snippets

We have created some really useful functionality which surely going to make your Website more interactive. Here are a few of them:

Smooth Scrolling to Same Page Sections

With advisor you can turn pretty-much any Page into a One Page Website, which defines Smart Functionality. You can Point any Link, Button on a Page to an Element ID which on Clicking scrolls to that Element.

You can use this functionality by adding class="scroll" href="#html-element-ID" attribute to a Button or a Link. Simply use the following Sample Code to use this functionality:

<a href="#header" class="btn btn-default scroll">Scroll to Header</a>

	/* ------------------------------------------------------------------------ 
			   SMOOTH SCROLLING
			------------------------------------------------------------------------ */
	jQuery('.scroll').each( function() {
			var $this = jQuery(this), 
				target = this.hash;
				jQuery(this).click(function (e) { 
					e.preventDefault();
					if( $this.length > 0 ) {
						if($this.attr('href') == '#' ) {
							// Do nothing   
						} else {
						   jQuery('html, body').animate({ 
								scrollTop: (jQuery(target).offset().top) - -1
							}, 1000);
						}  
					}
				});
			});

Note: You should have a Valid & Unique Element ID on the Page where you are planning to use the ScrollTo Functionality.

Slider Types & their Options

advisor includes 4 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

Hero Slider
Revolution Slider
Owl Carousel

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

Hero Slider

You can find the Hero Slider related Documentation here.

Read Hero Slider Docs

Owl Carousel

You can find the Owl Carousel related Documentation here.

Owl Carousel Docs

News Setup

Posts use Simple Markup. Use the Code Sample below:

		<article class="blog-item">
			<div class="blog-thumbnail">
				<a href="blog-detail.html"><img src="" alt=""></a>
			</div>
			<ul class="blog-meta">
			
				<li>
					<img alt="" src="images/news/news-author-img.png">
					<span>John Smith</span>
				</li>
				<li>
					<i class=" icon-clock"></i>Apr 22, 2015
				</li>
				<li>
					<a href="news-detail.html"><i class="icon-chat-1"></i>4 Comments</a>
				</li>
			
			</ul>
			<div class="blog-content">
				<h3><a href="#.">Standard Post Format</a></h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend sed turpis. Pellentesque cursus arcu id magna euismod in elementum purus molestie. Curabitur pellentesque massa eu porttitorarcu porttitor. Quisque volutpat pharetra felis, eu cursus lorem molestie vitae. Nulla vehicula.
				<a href="#." class="btn-link">Continue Reading</a>
			</div>
		</article>

Post Types

You can use a 4 different types of Post Types:

Image
Embedded Video
Slider Gallery
Blockquotes

Comment Types

You can use a 3 different types of Comments System on Post Single Pages:

Default
Facebook
Disqus

Blog Comments

<ol class="commentlist">

	<li class="comment">
		<article class="comment-wrapper clearfix">

			<div class="comment-avartar">
				<img width="78" height="75" src="images/avator.jpg" alt="">
			</div>

			<div class="comment-content-wrapper clearfix">
			   
				<div class="comment-head">
					<span class="comment-author">John Doe</span>
					<span class="comment-date">September 30, 2013 at 3:21 pm</span>
				</div>

				<div class="comment-message">
					<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>                       
				</div>                       
				<span class="comment-reply">
					<a data-text="Reply" href="#." class="comment-reply-link">Reply</a>
				</span>
			</div>
			
		</article>
		
	
	</li>
</ol>

Facebook Comments

Code Sample for Facebook Comments:

<div id="comments" class="clearfix">

	<h3 id="comments-title"><span><fb:comments-count href="your-post-full-url"></fb:comments-count></span> Comments</h3>

	<!-- Facebook Comments
	============================================= -->
	<div class="fb-comments" data-width="100%" data-href="your-post-full-url" data-numposts="5" data-colorscheme="light"></div>
	<!-- Facebook Comments end -->

</div>

Note: You'll need to place the following code just after the body tag of your HTML document.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId={your-app-id}&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Disqus Comments

Code Sample for Disqus Comments:

<div id="comments" class="clearfix">

	<h3 id="comments-title">Comments</h3>

	<!-- Disqus Comments
	============================================= -->
	<div id="disqus_thread"></div>
	<script type="text/javascript">
		/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
		var disqus_shortname = 'your-disqus-shortname'; // required: replace example with your forum shortname

		/* * * DON'T EDIT BELOW THIS LINE * * */
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	</script>
	<!-- Disqus Comments end -->

</div>

Cases Setup

advisor provides a very elegant way to showcase your Cases. Setting up Cases is simple. Please use the following codes:

Setting up Cases Filter:

<div class="cases-filter-nav">

	<div class="filter">< data-filter="all">Show All</a></div>
	<div>< class="filter" data-filter=".business-services">Business Services</a></div>
	<div>< class="filter" data-filter=".financial-services">Financial Services</a></div>
	<div>< class="filter" data-filter=".cash-flow">Cash Flow</a></div>
	<div>< class="filter" data-filter=".invoicing">Invoicing</a></div>

</div>

Setting up Cases Items:


	<ul id="cases-container" class="cases-container">
		<li class="entry">
			<div class="cases-item">
				<a href="case-study.html">
					<figure>
						<img alt="" src="images/cases/1.jpg">
						<figcaption>
							<div>
								<small>Financial Services, Cash Flow</small>
								Developing a strategy for clients
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
		</li>
	</ul>

Setting up Portfolio Scripts for Filter Functions:

<script type="text/javascript">

	var $container = $('#filter-container');
		$container.isotope({
			filter: '*',
			animationOptions: {
				duration: 750,
				easing: 'linear',
				queue: false,
			}
		});
	
		$('.filter-nav li a').click(function(){
			var selector = $(this).attr('data-filter');
			$container.isotope({
				filter: selector,
				animationOptions: {
					duration: 750,
					easing: 'linear',
					queue: false,
				}
			});
		  return false;
		});
	
		var $optionSets = $('.filter-nav'),
			   $optionLinks = $optionSets.find('a');
		 
			   $optionLinks.click(function(){
				  var $this = $(this);
			  // don't proceed if already selected
			  if ( $this.hasClass('selected') ) {
				  return false;
			  }
		   var $optionSet = $this.parents('.filter-nav');
		   $optionSet.find('.selected').removeClass('selected');
		   $this.addClass('selected'); 
		});
	
	
</script>

Introduction

advisor boasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with advisor:

Animations
Buttons
Carousels
Clients
Columns
Counters
Headings
Icon Lists
Labels
Fancybox
Maps
Media Embeds
Navigations
Paginations
Process Steps
Promo Boxes
Blockquotes
Responsive
Sections
Social Icons
Tabs
Testimonials
Thumbnails
Toggles

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with advisor. You can use animate-it class on any element you want. Here is the Sample Code:

<div class="animate-it fadeInLeft"></div>

You can also use delays for your Animations:

<div class="animate-it fadeInLeft" data-delay="500"></div>

Note: Delay Duration is in milliseconds.

Note: animate.css, js/jquery.appear.js, animations.js Files are compulsory for Animations.

Here is the list of the Animation Types you can use:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Sections & Parallax

Setup content you want to stand out. You can use Parallax Images or HTML5 Videos as Sections.

Setting up Sections:

Setup your Sections outside the .container element. sections padding-top and padding-boottom is 80px by default but you can change it by adding handy classes like no-padding, padding-top-20 etc.

Light Section:

<section">
	<div class="container clearfix">

		...

	</div>
</div>

Setting up Parallax Sections:

Make sure your Parallax Images are of enough Width & Height, preferably 1920x1300 or above.

<section class="parallax" style="background: url('images/parallax/3.jpg')>
	<div class="container clearfix">

		...

	</div>
</div>

<section class="bg-image-class-name parallax">
	<div class="container clearfix">

		...

	</div>
</div>

Tabs, Toggles & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use the below code to display Tabs:

<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#investment" aria-controls="investment" role="tab" data-toggle="tab">Investment</a></li>
	<li role="presentation"><a href="#growth" aria-controls="growth" role="tab" data-toggle="tab">Growth</a></li>
	<li role="presentation"><a href="#risks-of-investing" aria-controls="risks-of-investing" role="tab" data-toggle="tab">Risks of Investing</a></li>
 </ul>

			
<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="investment">
		<p>We have over 15 years of experience Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsm dolor sit the power of consectetur adi pisi cing elit, sed do eiusmod tempor xercitationemut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		<p>expound the actual teachings. of the great explorer of the truth, the  aster-builder of No one rejects, dislikes, or human happiness. </p>
	</div>
	<div role="tabpanel" class="tab-pane" id="growth">
		<p>expound the actual teachings. of the great explorer of the truth, the  aster-builder of No one rejects, dislikes, or human happiness. </p>
		<p>We have over 15 years of experience Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsm dolor sit the power of consectetur adi pisi cing elit, sed do eiusmod tempor xercitationemut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div role="tabpanel" class="tab-pane" id="risks-of-investing">
		<p>expound the actual teachings. of the great explorer of the truth, the  aster-builder of No one rejects, dislikes, or human happiness. </p>
	</div>
</div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Accordions

You can add a Toggle using the Code below:

	<div id="accordion" role="tablist" aria-multiselectable="true">
		<div class="toggle two">
			<div class="toggle-heading" role="tab">
				<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				  <i class="fa fa-plus"></i> What is do i have to tell you a few lorem?
				</a>
			</div>
			<div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
				<div class="toggle-body">
					<p>Lorem ipsum dolor sit amet, consectetur adi pisi cing elit, sed do eiusmod tempor exercitationemut labore. Love life’s sweetest reward Let it flow it floats back to you.</p>
				</div>
			</div>
		</div>
	</div>

Fancybox

Setting up Fancybox:

Adding a class"fancybox" to any Link or Button will turn it into a Fancybox Element. You can use different Types of Fancybox with an Easy Setup:

Single Image:

<a href="link-to-fancybox-image.jpg" class="fancybox"><img src="link-to-small-thumb.jpg" alt="Fancybox Image"></a>

You can also use Iframe, Video, AJAX, Gallery, AJAX Gallery in Fancybox please refer FancyboxDocs

Google Maps

You can add Embedded Google Maps to any Page using the following setup:

Step 1:

Add the Google Maps Specific Scripts in the <head> Tag below the js/plugins.js script linking:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/map.js"></script>

Step 2:

Add a div which will contain your Google Map:
```
<div id="map" class="map"></div>
```

Counters

You can add a Counter Numbering to any Page using the following files:

	<script src="js/waypoints.js"<</script<
	<script src="js/counter.js"<</script<

Icons

We've used Font Awesome icons and Custom SVG Icons in it which you can easily use in website just copy and paste the code.

Contact Forms

Get Directions

	<div class="get-directions">
		<form target="_blank" method="get" action="http://maps.google.com/maps">
		   <input type="text" placeholder="Enter Your Address" name="saddr">
		   <input type="hidden" value="Enter Your Address Here" name="daddr">
		   <input type="submit" value="">
		</form>
	</div>

Version 2.0

Version 2.0 10th August, 2016

- Added: Add New Home Page layout

Version 1.3 9th June, 2016

- Added: Newsletter and Contact Form
- Fixed: Loeader issue

Version 1.2 5th June, 2016

- Added: Page Loader
- Fixed: Testimonial Issue
- Fixed: Some Minor Tweaks

Released on 02 June 16

- Released Advisor | Consulting, Business, Finance Template

HTML Structure

How to use CSS / JS files

Logo Settings

Retina Logo

Color Schemes

Changing Fonts

Header Types

Page Titles [subpage title]

Columns & Grid

Bootstrap Grid

Helper Classes

Useful Snippets

Smooth Scrolling to Same Page Sections

Slider Types & their Options

Revolution Slider

Hero Slider

Owl Carousel

News Setup

Post Types

Comment Types

Blog Comments

Facebook Comments

Code Sample for Facebook Comments:

Disqus Comments

Code Sample for Disqus Comments:

Cases Setup

Setting up Cases Filter:

Setting up Cases Items:

Setting up Portfolio Scripts for Filter Functions:

Introduction

Animations

Sections & Parallax

Setting up Sections:

Light Section:

Setting up Parallax Sections:

Tabs, Toggles & Accordions

Tabs

Accordions

Fancybox

Setting up Fancybox:

Single Image:

You can also use Iframe, Video, AJAX, Gallery, AJAX Gallery in Fancybox please refer FancyboxDocs

Google Maps

Step 1:

Step 2:

Counters

Icons

Contact Forms

Get Directions

Version 2.0