Documentation by “Ansonika” v1.7

“CITYTOURS - HTML Site template”

Created: 09 March 2015
Last update: 19 Nov 2015
By: Ansonika
Email: info@ansonika.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post a ticket via Support site. 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

Updates

V.1.7 (19 Nov 2015)

V.1.6 (12 Nov 2015)

For users that need to update from previous versions, just simply copy the new css, js files and the html pages.
New css:
- jquery.cookiebar.css
- admin.css
- pop_up.css
- morphext.css
- weather.css

New js:
- morphext.js
- tabs.js
- jquery.zweatherfeed.js
- jquery.cookiebar.js
- pop_up.js
- pop_up_func.js

New pages:
- admin.html
- index_8.html
- index_9.html
- index_10.html
- index_11.html
- general_page.html

V.1.5 (11 June 2015).

V.1.4 (19 May 2015) View updates details.

V.1.3 (21 April 2015) View updates details.

V.1.2 (9 April 2015) View updates details.

V.1.1 (26 March 2015) View updates details.

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, tickets purchase tour services. Version 1.1 is included in the pack separately for users that doesn't need hotels and transfers listing.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. 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
- 2.2 All tours list / All tours grid
- 2.3 Single tour page
- 2.4 Cart - Payment - Confirmation
- 2.5 About
- 2.6 Contact us
- 2.7 Login / register
- 2.8 Tour guide page

3. COMMON
- Tooltips
- Containers styles
- Form styles
- Tabs, collapse
- etc

IMPORTANT

All the common css styles are imported in base.css...this for a fast editing and more clean code. 
Then some pages have on top some specific css style (like blog for example, etc).

BASE.CSS
@import url("bootstrap.min.css");			/* Main Bootstrap */
@import url("animate.min.css");			/* Animate On Page Scroll */
@import url("style.css");					/* Main theme styles */
@import url("menu.css");					/* Menu styles */
@import url("responsive.css");			/* Responsive */
@import url("fontello/css/icon_set_1.css");	/* Icon pack */
@import url("fontello/css/fontello.css");		/* Icon pack */
@import url("magnific-popup.css");			/* Lightbox & dialog script */

Change the logo
To change the logo, simply use your PNG24 file a or start with the psd provided. The items by defualt comes with 2 logo versions: one normal and the other one a sticky version. Below how is coded. We suggest to use logo with max height 35/40px.

<div id="logo">
<a href="index.html">
<img src="img/logo.png" width="160" height="34" alt="City tours" data-retina="true" class="logo_normal">
</a>
<a href="index.html">
<img src="img/logo_sticky.png" width="160" height="34" alt="City tours" data-retina="true" class="logo_stick
</a>
</div>

Change the header type
The item comes with 3 header types: transparent, plain fixed, transparent and colored on scroll. 

ACTIVATE THE PLAIN FIXED HEADER

1) add the id plain to the header like the example below:
<header id="plain"> ....
2) change logo.png to logo_sticky.png

ACTIVATE THE TRANSPARENT AND COLORED ON SCROLL HEADER

1) dd the id colored to the header like the example below:
<header id="colored"> ....
2) change logo_sticky.png to logo_sticky_colored.png

Control the opacity of the header images adding an opacity to the image using the psd provided in the psd folder.

Change the primary color
The theme comes with 3 more predefined colors. Open base.css and follow the comments

