Installation

Thank you for purchasing my template. If you have any questions which are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks a lot!

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

Open the demo 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:
- adforest/images - Images Folder
- adforest/js - Javacripts Folder
- adforest/css - Template Css Folder
- adforest/ all HTML files with ".html" extension - Template HTML page
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

I have followed a simple coding structure. here is the sample:

<section class="section-padding">
<!-- Main Container -->
    <div class="container">
       <!-- Row -->
       <div class="row">
          <!-- Heading Area -->
          <div class="heading-panel">
             <div class="col-xs-12 col-md-12 col-sm-12">
                <h3 class="main-title text-left">
                  --- Your Main Heading ---
                </h3>
             </div>
          </div>
          <div class="col-md-12 col-xs-12 col-sm-12">
             <div class="row">
                    --- Your Content Here ---
             </div>
          </div>
       </div>
    </div>
<!-- Main Container End -->
</section>

Logo Settings

The Logo Container can be found in the nav tag - withen the .menu-logo class.

 <!-- menu logo -->
                  <ul class="menu-logo">
                     <li>
                        <a href="index.html"><img src="images/logo.png" alt="logo"> </a>
                     </li>
                  </ul>

Note The Logo Image's maximum width can be 180px.
And height can be 40px OR you can set according to template design Need.

Changing Fonts

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css">

In order to change the Fonts, you will need to Edit the Above Links and give font family name to css/style.css And give font family name here html { font-family: sans-serif; Your font here }.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

gZip Compression & Browser Caching

This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.
Image Compression & Optimization

We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
- Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
  For MAC use ImageOptim
  For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
CSS & jQuery Minifications

It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier.
Content Delivery Network

You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.

Top Navigation Bar

Here is the code for topbar navigation menu:

Topbar

 <!-- Top Bar -->
 <div class="header-top">
    <div class="container">
       <div class="row">
          <!-- Header Top Left -->
          <div class="header-top-left col-md-8 col-sm-6 col-xs-12 hidden-xs">
             <ul class="listnone">
                <li><a href="about.html"><i class="fa fa-heart-o" aria-hidden="true"></i> About</a></li>
             </ul>
          </div>
          <!-- Header Top Right Social -->
          <div class="header-right col-md-4 col-sm-6 col-xs-12 ">
             <div class="pull-right">
                <ul class="listnone">
                   <li><a href="login.html"><i class="fa fa-sign-in"></i> Log in</a></li>
                   <!-- Dropdown -->
                   <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="icon-profile-male" aria-hidden="true"></i> Umair <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                         <li><a href="profile.html">User Profile</a></li>
                   		 <li><a href="profile-2.html">User Profile 2</a></li>
                         <li><a href="archives.html">Archives</a></li>
                         <li><a href="active-ads.html">Active Ads</a></li>
                         <li><a href="favourite.html">Favourite Ads</a></li>
                         <li><a href="messages.html">Message Panel</a></li>
                         <li><a href="deactive.html">Account Deactivation</a></li>
                      </ul>
                   </li>
                </ul>
             </div>
          </div>
       </div>
    </div>
 </div>
<!-- Top Bar End -->

Menu Types

AdForest is come up with 3 Menu style

Default Menu
Transparent Menu
Absolute Menu

Here is the code for generating menu by the help of Following code:

 <!-- menu start -->
