Transport - Transport, Logistic & Warehouse HTML

Introduction

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome! 
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
 
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. Hosting Account with Cpanel to upload files to Server

Getting Started

If you are able to read this documentation locally, which means you have successfully downloaded the package and extracted the zip. The file structure as follows :

 

    Transport/
    ├── documentation/   
    ├── template/
    │   ├── components/
    │   ├── css/
    │   ├── images/  
    │   ├── js/

The folder you have to customize is the HTML folder. Copy Template folder from the package and paste it in your Project Folder. (This helps you to prevent overwriting in original files. so if you messed up something, you will get the original here.)

Layouts

The next step is to choose your prefereed layout. We have created many versions of Homepages and subpages. You don't need these 100+ HTML for production. You can only use the pages you really need for your website. Once you finalized the homepage, don't forget to rename it as index.html. Same way you can rename other subpages like services, about etc.. But make sure its also changed inside the Menu in the HTML file.

Grid System

Transport uses a Bootstrap 3 Grid System with 12 columns. Here's an example of how to use columns to easity create & edit sections. A section will contain a container, row and multiple col-* classes. Please see official Bootstrap Docs to learn more.

 

<!-- Full Width Bootstrap Columns -->
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            YOUR CONTENT GOES HERE
        </div>
    </div>
</div>

or, you can use the grid system with 2 columns.

<!-- Half Width Bootstrap Columns -->
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            YOUR CONTENT GOES HERE
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            YOUR CONTENT GOES HERE
        </div>
    </div>
</div>

or, you can use the grid system with 3 columns.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            YOUR CONTENT GOES HERE
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            YOUR CONTENT GOES HERE
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            YOUR CONTENT GOES HERE
        </div>
    </div>
</div>

Customization

Lets start customizing the template. Open HTML files and follow the steps to customize the template. make sure you have enough HTML and CSS Knowledge (basic knowledge is fine). Otherwise please go to the first section where I have given links to learn the HTML & CSS

To change the logo, The easy way is to open the template/images folder and replace with your new logo*.png and then you will be able to see the new logo everywhere.

Alternatively, you may also change the name of the image logo.png to any other name as you like. eg: mybrand-logo.png In that case, you should also change the Image reference in all HTML files. The code will look like this.

<img src="images/logo-2.png" alt="Transport">

In the above code, you should replace the scr="" part with your new name. eg: src="images/mybrand-logo.png"

Navigation Menu

This is the structure of Navigation Menu. Follow the steps below to edit this section.

<nav id="primary-menu-mobile">
  <ul>
    <li>
      <a href="index.html">MENU NAME</a>
      <ul>
        <li><a href="home-01.html">SUB MENU</a></li>
        <li><a href="home-02.html">SUB MENU 2</a></li>
      </ul>
    </li>
    <li><a href="projects-fullwidth.html">MENU NAME</a></li>
  </ul>
</nav>
  1. Replace "Menu name" with the menu name.
  2. Replace "MENU_LINK" inside href="" with the full HTML page name. eg: about.html
  3. Replace "SUB MENU" with the submenu menu name.
  4. The process is same for all menus and dropdown menus. You can add unlimited menus.

Revolution Slider

Revolution slider is a jquery plugin used for Sliders. Its a 3rd party plugin. You can read the Documentation separately by clicking the link below.

Click to read Rev Slider Documentation

Note: No support is provided for 3rd party Plugins, If you want support, you should buy this plugin separately on CodeCanyon and then you can seek support from that plugin author. However using this plugin in your site does not need any separate license because I've bought license for you to use it on one website.

Credits

Frameworks

  1. Bootstrap

Libraries

  1. jQuery

Plugins

  1. lightgallery
  2. mmenu
  3. owl.carousel
  4. parallax.js
  5. scrollup
  6. imagesloaded
  7. direction-hover

Images

  1. Shutterstock

Support

Please remember you have purchased a very affordable template and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Please be patient, polite and respectful. We will try to answer your questions as soon as possible

Please send support question to our email themesundotcom@gmail.com