Taxi Grabber HTML Template

Documentation by Coffeecream Themes
Created: 30/11/2016
Email: support@coffeecream.eu

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

1. HTML files and tructure

This theme is a responsive layout with one to 12 columns. The general template structure is the same throughout the template.

<!-- Header start -->
<header class="header>
    <div class="top-bar">
        ## TOP BAR GOES HERE ##
    </div>
    <div class="nav-bar">
        ## MAIN NAVIGATION GOES HERE ##
    </div>
</header>
<!-- Header end -->

<!-- Content start -->
<div class="content">
    ## MAIN CONTENT GOES HERE ##
</div>
<!-- Content end -->

<!-- Footer start -->
<footer class="footer">
    ## FOOTER GOES HERE ##
</footer>
<!-- Footer end -->

1.1. Navigation

Site navigation is found in <nav class="main-nav"> inside .nav-bar div. To create main menu items, add list elements to <ul>. You can add sub menu items to the main menu items adding an ul tag with list elements inside. You also have to add the parent class to the parent li elements. Adding "active" class to list elements makes the menu item selected/highlighted.

<nav class="main-nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="drivers.html">Drivers</a></li>
        <li><a href="cars.html">Cars</a></li>
        <li><a href="garage.html">Garage</a></li>
        <li><a href="locations.html">Locations</a></li>
        <li><a href="#!">Pages</a>
            <ul>
                <li><a href="about.html">About</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="jobs.html">Jobs</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="active"><a href="404.html">Error 404</a></li>
                <li><a href="#!">Third Level Nav</a>
                    <ul>
                        <li><a href="#!">Third Level 1</a></li>
                        <li><a href="#!">Third Level 2</a></li>
                        <li><a href="#!">Third Level 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

2. CSS files and stucture

The style.css file is used in every template html file. It can be found in the HEAD section of the page.

<head>

    [...]

    <!-- Main Stylesheet -->
    <link href="css/style.css" rel="stylesheet">

    [...]

</head>

Style.css is the template main css files and it contains links the other ones - Bootstrap, Google fonts, Owl Carsouel and icons css files.

@import "bootstrap.min.css";
@import "ionicons.min.css";
@import "icomoon.css";
@import "owl.carousel.min.css";
@import "uber-google-maps.min.css";
@import url(http://fonts.googleapis.com/css?family=Oswald:700|Roboto:300,300i,400,700);

2.1. Change Google font

Google font can be easily replaced in 2 simple steps:

  1. Edit the template file.
  2. Replace the Oswald font with yours (e.g. "PT Sans"), as you can see below.
@import url(http://fonts.googleapis.com/css?family=Oswald:700|Roboto:300,300i,400,700);

4. Javascript files and structure

This template requires the following javascript files. You should place them at the end of every template html file, just before the closing </body> tag. All the script and plugin settings are in settings.js file.

<!-- Javascripts start -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/picker.js"></script>
<script src="js/picker.date.js"></script>
<script src="js/picker.time.js"></script>
<script src="js/uber-google-maps.min.js"></script>
<script src="js/settings.js"></script>
<!-- Javascripts end -->

4.1. Plugins overview

Most of the functions are inbuilt in Bootstrap JS file, but there is also few additional plugins.

Script Description
jquery-3.1.1.min.js jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Click here for more info and full documentation »
owl.carousel.min.js Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
Click here for more info and full documentation »
picker.js
picker.date.js
picker.time.js		 These scripts are for date and time picker in taxi booking forms
Click here for more info and full documentation »
uber-google-maps.min.js It's a multilocation Google Map creator with many styles, custom map pins and animations.
Full documentation included.

5. Resources and credits

Following sources has been used.

Fonts

Images

All images have been bought and licensed on Adobe Stock

Icons

Javascript

See point 4.1.