<nav id="menu-1" class="mega-menu">
<!-- menu list items container -->
<section class="menu-list-items">
   <div class="container">
      <!-- menu logo -->
      <ul class="menu-logo">
         <li>
            <a href="index.html"><img src="images/logo.png" alt="logo"> </a>
         </li>
      </ul>
      <!-- menu links -->
      <ul class="menu-links">
         <!-- active class -->
         <li>
            <a href="javascript:void(0)"> Home <i class="fa fa-angle-down fa-indicator"></i></a>
            <div class="drop-down grid-col-8">
               <!--grid row-->
               <div class="grid-row">
                  <!--grid column 3-->
                  <div class="grid-col-4">
                     <ul>
                        <li><a href="index.html">Home 1 - Default </a></li>
                        <li><a href="index-transparent.html">Home 2 (Transparent)</a></li>
                        <li><a href="index-2.html">Home 3 (Variation)</a></li>
                        <li><a href="index-3.html">Home 4 (Master Slider)</a></li>
                     </ul>
                  </div>
                  <div class="grid-col-4">
                     <ul>
                        <li><a href="index-4.html">Home 5 (With Map Listing)</a></li>
                        <li><a href="index-5.html">Home 6 (Modern Style)</a></li>
                        <li><a href="index-6.html">Home 7 (Variation)</a></li>
                        <li><a href="index-7.html">Home 8 (Category Slider)</a></li>
                     </ul>
                  </div>
                  <div class="grid-col-4">
                     <ul>
                        <li><a href="index-10.html">Home 11 (Modern Home)</a></li>
                        <li><a href="index-8.html">Home 9 (Landing Page)</a></li>
                        <li><a href="index-9.html">Home 10 (Variation)</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
         <li>
            <a href="javascript:void(0)">Listing <i class="fa fa-angle-down fa-indicator"></i></a>
            <!-- drop down multilevel  -->
            <ul class="drop-down-multilevel">
               <li>
                  <a href="javascript:void(0)">Grid Style<i class="fa fa-angle-right fa-indicator"></i> </a>
                  <!-- drop down second level -->
                  <ul class="drop-down-multilevel">
                     <li><a href="listing.html">Listing Grid 1</a></li>
                     <li><a href="listing-1.html">Listing Grid 2</a></li>
                     <li><a href="listing-2.html">Listing Grid 3</a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript:void(0)">List Style<i class="fa fa-angle-right fa-indicator"></i> </a>
                  <!-- drop down second level -->
                  <ul class="drop-down-multilevel">
                     <li><a href="listing-3.html">List View 1</a></li>
                     <li><a href="listing-4.html">List View 2</a></li>
                     <li><a href="listing-5.html">List View 3</a></li>
                     <li><a href="listing-6.html">List View 4</a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript:void(0)">Single Ad<i class="fa fa-angle-right fa-indicator"></i> </a>
                  <!-- drop down second level -->
                  <ul class="drop-down-multilevel">
                     <li><a href="single-ad-listing.html">Single Ad Detail</a></li>
                     <li><a href="single-ad-listing-2.html">Single Ad 2</a></li>
                     <li><a href="single-ad-listing-3.html">Single Ad (Adsense)</a></li>
                     <li><a href="single-ad-expired.html">Single Ad (Closed)</a></li>
                  </ul>
               </li>
               <li><a href="icons.html">Classified Icons </a></li>
            </ul>
         </li>
          <li><a href="contact.html">Contact </a></li>
      </ul>
      <ul class="menu-search-bar">
         <li>
            <a href="post-ad-1.html" class="btn btn-light"><i class="fa fa-plus" aria-hidden="true"></i> Post Free Ad</a>
         </li>
      </ul>
   </div>
</section>
</nav>
<!-- menu end -->

It's very simple to make menu transparent. you just need to wrap all the defualt menu code in a div .transparent-header below is the code of Transparent Menu

<!-- Transparent Menu -->
<div class="transparent-header">
	<!-- Wrap All Defualt Menu Code Inside This Div -->
    <nav id="menu-1" class="mega-menu">
        <!-- menu list items container -->
        <section class="menu-list-items">
        
        </section>
    </nav>
</div>

As like as transparent menu making Full width menu very simple you just need to wrap all the defualt menu code in a div .main-menu below is the code of Transparent Menu

<!-- Transparent Menu -->
<div class="main-menu">
	<!-- Wrap All Defualt Menu Code Inside This Div -->
    <nav id="menu-1" class="mega-menu">
        <!-- menu list items container -->
        <section class="menu-list-items">
        
        </section>
    </nav>
</div>

Breadcrumb Type

AdForest Breadcrumb style

Default Breadcrumb
Bootstrap Grids
Sidebar Widget

Here is the code for generating breadcrumb by the help of Following code:

Default Breadcrumb

Please use this HTML code to generate Default Breadcrumb

<div class="page-header-area">
 <div class="container">
    <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="header-page">
             <h1>Category Grid - 1</h1>
          </div>
       </div>
    </div>
 </div>
</div>

Breadcrumb Style 2

Heading With Right Align Links

<div class="bread-2 page-header-area">
 <div class="container">
    <div class="row">
       <div class="col-lg-8 col-md-12 col-sm-5 col-xs-12">
          <div class="header-page">
             <h1>Category Grid - 2</h1>
          </div>
       </div>
       <div class="col-md-4 col-sm-7 col-xs-12">
          <div class="small-breadcrumb">
                <div class=" breadcrumb-link">
                   <ul>
                      <li><a href="index.html">Home Page</a></li>
                      <li><a href="page-full-width.html">Pages</a></li>
                      <li><a href="elements.html">Category</a></li>
                      <li><a class="active" href="#">Listing</a></li>
                   </ul>
                </div>
          </div>
       </div>
    </div>
 </div>
