Version: 1.0 | Dated: 21 June 2016

Installation

Thank you for purchasing my theme. 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:

  1. Open the demo Folder to find all the Templates Files. There are different versions of templates use as your requirnments
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • demo/logistic-pro/css - Extra Stylesheets Folder
    • demo/logistic-pro/images - Images Folder
    • demo/logistic-pro/js - Javacripts Folder
    • demo/logistic-pro/css/style.css - Template Core Css File
    • demo/logistic-pro/video/1.mp4 - Video Player Folder
    • demo/logistic-pro/php - Email Sending Code
    • demo/logistic-pro/index.html - Template Home page
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ScriptsBundle">
    <title>Logistic Pro Modern Multipurpose Services Template</title>
    <!-- =-=-=-=-=-=-= Favicons Icon =-=-=-=-=-=-= -->
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <!-- =-=-=-=-=-=-= Mobile Specific =-=-=-=-=-=-= -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- =-=-=-=-=-=-= Bootstrap CSS Style =-=-=-=-=-=-= -->
    	Your Css Files...
</head>
<body>
    <!-- =-=-=-=-=-=-= PRELOADER =-=-=-=-=-=-= -->
    <div class="preloader"><span class="preloader-gif"></span></div>

    <!-- =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= -->
    <section class="top-bar">
        <div class="container">
           
           Your Content Here.... 
          
        </div>
    </section>
    <header class="header-area">

        <!-- Logo Bar -->
        <div class="logo-bar">
            <div class="container clearfix">
                <!-- Logo -->
                <div class="logo">
                    <a href="index.html"><img src="images/logo.png" alt=""></a>
                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- Menu Section -->
        <div class="navigation-2">
            <!-- navigation-start -->
             Your Content Here.... 
        </div>
        <!-- /.navigation-end -->
        <!-- Menu  End -->
    </header>
    <!-- =-=-=-=-=-=-= HEADER END =-=-=-=-=-=-= -->



    <!-- =-=-=-=-=-=-=  Section  =-=-=-=-=-=-= -->
    <section class="custom-padding services">
        <div class="container">
            <!-- title-section -->
            <div class="main-heading text-center">
                 Your Content Here.... 
            </div>
            <!-- End title-section -->

            <!-- Row -->
            <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12">
                 Your Content Here.... 
                </div>
            </div>
            <!-- Row End -->
        </div>
        <!-- end container -->
    </section>
    <!-- =-=-=-=-=-=-= Our Services-end =-=-=-=-=-=-= -->


    <!-- =-=-=-=-=-=-= FOOTER =-=-=-=-=-=-= -->
    <footer class="footer-area">
        <!--Footer Upper-->
        <div class="footer-content">
            <div class="container">
                <div class="row clearfix">
                    <!--Two 4th column-->
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="row clearfix">
                           Your Content Here.... 
                        </div>
                    </div>
                    <!--Two 4th column End-->
                </div>
            </div>
        </div>

        <!--Footer Bottom-->
        <div class="footer-copyright">
            <div class="auto-container clearfix">
                <!--Copyright-->
                <div class="copyright text-center">Copyright 2016 &copy; Theme Created By <a target="_blank" href="http://themeforest.net/user/scriptsbundle/portfolio">Scriptsbundle</a> All Rights Reserved</div>
            </div>
        </div>
    </footer>

    <!-- =-=-=-=-=-=-= JQUERY =-=-=-=-=-=-= -->
    <script src="js/jquery.min.js"></script>
</body>
</html>

Changing Fonts

By default, Logistic Pro Multipurpose Creative Template uses 2 Fonts namely: Open Sans Pro and Merriweather from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

<!-- =-=-=-=-=-=-= Google Fonts =-=-=-=-=-=-= -->
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic,900italic,900,300,300italic" 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.

Menu Types

Logistic Pro is come up with 2 Menu style

  1. Full Width Menu
  2. Right Align Menu

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