/*How to change colors
1) uncomment one of the color variation below

2) rename the logo color variation img inside the img folder to match the default logo file name (logo.png/logo_sticky.png), 
this avoid to change the logo file name in every page.
/* @import url("color-aqua.css");					 	 Color variation aqua */
/* @import url("color-orange.css");					 Color variation Orange */
/*@import url("color-green.css");					     Color variation Green *

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 single_tour.html page. Open js/map.js.

'Historic': [
			{
				name: 'Arc de Triomphe',
				location_latitude: 48.873792, 
				location_longitude: 2.295028,
				map_image_url: 'img/thumb_map_1.jpg',
				name_point: 'Arc de Triomphe',
				description_point: 'Lorem Ipsum has been the industrys standard.',
				url_point: 'single_tour.html'
			},

Historic= category tour
location_latitude= the latitude of Arc de Triomphe
location_longitude= the longitude of Arc de Triomphe
name_point= the title in info box,
map_image_url: the thumbnail inside the infobox
description_point= description
url_point= the link in the button

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

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/paris" (folder/name_files)=
paris.mp4
paris.ogv

2) To change the fallback background image open style.css an find this class

.header-video {
  position: relative;
  overflow: hidden;
  background: #4d536d url(../img/slide_hero.jpg) no-repeat center center;
  background-size: cover;
}

3) Optionally you can set a video play button for youtube/vimeo that works only in tablet and mobile by
changing the link in the html
<a  href="https://www.youtube.com/watch?v=Zz5cu72Gv5Y" class="video animated fadeInUp button_intro outline">
Play video</a>. NOTE THIS BUTTON IS VISIBLE ONLY ON TABLETS AND MOBILES.
Change wheater location
Go to www.weather.com/, in the top bar insert you city. Then from the new page, copy from the link of the page the code (ex. UKXX0085 for LondonUK). At the bottom of the page apply this code to the code lines below. 
$('#weather').weatherfeed(['SPXX0047'], {
		forecast: true
	});

Wheater location common issue
Some towns are not supported by the scripts; it's necessary to use antoher method: 1) Go to http://woeid.rosselliot.co.nz/ and type your location or one near as much is possible. Copy the id that the result give. If you need to translate with you language please edit the file js/jquery.zweatherfeed.js. 

Replace these line of code (with your id):

$('#weather').weatherfeed(['SPXX0047'], {
		forecast: true
	});

with

$('#weather').weatherfeed(['your id'], {
		forecast: true,
		woeid: true
	});

THE GRID
Please refer to this documentation Boostrap


C) PHP files: Contact form, Check availability form, 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
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:A consideration is for the single tour page with working booking that have a more simple php script inside. Read the comments in the code to edit the sscript correctly. Note that every html input you will use must have a unique id and name. Below an exctract:

$to = "mike@ansonika.com";	/*YOUR EMAIL HERE*/
$subject = "Request From CityTours";
$headers = "From: CityTours <noreply@yourdomain.com>";
$message = "YOUR BOOKING for Louvre Museum Tour\n";
$message .= "\nName: " . $_POST['name_booking'];
$message .= "\nLast name: " . $_POST['last_name_booking'];
$message .= "\nEmail: " . $_POST['email_booking'];
$message .= "\nTelephone number: " . $_POST['phone_booking'];
$message .= "\nDate booking: " . $_POST['date_booking'];
$message .= "\nTime booking: " . $_POST['time_booking'];
$message .= "\nAdults: " . $_POST['adults'];
$message .= "\nChildren: " . $_POST['children'];
$message .= "\nTour guide: " . $_POST['option_1'];
$message .= "\nPick up service: " . $_POST['option_2'];
$message .= "\nInsurance: " . $_POST['option_3'];
$message .= "\nWelcome bottle: " . $_POST['option_4'];
$message .= "\nCoffe break: " . $_POST['option_5'];
$message .= "\nDinner: " . $_POST['option_6'];
$message .= "\nBike rent: " . $_POST['option_6'];

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.

common_scripts.js content:

Below a full list of js used.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

Images are not included. You can buy them on Photodune.

D) Updates - top

Vesion.1.7

HOW TO UPDATE FROM PREVIOUS VERSIONS
1) form index.html copy the new html code
<section class="promo_full">
    <div class="promo_full_wp magnific">
        <div>
            <h3>BELONG ANYWHERE</h3>
            <p>
                 .....
            </p>
            <a href="https://www.youtube.com/watch?v=Zz5cu72Gv5Y" class="video">
			<i class="icon-play-circled2-1"></i></a>
        </div>
    </div>
    </section><!-- End section -->

2) Open css/style.css and copy the new css on the bottom of the page.
3) Open css/responsive.css and copy (keeping the right order):

@media (max-width: 1024px){
/* Promo_full (v.1.7)*/
.promo_full {
	background-attachment:scroll;
}
}

and on bottom for @media (max-width: 480x)

/* Promo_full (v.1.7)*/
.promo_full_wp div h3{
	font-size:36px;
}
.promo_full_wp div a i{
	font-size:60px;
}

4) copy the new bg image from img folder

Vesion.1.4