</div>

Breadcrumb Style 3

Heading With Left Align Links

<div class="bread-3 page-header-area ">
 <div class="container">
    <div class="row">
       <div class="col-md-4 col-xs-12 col-sm-7">
          <div class="small-breadcrumb">
                <div class=" breadcrumb-link">
                   <ul>
                      <li><a href="index.html">Home Page</a></li>
                      <li><a href="page-full-width.html">Pages</a></li>
                      <li><a href="elements.html">Category</a></li>
                      <li><a class="active" href="#">Listing</a></li>
                   </ul>
                </div>
          </div>
       </div>
       <div class="col-lg-8 col-md-12 col-sm-5 col-xs-12">
          <div class="header-page">
             <h1>Category Grid - 3</h1>
          </div>
       </div>
    </div>
 </div>
</div>

Hero Style Breadcrumb

Hero Style Breadcrumb Style

<section class="breadcrumb-1 small-hero">
 <div class="bg-overlay">
    <div class="container">
       <!-- Main Content -->
       <div class="content-section">
          <!-- Title -->
          <h1>List View - 1</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id tellus.</p>
       </div>
       <!-- Main Content End -->
    </div>
 </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

Sidebar Widget Panel

Heading With Right Align Links

<div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <!-- Heading -->
      <div class="panel-heading" role="tab" id="headingOne">
         <!-- Title -->
         <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">
            <i class="more-less glyphicon glyphicon-plus"></i>
            	Categories
            </a>
         </h4>
         <!-- Title End -->
      </div>
      <!-- Content -->
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false">
         <div class="panel-body categories">
            <ul>
               <li><a href="#"><i class="flaticon-data"></i>Electronics &amp; Gedget<span>(1029)</span></a></li>
            </ul>
         </div>
      </div>
    </div>
</div>

Simple Sidebar Widget

Simple Widget like blog etc

<div class="widget">
   <div class="widget-heading">
      <h4 class="panel-title"><a> -- Widget Title -- </a></h4>
   </div>
   <div class="widget-content">
      -- Widget Content --
   </div>
</div>

Advertizing Sidebar

Here is a code to make sticky ads

<div class="col-md-2 col-sm-2  hidden-xs hidden-sm  leftbar-sticks">
    <div class="theiaStickySidebars"> <img alt="" src="images/160x600.png"> </div>
</div>

You have to use any .class and initialize that throug js.

$('.your-class').theiaStickySidebar({
  additionalMarginTop: 80
});

Featured Ad Carousel

If You want to show ads in a Carousel there is a sample code for that

<div class="featured-slider-1 owl-carousel owl-theme">
  <div class="item">
 	== All Your Content Here == 
  </div>
  <div class="item">
 	== All Your Content Here == 
  </div>
  <div class="item">
 	== All Your Content Here == 
  </div>
</div>

Here is a ample code to initialize the carousel sider

$('.featured-slider-1').owlCarousel({
    loop:true,
	dots:false,
	margin:0,
    responsiveClass:true, // Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element.
	 navText: ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:2,
            nav:true
        },
        1000:{
            items:2,
            nav:true,
            loop:false
        }
    }
});

Template Preloader

Here is the markup of Defualt preloader

<!-- =-=-=-=-=-=-= Preloader =-=-=-=-=-=-= -->
<div id="loader-wrapper">
     <div id="loader"></div>
     <div class="loader-section section-left"></div>
     <div class="loader-section section-right"></div>
</div>

<p>And Here Is Jquery Code For Preloader</p>

/* ======= Preloader ======= */
setTimeout(function() {
    $('body').addClass('loaded');
}, 3000);

Google Map Settings

First of all you have to need Google Map API Key below is a link to generate your API key

Map Api Key

You need to place these JS files

<!-- Googgle map For THis Page Only -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?your api key here"></script>
<script src="js/infobox.js"></script>
<!-- Parallax -->
<script src="js/data.json"></script>
<script src="js/markerclusterer.js"></script>
<script src="js/markers-map.js"></script>
<script type="text/javascript">
  "use strict";
 google.maps.event.addDomListener(window, 'load', speedTest.init);
 (jQuery);
</script>

Here is the HTML Markup to Initialize the Google Map