Full Width Menu 
 <!-- Menu Section -->
  <div class="navigation-2"> 
    <!-- navigation-start -->
    <nav class="navbar navbar-default ">
      <div class="container"> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-expanded="false">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
          </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="main-navigation">
          <ul class="nav navbar-nav">
            <li class="dropdown">
             <a class="dropdown-toggle " data-toggle="dropdown">Home <span class="fa fa-angle-down"></span></a>
              <ul class="dropdown-menu">
                <li> ... Sub Menu </li>
              </ul>
            </li>
            <li><a href="contact.html">Contact us</a></li>
          </ul>
        </div>
      </div>
      <!-- /.container-end --> 
    </nav>
  </div>
  <!-- /.navigation-end -->


Right Align Menu

Right menu dont have the class navigation-2 below is the code of Right Align Menu

<div class="navigation"><!-- navigation-start -->
  <nav class="navbar navbar-default">
    <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-expanded="false">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
        <a href="index.html"  class="navbar-brand"><img class="img-responsive"  src="images/logo-1.png" alt=""> </a> </div>
      
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="main-navigation">
        <ul class="nav navbar-nav navbar-right custom-nav">
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Home <span class="fa fa-angle-down"></span></a>
              <ul class="dropdown-menu">
                <li>... Sub Menu </li>
              </ul>
            </li>
            <li><a href="contact.html">Contact us</a></li>
          </ul>
      </div>
      <!-- /.navbar-collapse --> 
    </div>
    <!-- /.container-end --> 
  </nav>
</div>


Page Titles

Here is the simple code for giving name to pages

<!-- =-=-=-=-=-=-= PAGE BREADCRUMB =-=-=-=-=-=-= -->
    <section class="breadcrumbs-area parallex">
        <div class="container">
            <div class="row">
                <div class="page-title">
                    <div class="col-sm-12 col-md-6 page-heading text-left">
                        <h3>Our Awesome Work</h3>
                        <h2> Our Services 2</h2>
                    </div>
                    <div class="col-sm-12 col-md-6 text-right">
                        <ul class="breadcrumbs">
                            <li><a href="#">home</a></li>
                            <li><a href="#">pages</a></li>
                            <li><a href="#">about our projects</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- =-=-=-=-=-=-= PAGE BREADCRUMB END =-=-=-=-=-=-= -->

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.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 Panel

<div class="side-bar">
<!-- widget -->
    <div class="widget">
        <div class="category">
            <h2>... Widget Name</h2>
            <ul>
                <li>... Widget Content</li>
            </ul>
        </div>
    </div>
<!-- widget end -->
</div>

Revolution Slider

You just have to place the image at img src

<ul>
<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"> 
        <!-- MAIN IMAGE --> 
        <img src="images/slider/4.jpg"   alt=""  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"> 
        <!-- LAYER NR. 1 -->
        <div class="tp-caption tt-slider-title sft"
                    data-x="50"
                    data-y="100"
                    data-speed="1000"
                    data-start="500"
                    data-easing="Power4.easeOut"
                    data-endspeed="300"
                    style="z-index: 1"> We are simply<br>
          creative </div>
        
        <!-- LAYER NR. 2 -->
        <div class="tp-caption tt-slider-subtitle sft"
                    data-x="50"
                    data-y="300"
                    data-speed="1000"
                    data-start="900"
                    data-easing="Power4.easeOut"
                    data-endspeed="300"
                    style="z-index: 2">a simple clean unique html template for <br>
          bulid brand </div>
        
        <!-- LAYER NR. 3 -->
        <div class="tp-caption sft"
                    data-x="50"
                    data-y="430"
                    data-speed="1000"
                    data-start="1100"
                    data-easing="Power4.easeOut"> <a href="#portfolio" class="tt-btn btn-bordered light page-scroll">View Works</a> </div>
      </li>
</ul>


Video Player

Depilex also provide video option. Here is a simple way how you can use a video player

<video class="text-center" muted autoplay loop poster='video/1.jpg' > 
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
      <source type="video/webm" src="video/1.webm">
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
      <source type="video/mp4" src="video/1.mp4">
      Your browser does not support the video tag.
   </video>

