### Documentation by “Ansonika” v1.8

# “TRAVELGUIDE - HTML Site template”

Created: 01 August 2016
Last update:11 October 2024
By: Ansonika

Thank you for purchasing my theme. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

## Table of Contents

1. HTML Structure
2. CSS Files, Structure and basic modifications
3. PHP contact form, newsltetter form and plan a visit form
4. JavaScript
5. Sources and Credit
6. UPDATES

### A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!. Suitable for tour agencies, travel industry, takes inspiration from the most used travel guide apps (ex. Booking.com travel guide app) that help traveler when visit a city: get directions, important and condensed info about a place, audio guides, places and locations near by you.

The item comes with two menu versions.

### B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home all versions
- 2.2 Grid page
- 2.3 List page
- 2.4 Map List
- 2.5 Detail page
- 2.6 Audio Guides
- 2.7 Transport page
- 2.8 Faq page
- 2.9 Whishlist
- 3.0 Login Register
- 3.1 About
- 3.2 Contacts

3. COMMON
3.1 Spacing
3.2 Pagination
3.3 Tooltips
3.4 Breadcrumbs
3.5 Banners
3.6 Ribbons
3.7 List
3.8 Tabs
3.9 Input form style
4.0 Input Switcher

4. RESPONSIVE

    Note
    Every page use these styles as default:
    <!-- BASE CSS -->
        <link href="css/animate.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/menu.css" rel="stylesheet">
        <link href="css/icon_fonts/css/all_icons.min.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">Some pages required additional specific css
    <!-- SPECIFIC CSS -->
        <link href="css/ion.rangeSlider.min.css" rel="stylesheet">
        <link  href="css/owl.carousel.min.css" rel="stylesheet">
        <link  href="css/owl.theme.default.min.css" rel="stylesheet"

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 30px). Below how is coded

    LOGO HOME VERSIONS WITH H1 FOR SEO PURPOSES (change sizes via css if you need in style.css)

    <div id="logo_home">
    <h1><a href="index.html" title="TravelGuide template">TravelGuide template</a></h1>
    </div>

    LOGO NORMAL
    <a href="index.html" id="logo"><img src="img/logo.png" width="170" height="30" alt="" data-retina="true"></a>

    REMEMBER to create the retina version that have double size of the orginal dimension and name it with _2x
    (in this case for example width:340px height:60px logo_2x.png).

Change the color scheme
The item comes with 2 different color schemes ind addition to the default one.

    In order to apply the color scheme easly without modify every page we suggest to import the color scheme inside
    css/custom.css (the files you should use for your custom styles) as the example below:

    @import url("color-scheme-2.css");

    Of course you can create your own starting from one of the 2 color schemes provided.

Change the menu type
The item comes with 2 different menu.

    1) Use the proper menu css file (menu_1/menu.css or menu_2/menu.css)
    2) Copy and paste the html code of the menu.

Set up site launch page located in site_launch folder
Open functions.js and find this line of code:

    SET THE DATE
    Open site_launch/js/functions.js and find this line.

    var target = new Date("July 15 2014 13:30:00 GMT+0100"); //replace with YOUR DATE

    SET NEWSLETTER EMAIL
    Open site_launch/assets/newsletter.php and find this commented code.

    //$address = "your email address";
    $address = "test@domain.com";

How MAPS works
Open js/map.js and find this line of code:

    Let's take as example the map used in must-see-map-listing.html page. Open js/must_see_map.js.

    'Mustsee': [
    			{
    				type_point: 'Historic Buildings',
    				location_latitude: 43.773460,
    				location_longitude: 11.255985,
    				map_image_url: 'img/thumb_map_must_1.jpg',
    				rate: 'Superb | 7.5',
    				name_point: 'Santa Maria del Fiore',
    				description_point: 'Piazza del Duomo 1, Florence',
    				get_directions_start_address: '',
    				phone: '+3934245255',
    				url_detail: 'florence-must-see-detail.html'
    			},

    type_point= type of place or additional info
    location_latitude= the latitude of Arc de Triomphe
    location_longitude= the longitude of Arc de Triomphe
    map_image_url: the thumbnail inside the infobox
    rate= the rate in info box
    name_point= the title in info box
    description_point= the address in the infobox
    get_directions_start_address: if you leave empty, google map takes you position automatically;
    if you set an address, google map calculate the directions between the 2 point
    phone: the phone in the infobox
    url_point= the link to a detailed page

    The marker/pins are located in img/pins folder. Each pin name have to match with the category
    name. In this case for example is Mustsee.png...so automatically every point in the same category has the
    same pin/marker.

    CHANGE THE DEFAULT COLOR STYLE OF THE MAP
    You can add you onw style for example in js/must_see_map.js...look for this line (aprox line 67):

    styles: []

    inside of the square graphs, place you styles. You can find some nice premade styles
    here https://snazzymaps.com/.

    THE GET DIRECTION BUTTON ON EVERY LISTING

    Example of code with auto detection of your start point:

    <form action="http://maps.google.com/maps" method="get" target="_blank" class="directions_list">
    <input type="hidden" name="daddr" value="43.773460, 11.255985">
    <button type="submit" class="tooltip_styled tooltip-effect-4">
    <span class="tooltip-item"></span>
    <span class="tooltip-content">Directions</span>
     </button>
    </form>

    Change the value in bold to define the end point.

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24); you can use also the psd provided in the psd folder.

    //set up markers
    		var myMarkers = {"markers": [
    				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
    			]
    		};

    		//set up map options
    		$("#map").mapmarker({
    			zoom	: 14,
    			center	: 'Covent Garden London', //YOUR FULL ADDRESS
    			markers	: myMarkers
    		});

COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)

    In some cases Google require an api key for the Google map.

    You can create your own "Standard api key" here
    by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section),
    and follow the steps.
    https://developers.google.com/maps/documentation/javascript/get-api-key#key

    Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

    Then replace at the bottom of every page that use Google map, this line

    <script src="http://maps.googleapis.com/maps/api/js"></script> OR
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    with your api key included, like the example below
    <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    NOTE: if you apply an api key, the map locally does not load. You must upload your site.

Home with video header (fallback with a background image in tablets and mobile)

    1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:

    Example
    data-teaser-source="video/intro" (folder/name_files)=
    paris.mp4
    paris.ogv

    2) To change the fallback background image open css/style.css an find this class in the "responsive section"

    #hero_video{
    background: #333 url(../img/sub_header_home.jpg);
    background-size:cover;
    background-position: center bottom;}

THE GRID
Please refer to this documentation Boostrap

### C) PHP files: Contact form, Newsletter subscription, Newsletter in site launch - top

All the files you need are located in assets folder(for the site launch is site_launch/assets). If you need to change the allert messages open assets/validate.js. Below an example taken from newsletter.php; all the files are well commented.

Check availability form and contact form
It's the same logic and script of check newsletter. If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the script)
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client

Note: just a quick note for the the contact form for the detail page of Shops, Restaurants, Event, Must see, etc:

    There is an hidden input field just to recognize from where the email comes. here you have to set
    the name of the shop, the event, etc ...like the xample below

    <input name="sender_name" id="sender_name" type="hidden" value="Event Name">

### D) JavaScript - top

This theme use these Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

common_scripts.js content:

- Menu.js
- Boostrap.js
- Retina-replace.js
- Parallax.js
- Magnifc-popup.js
- Wow.js
- Owl.carousel.js
- Tabs.js

### E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

- Twitter Bootstrap
- Fontello
- Jquery easing
- Background images slider
- Magnific popup
- Wow
- Animate.css
- Retina replace
- Parallax
- Jquery
- Owl carousel
- Text rotator
- Jquery Cookie bar
- Jquery Fixed sidebar
- Jquery Input range slide
- Circular progress bars (used for score)
- Input checkbox switcher

Images and Videos are not included. Envato for copyright rules, does not permit to include those assets in the downloadable file. They are only for demo purpose. Below the sources sites:

- Pixabay
- Unsplash
- Vectorstock

### D) Updates - top

Version 1.8 12 October 2024

- Updated Documentation

V.1.7 11 January 2024

- Updated Documentation

V.1.6 8 August 2022

- Removed "get_magic_quotes_gpc" php function deprecated for latest PHP versions

    How to update:

    Update the following files: assets/contact.php + contact_detail.php + subscribe_plan.php or delete the following lines of code

    if(get_magic_quotes_gpc()) {
    	$message_contact = stripslashes($message_contact);
    }

V.1.5 14 January 2022

- Updated Documentation

V.1.4 18 February 2021

- Updated Documentation

V.1.3 (10 Dec 2018)

- Removed @import in the Coming soon page (Google web font)

V.1.2 (28 Feb 2017)

- Fixed an issue related to the Coming soon page (files to update: coming_soon/style.css, coming_soon/index.html, coming_soon/assets/newsletter.php)

V.1.1 (27 September 2016)

- Added Megamenu
- Added new pages: Full screen map, Gallery page, Subscription page, Working Subscription page
- Improved detail pages with Working php forms (Contact form + Booking form)
- Added 2 Color schemes
- Improved organization of some javascript code
- Home pages changed (now with cat on top + map). For the old version please refer to index_6.html

    ATTENTION: BEFORE TO UPDATE YOUR EXISTING SITE, MAKE A COPY OF IT.

    1) NEW JS FILES
    - bootstrap-datepicker.js
    - datepicker_func.js
    - map_home.js

    2) UPDATED JS FILES
    - functions.js

    3) NEW CSS FILES
    - color-scheme-2.css
    - color-scheme-3.css
    - date_time_picker.css

    4) UPDATED CSS FILES
    - style.css
    - magnific-popup.css
    - magnific-popup.min.css
    - menu.css

    4) UPDATED HTML FILES
    - florence-bar-detail.html
    - florence-hotel-detail.html
    - florence-restaurant-detail.html
    - florence-shops-detail.html
    - florence-event-detail.html
    - florence-must-see-detail.html

    5) NEW HTML FILES
    - subscribe.html
    - subscribe-working.html
    - gallery-3-columns.html
    - gallery-4-columns.html
    - fullscreen-map.html

### Maybe you are interested in

Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

### Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or via the Support Tab on the item page. You will receive an answer within 24-48 hours (working days) GMT +1.

- I only provide support for fixing bugs or small issues on my items.
- I don't provide free support for additional custom modifications to the items.
- Please provide your site link, screenshots and other information about your issue.
- Envato support terms

### Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

- if you are a company, agency or private user
- all the information about your projects, needs, site urls, project sheet, etc..
- from which country you are
- if you have a deadline
- if you have basic knowledge of HTML , CSS, JS, PHP

Ansonika

Go To Table of Contents