<section class="clearfix">
     <div class="map">
        <div id="map"></div>
     </div>
</section>

Now you have to go to data.json file open it in any editor. There you find a structure like below :

var data = { "count": 1,
    "listings": [
            {"ad_id": 1, "listings_title": "Thunderstorm in ", "listings_url": "single-listings.html", "listings_cover": "images/posting/car-3.jpg", "cat": "retail", "cat_url": "category.html", "latitude": 40.711989, "longitude": -74.004773, "price": 700000, "currency": '$' , "location": 'Pakistan'  , "time": '17 minutes ago'}
]}

Now you can get all these value in markers-map.js file open and goes to line no 116. and pass these value like listings_title, listings_url , listings_cover etc to given structure like below :

var html_listings = '<div class="category-grid-box-1" style="max-width: 360px ! important;width: 360px ! important; overflow: hidden;z-index: 1;"> ' +
            '<div class="image">' +
                '<img alt="" src="' + listings_cover + '" class="img-responsive" style="width: 100%;">' +
                    ' <div class="price-tag"> ' +
                    ' <div class="price"><span>'+ price + ' ' + currency +'</span></div> ' +
                    ' </div> ' +
             '</div>' +
            ' <div class="short-description-1 clearfix"> ' +
            '<div class="category-title"> <span><a href="' + category_url +'">' + category +'</a></span> </div> ' +
            ' <h3><a title="" href="' + listings_url +'">' + title +'</a></h3> ' +
            ' </div> ' +
            ' <div class="ad-info-1"> ' +
            '<ul>' +
            '<li> <i class="fa fa-map-marker"></i><a href="#">' + location +'</a> </li>' +
            '<li> <i class="fa fa-clock-o"></i>' + time +' </li>' +
            '</ul>' +
            '</div>' +
            '</div>';

Note all values pass through specific Html structure.

Master Slider

You need to place these CSS files in Head tag

<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="js/masterslider/style/masterslider.css" />
<link rel="stylesheet" href="js/masterslider/skins/default/style.css" />
<link rel="stylesheet" href="js/masterslider/style/style.css" />

Here is JS file and Initialization code to inclde for this slider

<!-- MasterSlider --> 
<script src="js/masterslider/masterslider.min.js"></script> 
<script type="text/javascript">	
 (function($) {
   "use strict";	
        var slider = new MasterSlider();
        // adds Arrows navigation control to the slider.
        slider.control('arrows');
        slider.control('timebar' , {insertTo:'#masterslider'});
        slider.control('bullets');
 
         slider.setup('masterslider' , {
             width:1400,    // slider standard width
             height:650,   // slider standard height
             space:1,
             layout:'fullwidth',
             loop:true,
             preload:0,
             instantStartLayers:true,
             autoplay:true
        });
 })(jQuery);
</script>

Below is the HTML markup and copy it and you just have to place the image path at src="image path" and also text that need to be visible.

<!-- Master Slider -->
<div class="master-slider ms-skin-default" id="masterslider">
    <!-- slide 1 -->
    <div class="ms-slide slide-1" data-delay="5">
    <!-- slide background --> 
    <img src="js/masterslider/style/blank.gif" data-src="images/slider/slider-banner.jpg" alt="Slide1 background"/>
    <img src="js/masterslider/style/blank.gif" data-src="images/slider/bike.png" alt="Master Slider"
       style="left:800px; top:160px;"
       class="ms-layer"
       data-type="image"
       data-delay="1000"
       data-duration="3000"
       data-ease="easeOutExpo"
       data-effect="scalefrom(1.1,1.1,190,0)"/> <img src="js/masterslider/style/blank.gif" data-src="images/masterslider/circle.png" alt="Master Slider"
       style="left:850px; top:290px;"
       class="ms-layer no-dis-phone"
       data-type="image"
       data-delay="1500"
       data-duration="3000"
       data-effect="bottom(480,false)"
       data-ease="easeOutExpo"/> 
    <h3 class="ms-layer title4 font-white font-uppercase font-thin-xs"
       style="left:90px; top:170px;"
       data-type="text"
       data-delay="2000"
       data-duration="2000"
       data-ease="easeOutExpo"
       data-effect="skewleft(30,80)">2016 Ducati Panigale 959 </h3>
    <h3 class="ms-layer title4 font-white font-thin-xs"
       style="left:90px; top:220px;"
       data-type="text"
       data-delay="2500"
       data-duration="2000"
       data-ease="easeOutExpo"
       data-effect="skewleft(30,80)"><span class="font-color">Brand new 0 kms</span></h3>
    <h5 class="ms-layer text1 line-one text-center no-dis-phone"
       style="left:870px; top:325px;color:#191919; font-weight:600;"
       data-type="text"
       data-effect="top(45)"
       data-duration="2700"
       data-delay="2000"
       data-ease="easeOutExpo">Price<br>
       <span class="font-bold font-color">$60.000</span>
    </h5>
    <h5 class="ms-layer text1 font-white"
       style="left: 92px; top: 295px;"
       data-type="text"
       data-effect="bottom(45)"
       data-duration="2500"
       data-delay="3000"
       data-ease="easeOutExpo">Lorem Ipsum is simply dummy text of the printing typesetting<br>
       industry is proident sunt in culpa officia deserunt mollit.
    </h5>
    <a class="ms-layer btn3 uppercase"
       style="left:95px; top: 405px;"
       data-type="text"
       data-delay="3500"
       data-ease="easeOutExpo"
       data-duration="2000"
       data-effect="scale(1.5,1.6)"> Get Started Now!</a> 
    </div>
    <!-- end of slide --> 