Note you just have to provide the source of video at src="video/1.mp4" thats all.

Color Switcher

Logistic Pro is came up with 6 Pre defined Colors

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

<!-- Theme Color -->
<link rel="stylesheet" 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="red" id="red"></a>
                </li>
                <li>
                    <a href="#." class="green" id="green"></a>
                </li>
                <li>
                    <a href="#." class="orange" id="orange"></a>
                </li>
                <li>
                    <a href="#." class="purple" id="purple"></a>
                </li>
                <li>
                    <a href="#." class="yellow" id="yellow"></a>
                </li>
                
            </ul>
        </div>
        <div class="clr"> </div>
    </div>


Also remove color switcher Jquery files

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


Contact Us Email

Logistic Pro Also Comes With Integrated PHP Code
It's very easy to use that code. The code os located at

demo/logistic-pro/php/contact.php - Email Sending Code
Just go to demo/logistic-pro/php/contact.php and goes to line number 43

$address = "scriptsbundle@hotmail.com" - just place your email there and you are ready to go :)

Sources and Credits

Here is the simple html structure for Question layout

<!-- =-=-=-=-=-=-= Bootstrap CSS Style =-=-=-=-=-=-= -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- =-=-=-=-=-=-= Template CSS Style =-=-=-=-=-=-= -->
    <link rel="stylesheet" href="css/style.css">
    <!-- =-=-=-=-=-=-= Font Awesome =-=-=-=-=-=-= -->
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css">
    <!-- =-=-=-=-=-=-= Et Line Fonts =-=-=-=-=-=-= -->
    <link rel="stylesheet" href="css/et-line-fonts.css" type="text/css">
    <!-- =-=-=-=-=-=-= Revolution Main Stylesheet =-=-=-=-=-=-= -->
    <link href="js/revolution/css/settings.css" rel="stylesheet" media="screen" />
    <!-- =-=-=-=-=-=-= Magnific PopUP CSS =-=-=-=-=-=-= -->
    <link href="js/magnific-popup/magnific-popup.css" rel="stylesheet">
    <!-- =-=-=-=-=-=-= Owl carousel =-=-=-=-=-=-= -->
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="css/owl.style.css">
    <!-- =-=-=-=-=-=-= Google Fonts =-=-=-=-=-=-= -->
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic,900italic,900,300,300italic" 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">
    <!-- =-=-=-=-=-=-= Flat Icon =-=-=-=-=-=-= -->
    <link href="css/flaticon.css" rel="stylesheet">
    <!-- Theme 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>
    <!-- REVOLUTION STYLE SHEETS -->
    <link rel="stylesheet" type="text/css" href="js/revolution/css/settings.css">



<!-- =-=-=-=-=-=-= JQUERY =-=-=-=-=-=-= -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap Core Css  -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Jquery Smooth Scroll  -->
    <script src="js/jquery.smoothscroll.js"></script>
    <!-- Jquery Easing -->
    <script type="text/javascript" src="js/easing.js"></script>
    <!-- Jquery Counter -->
    <script src="js/jquery.countTo.js"></script>
    <!-- Jquery Waypoints -->
    <script src="js/jquery.waypoints.js"></script>
    <!-- Jquery Appear Plugin -->
    <script src="js/jquery.appear.min.js"></script>
    <!-- Jquery Shuffle Portfolio -->
    <script src="js/jquery.shuffle.min.js"></script>
    <!-- Carousel Slider  -->
    <script src="js/carousel.min.js"></script>
    <!-- Jquery Parallex -->
    <script src="js/jquery.stellar.min.js"></script>
    <!--Style Switcher -->
    <script src="js/color-switcher.js"></script>
    <!-- jQuery REVOLUTION Slider  -->
    <script src="js/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script src="js/revolution/js/jquery.themepunch.revolution.min.js"></script>
    <!-- Gallery Magnify  -->
    <script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
    <!-- Sticky Bar  -->
    <script src="js/theia-sticky-sidebar.js"></script>
    <!-- Template Core JS -->
    <script src="js/custom.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.