Gofar - Multipurpose Travel Booking Template
Version 1.0Thank 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
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.
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">
Choose Menu styles
There're 2 header type with 2 menu styles (normal & hamburger)
You can set breakpoint for menu responsive by change data-responsive
value:
<nav class="navigation awe-navigation" data-responsive="1200">
To use hamburger navigation, just change class awe-navigation
to awe-navigation-hamburger
<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
- Open the HTML file with a text editor (for example trip-detail.html.
- 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>
- Save the file and view it in your browser to see the result.
How to change the font
- Open the style.css file in the css folder with a text editor.
- Search for the following text:
font-family: 'Lato', Arial, Verdana;
- Enter the fontname you wish to use. For example:
font-family: Georgia, Times, serif;
- 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.)

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.

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.