</div>

Color Switcher

Logistic Pro is came up with 7 Pre defined Colors

Here is the simple markup of color switcher

If You Want To Use Any Color Just Include Your Desired Color Files. Color Files Exit at css/colors/green.css

How to include your color file

<!-- =-=-=-=-=-=-= Template Color =-=-=-=-=-=-= -->
<link rel="stylesheet" id="color" href="css/colors/defualt.css">

If you want to remove Color Switcher do the following things

<!-- =-=-=-=-=-=-= Color Switcher =-=-=-=-=-=-= -->
<div class="color-switcher" id="choose_color">
 <a href="#." class="picker_close"><i class="fa fa-gear"></i></a>
 <h5>STYLE SWITCHER</h5>
 <div class="theme-colours">
    <p> Choose Colour style </p>
    <ul>
       <li>
          <a href="#." class="defualt" id="defualt"></a>
       </li>
       <li>
          <a href="#." class="green" id="green"></a>
       </li>
       <li>
          <a href="#." class="blue" id="blue"></a>
       </li>
       <li>
          <a href="#." class="red" id="red"></a>
       </li>
       <li>
          <a href="#." class="boston-blue" id="boston-blue"></a>
       </li>
       <li>
          <a href="#." class="sea-green" id="sea-green"></a>
       </li>
       <li>
          <a href="#." class="wet-asphalt" id="wet-asphalt"></a>
       </li>
    </ul>
 </div>
 <div class="clearfix"> </div>
</div>

Also remove color switcher Jquery files

 <!--Style Switcher -->
    <script src="js/color-switcher.js"></script>

Sources and Credits

