Travel Engine documentation

Introduction

Thank you for purchasing Travel Engine theme! We’re glad that you found what you were looking for. It is our goal that you are always happy with what you bought from us, and We hope that you will be able to create an outstanding website with our theme easily.

Before proceeding with the theme installation, It is recommended that you follow the steps listed below. We have covered all kinds of necessary information, and provide you with all the guidelines and details that you will need to use Travel Engine theme. If you can’t find the answer you’re looking for, We encourage you to reach us through our Support portal. We'll be glad to help you out in your queries. Please Generate ticket through Support portal.

Installation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /template folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website root directory:
- template
  Includes all assets and template files, used in theme
  - css
    Includes all .css files, used in theme
  - img
    Includes all images, used in .html files.
  - font awesome
    Includes font icon .css files, used in theme
  - js
    Includes plugin's initialization file
  - slick
    Includes all slick slider .css and js files, used in theme
  - datepicker
    Includes all datepicker .css and js files, used in theme
  - range-slider
    Includes range slider .css and js files, used in theme for filtering the item through price
  - elements
    Includes all elements or shortcodes
  - b2c
    Includes all .html files, used for customer panel
  - b2b
    Includes all .html files, used for agent panel
  - super-agent
    Includes all .html files, used for super agent panel
You should upload all or specific HTML files as per your need.
You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

HTML Structure

Travel Engine follows a simple and easy to customize coding structure. Here is the sample for your reference:

<!doctype html>
    <html>
        <head>
            <!-- title -->
            <meta charset="utf-8">
            <!-- description -->
            <meta name="description" content="">
            <!-- keywords -->
            <meta name="keywords" content="">
            <!-- favicon -->
            <!-- style -->
        </head>
        <body>
            <!-- header start -->
                <!-- mobile nav start -->
                    <div class="mob-nav">
                        ...
                    </div>
                <!-- mobile nav end -->
                <header>
                    <!-- top bar start -->
                        <div class="top-bar">
                                ...
                        </div>
                    <!-- top bar end -->
                    <!-- navigation start  -->
                        <nav class="navbar navbar-default bootsnav navbar-expand-lg">
                                    ...
                        </nav>
                    <!-- navigation end -->
                </header>
            <!-- header end -->
            <!-- sections start -->
                <section>
                    ...
                </section>
            <!-- sections end -->
        <!-- footer start --> 
            <footer>
                            
            </footer>
        <!-- footer end -->
        <!-- javascript & css libraries -->
    </body>
</html>

Logo Settings

The Logo Container can be found in the Header --> Nav Container - .navbar

<a class="navbar-brand" href="index.html">
    <img src="img/travel-engine-logo.png" alt="" />
</a>

Image & Favicon Settings

Image Settings
Travel Engine download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like img/yourimage.jpg

<img src="image path" alt="image alt text">

Favicon Settings
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

<!-- favicon -->
<link rel="shortcut icon" href="img/favicon.png">
<link rel="apple-touch-icon" href="img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

Changing Fonts

By default, Travel Engine uses the Google fonts. In case, If you want to change font to any other Google fonts. You can change the fonts from /css/style.css file in below lines.

/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

To change the font, first go to Google fonts, choose your desired font and use the generated code.

If you have a need to use custom fonts, Remove above section completely and visit Self Hosted Fonts

RTL Settings

If you want to setup right-to-left styling, You just need to link rtl-style.css at the end of <head> tag of each page. See example below:

<link rel="stylesheet" type="text/css" href="css/rtl-style.css" />

<!doctype html>
<html lang="ar"> <!-- set lang="ar" for RTL -->
    <head>
        <!-- title -->
        <meta charset="utf-8">
        <!-- description -->
        <meta name="description" content="">
        <!-- keywords -->
        <meta name="keywords" content="">
        <!-- favicon -->
        <!-- style -->
            
        <!-- RTL style -->
        <link rel="stylesheet" type="text/css" href="css/rtl-style.css" />
    </head>
    <body>
            ...
    </body>
</html>

Note LTR are enabled by default. If you wish to enable the RTL styling you can simply add lang="ar" and css file rtl-style.css above code from all HTML files.

Customization

you will need to add custom CSS through a separate CSS file.

You just need to link custom.css at the end of <head> tag of each page. See example below:

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

Mobile Nav

You can change page mobile view navigation by changing below code to your new page.

<!--Mobile view start-->
<div class="mob-nav">
    <div class="row">
        <div class="col-3">
            <a href="flight.html"> <i class="fa fa-plane"> </i> <span> Flight </span> </a>
        </div>
        <div class="col-3">
            <a href="hotel.html"> <i class="fa fa-bed"> </i> <span> Hotel </span> </a>
        </div>
        <div class="col-3">
            <a href="holidays.html"> <i class="fa fa-briefcase"> </i> <span> Holidays </span> </a>
        </div>
        <div class="col-3">
            <a href="login.html"> <i class="fa fa-user"> </i> <span> Login </span> </a>
        </div>
    </div>
</div>
<!--Mobile view end-->

Note Page Mobile view Nav are enabled by default. If you wish to disable the page Mobile view Nav you can simply delete above code from all HTML files.

Page Titles

You can choose between 6 Types of page titles while creating your pages. The list of page title options & its descriptions are provided below for your reference:

1. Page Title - Left Alignment

It includes page title with alligned left, sub title under page title and breadcrumb in right part. See below image and code for more inforamtion.