HOW TO UPDATE FROM PREVIOUS VERSIONS
1) In css/style.css look copy/paste all the new styles under the section "4.UPDATES"
2) In the img folder copy and paste the folder "icon_search" and payments.png/payments_2x.png, badge_save.png,
guide_1.jpg, guide_2.jpg. 	
3) Update css/responsive.css and copy and paste css/timeline.css	
4) For the index_7 copy and paste js/jquery.ddslick.js.	
5) For the footer with newsletter subscription copy/paste the new files in assets folder and update the 	
js file.

IE9 MENU FIX:open css/menu.css, copy and paste the lines below + the img in the img folder	
		
/* IE9 fix that affect the pages with parallax header (ex.single_hotel.html); Issue: submenu 
disappear when move the cursor to the submenu (only if you did not scroll the page) */
.ie9 a.show-submenu, .ie9 a.show-submenu-mega{ background:url(../img/fix_ie_9_menu.png);}

Vesion.1.3

For users that use the "header plain" version of the theme 
http://www.ansonika.com/citytours/header_plain.html, there is a small issue to fix for the 
internal pages: when you scroll the page (in particular for the pages that use the parallax header) 
there is an issue regarding the position of the grey bar with the breadcrumbs.

HOW TO FIX
1) open css/style.css and change these classes

header#plain{position:static;background-color:#fff;}
header#plain{position:relative;background-color:#fff;padding-bottom:0;}

into

header#plain{background-color:#fff;}
header#plain{background-color:#fff;padding-bottom:0;}

2) then in the image container below the header, add this class (remember to copy it from style.css)
example: <section id="hero" class="subheader_plain"> or <section class="parallax-window subheader_plain"....

Vesion.1.2

New pages, fixes and improvements.

How to update from previous version.

1) Add the new pages (Hotels,Transfers, Wishlist and error):
1.a) Open css/style.css anc copy all the styles under the comment section
- 2.9 Transfer
- 3.0 Hotel
- 3.1 Whishlist
For the error page copy this style from style.css
/* New v1.2*/
.intro_title.error  h1{
	font-size: 130px;
}
1.b) Update css/responsive.css

2) Update js/functions.js. I've added some improvements regarding the Magnific popup gallery and collapse
filters column.

3) Add the Carousel for the single hotel page:
3.1) Copy in css the following files: owl.carousel.css, owl.theme.css
3.2) Copy in js folder the following files:owl.carousel.js, owl.carousel.min.js
3.3) Copy the entire folder carousel inside the img folder

4) Add the new icon set:
4.1) Copy the entire folder fontello folder inside css folder.
4.2) Open base.css and add @import url("fontello/css/icon_set_2.css");/* Icon pack */

5) Add the google map pins:
4.2) Copy the entire folder pins folder inside img folder.  
Vesion.1.1

1) Expose overlay mask
Open js/functions.js and add these lines of code under the expose function
$('#overlay').click(function(e){
	"use strict";
    $('#overlay').fadeOut(300, function(){
        $('.expose').css('z-index','1');
    });
});

2) Top dropdown login fix issue
Open css/style.css and update this id
#top_line{
	color:#fff;
	height:28px;
	font-size:12px;
	border-bottom:1px solid rgba(255,255,255,0.2);
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	font-size:11px;
	visibility:visible;
	opacity:1;
	margin-bottom:5px;
	position:relative;
	z-index:999999;
}

3) Optimize main title over top main image in mobile
Open css/responsive.css and add these classes under the @media (max-width: 767px)

#hero {
  height: 300px;
	font-size:12px;
}
.intro_title h1 {
  font-size: 26px;
	margin-bottom:5px;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
}

4) Magnific popup gallery

4.1) Update magnific-pop.css
4.2) Update js/functions.js or paste these lines of code

// Image popups
$('.magnific-gallery').magnificPopup({
  delegate: 'a',
   tLoading: '', 
  gallery:{enabled:true},
  type: 'image',
  removalDelay: 500, //delay removal by X to allow out-animation
});
// Forms popups
$('.popup-with-form').magnificPopup({
		type: 'inline',
		preloader: false,
		focus: '#name',

		// When elemened is focused, some mobile browsers in some cases zoom in
		// It looks not nice, so we disable it:
		callbacks: {
			beforeOpen: function() {
				if($(window).width() < 700) {
					this.st.focus = false;
				} else {
					this.st.focus = '#name';
				}
			}
		}
	});

FOR MORE EXAMPLE PLEASE REFER HERE http://dimsemenov.com/plugins/magnific-popup/

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, via Support site or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

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

Ansonika

Go To Table of Contents