Here is the CSS and JS files that are need to be included but you need to copy them from that specific page because some pages have CSS and JS files that are specific to that page.

  <!-- =-=-=-=-=-=-= Bootstrap CSS Style =-=-=-=-=-=-= -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a>
  <!-- =-=-=-=-=-=-= Template CSS Style =-=-=-=-=-=-= -->
  <link rel="stylesheet" href="css/style.css">
  <!-- =-=-=-=-=-=-= Font Awesome =-=-=-=-=-=-= -->
  <link rel="stylesheet" href="css/font-awesome.css" type="text/css">
  <a href="http://fontawesome.io/" target="_blank">http://fontawesome.io/</a>
  <!-- =-=-=-=-=-=-= Flat Icon =-=-=-=-=-=-= -->
  <link href="css/flaticon.css" rel="stylesheet">
  <a href="http://www.flaticon.com/" target="_blank">http://www.flaticon.com/</a>
  <!-- =-=-=-=-=-=-= Et Line Fonts =-=-=-=-=-=-= -->
  <link rel="stylesheet" href="css/et-line-fonts.css" type="text/css">
  <a href="https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website" target="_blank">https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website</a>
  <!-- =-=-=-=-=-=-= Menu Drop Down =-=-=-=-=-=-= -->
  <link rel="stylesheet" href="css/forest-menu.css" type="text/css">
  <!-- =-=-=-=-=-=-= Animation =-=-=-=-=-=-= -->
  <link rel="stylesheet" href="css/animate.min.css" type="text/css">
  <a href="https://daneden.github.io/animate.css/" target="_blank">https://daneden.github.io/animate.css/</a>
  <!-- =-=-=-=-=-=-= Select Options =-=-=-=-=-=-= -->
  <link href="css/select2.min.css" rel="stylesheet" />
  <a href="https://select2.github.io/" target="_blank">https://select2.github.io/</a>
  <!-- =-=-=-=-=-=-= noUiSlider =-=-=-=-=-=-= -->
  <link href="css/nouislider.min.css" rel="stylesheet">
  <a href="https://refreshless.com/nouislider/" target="_blank">https://refreshless.com/nouislider/</a>
  <!-- =-=-=-=-=-=-= Listing Slider =-=-=-=-=-=-= -->
  <link href="css/slider.css" rel="stylesheet">
  <a href="http://flexslider.woothemes.com/" target="_blank">http://flexslider.woothemes.com/</a>
  <!-- =-=-=-=-=-=-= Owl carousel =-=-=-=-=-=-= -->
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
  <link rel="stylesheet" type="text/css" href="css/owl.theme.css">
  <a href="http://www.owlcarousel.owlgraphic.com/" target="_blank">http://www.owlcarousel.owlgraphic.com/</a>
  <!-- =-=-=-=-=-=-= Check boxes =-=-=-=-=-=-= -->
  <link href="skins/minimal/minimal.css" rel="stylesheet">
  <a href="http://icheck.fronteed.com/" target="_blank">http://icheck.fronteed.com/</a>
  <!-- =-=-=-=-=-=-= Responsive Media =-=-=-=-=-=-= -->
  <link href="css/responsive-media.css" rel="stylesheet">
  <!-- =-=-=-=-=-=-= Template Color =-=-=-=-=-=-= -->
  <link rel="stylesheet" id="color" href="css/colors/defualt.css">
  <!-- =-=-=-=-=-=-= For Style Switcher =-=-=-=-=-=-= -->
  <link rel="stylesheet" id="theme-color" type="text/css" href="#" />
  <!-- JavaScripts -->
  <script src="js/modernizr.js"></script>
  <a href="https://modernizr.com/" target="_blank">https://modernizr.com/</a>

  <!-- =-=-=-=-=-=-= JQUERY =-=-=-=-=-=-= -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap Core Css  -->
  <script src="js/bootstrap.min.js"></script>
  <!-- Jquery Easing -->
  <script src="js/easing.js"></script>
  <!-- Menu Hover  -->
  <script src="js/forest-megamenu.js"></script>
  <!-- Jquery Appear Plugin -->
  <script src="js/jquery.appear.min.js"></script>
  <!-- Numbers Animation   -->
  <script src="js/jquery.countTo.js"></script>
  <!-- Jquery Smooth Scroll  -->
  <script src="js/jquery.smoothscroll.js"></script>
  <!-- Jquery Select Options  -->
  <script src="js/select2.min.js"></script>
  <!-- noUiSlider -->
  <script src="js/nouislider.all.min.js"></script>
  <!-- Carousel Slider  -->
  <script src="js/carousel.min.js"></script>
  <script src="js/slide.js"></script>
  <!-- Image Loaded  -->
  <script src="js/imagesloaded.js"></script>
  <script src="js/isotope.min.js"></script>
  <!-- CheckBoxes  -->
  <script src="js/icheck.min.js"></script>
  <!-- Jquery Migration  -->
  <script src="js/jquery-migrate.min.js"></script>
  <!-- Sticky Bar  -->
  <script src="js/theia-sticky-sidebar.js"></script>
  <!-- Style Switcher -->
  <script src="js/color-switcher.js"></script>
  <!-- Template Core JS -->
  <script src="js/custom.js"></script>
  <!-- For Google Map -->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your key"></script>
  <script src="js/infobox.js"></script>
  <!-- Data In Json Array -->
  <script src="js/data.json"></script>
  <!-- Map Setting -->
  <script src="js/markerclusterer.js"></script>
  <script src="js/markers-map.js"></script>

Once again, thank you so much for purchasing this theme. As I mentioned 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.

Installation

HTML Structure

Logo Settings

Changing Fonts

Website Optimization Tips

gZip Compression & Browser Caching

Image Compression & Optimization

CSS & jQuery Minifications

Content Delivery Network

Top Navigation Bar

Menu Types

Breadcrumb Type

Columns & Grid

Bootstrap Grid

Sidebar Widget Panel

Simple Sidebar Widget

Advertizing Sidebar

Featured Ad Carousel

Template Preloader

Google Map Settings

Master Slider

Color Switcher

Sources and Credits