Gofar - Multipurpose Travel Booking Template

Version 1.0

Thank you very much for purchasing our template. This document will guide you through the setup process of this template. If you have questions about anything about this template that isn't covered in this documentation, please post your question here.

Getting started

  1. Using a text editor
  2. The robots tag
  3. File structure

Using a text editor

First of all, you might want to use a text-editor like Notepad++ (Windows) or TextWrangler (Mac OS) for editing the files so you're more able to see what kind of code you're editing.

Download Notepad++
Download TextWrangler

The robots tag

Please always make sure to check the robots tag in your HTML files. If you want to learn more about the robots tag, read this guide at Yoast.com.

MegaDrupal is not responsible for your site not being indexed by search engines.

File structure

This is file tructure in the package.

css/
fonts/
images/
js/
index.html
index-dark.html
index2-dark.html
index2.html
index3-dark.html
index3.html
login-dark.ht

attraction-dark.html
attraction-detail.html
attraction.html

destinations-attraction-dark.html
destinations-attraction.html
destinations-flight-dark.html
destinations-flight.html
destinations-grid-dark.html
destinations-grid.html
destinations-hotel-dark.html
destinations-hotel.html
destinations-list-dark.html
destinations-list.html
destinations-train-dark.html
destinations-train.html
destinations-trip-dark.html
destinations-trip.html

flight-dark.html
flight-detail-dark.html
flight-detail.html
flight-popup.html
flight.html

hotel-dark.html
hotel-detail-dark.html
hotel-detail.html
hotel.html

train-dark.html
train-detail-dark.html
train-detail.html

train.html
trip-dark.html
trip-detail-dark.html
trip-detail.html
trip.html

login.html
register-dark.html
register.html

room-type-popup.html
sale-flight-popup.html

single-post-dark.html
single-post.html

checkout-complete-dark.html
checkout-complete.html
checkout-customer-dark.html
checkout-customer.html
checkout-yourcart-dark.html
checkout-yourcart.html

blog-dark.html
blog.html

contact-dark.html
contact.html
processContact.php

HTML Structure

Regular layout, structure

The template is based on Bootstrap 3 Framework - http://getbootstrap.com

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Basic HTML Markup

<div class="row">
  <div class="col-md-12">
    Level 1 column
    <div class="row">
      <div class="col-md-6">Level 2</div>
      <div class="col-md-6">Level 2</div>
  </div>
  </div>
</div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:

- style.css - (The basic layout structure styles, elements such as boxes, titles, etc)						

- lib/ - (css library)

- fonts/ - (font files)

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

The initialization of the elements, libs and features is made by the file scripts.js, in the JS folder.

Choose theme styles

Gofar theme comes with 2 style: dark and light. Default style is light, to use dark, just insert class dark to #page-wrap like this:

<div id="page-wrap" class="dark">

Change color scheme

We added 5 colors for you to pick: blue, cyan, green, orange, yellow. Just find this code in HTML and change it to your favourite color:

You can set breakpoint for menu responsive by change data-responsive value:

<link id="colorreplace" rel="stylesheet" type="text/css" href="css/colors/blue.css">

To custom color, just follow those simple steps:

  • Go to css/colors, copy blue.css to new file, for example: red.css
  • Open red.css file and change color code.
  • Change color css link in HTML files.
<nav class="navigation awe-navigation-hamburger">

Section background

You can use color, static image or parallax image for section background. We add 3 predefine class for you: awe-parallax awe-static awe-color, just change it in section code and set background color or image url

<section class="awe-parallax">

Contact form

Ajax contact form

You need to modify email address on processContact.php, line 45

$to = "info@megadrupal.com";

to your email address. So user send contact it will go to your email.

Your server must support php send mail function to make contact form work.

Contact map

Web use Google map for Gofar. To customize your location, map zoom and map marker, just check in contact.html code:

<div id="contact-maps" data-map-zoom="16" data-map-latlng="45.738028, 21.224535" data-map-content="Gofar Office"></div>

Typography

How to change text

  1. Open the HTML file with a text editor (for example trip-detail.html.
  2. Find the text that you want to edit, for example: Winter Wanderer, you will see
    <a href="tour-detail.html">Shop, Hop, and Top (4 Day Value Package)</a>
    

    change it to

    <a href="tour-detail.html">Your tour name here</a>
    
  3. Save the file and view it in your browser to see the result.

How to change the font

  1. Open the style.css file in the css folder with a text editor.
  2. Search for the following text:
    font-family: 'Lato', Arial, Verdana;
    
  3. Enter the fontname you wish to use. For example:
    font-family: Georgia, Times, serif;
    
  4. 4. Save the file and view the result in your browser.

For more information about font families, visit w3schools.com.

Make sure to delete the @import code from the fonts.css file if you're not planning on using the Viga font. See also the Using Google Webfonts how to.

Using Google Webfonts

1. Visit https://www.google.com/fonts/.
2. Choose your favourite font, for example 'Droid Sans'.
3. Click the 'Quick use' button. (This is the grey button in the middle. You'll find it at the left of the blue 'Add to Collection' button.)

google font 1

4. Select the styles of the font you wish to use, for example Normal 400 and Bold 700.
5. Copy the code you'll find at the thrid point and the second tab (the @import function) of the Google Webfonts page.

google font 2

Example given:


@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

6. Open your style.css file and add this code on the first line of the document.
7. Copy the font-family code given at point 4 of the Google Fonts instructions. Don't forget to add a fallback font after the Google Font:


font-family: 'Droid Sans', Helvetica, Arial, sans-serif;

8. Follow the instructions given in How to change the font.

General information

Need help?

If you need help with setting up the template, please post your question here. There are a few notes:

  • Before you ask a question please make sure to scan the menu and read the specific section of your question.
  • If it's a specific HTML question, Google (or any other search engine) is your friend and probably a hundred times faster in replying.
  • If it's possible, please provide a link to your (demo) website so our stuff are able to quickly scan for possible issues.

Report a bug

If you found a bug, please send us an e-mail with a (small) description of the issue. Your help is always apreciated.

Credits

Fonts

Fonts icon

Codes & Plugins