Documentation by “Ansonika” v4.0

“CITYTOURS - HTML Site template”

Created: 09 March 2015
Last update: 14 August 2018
By: Ansonika

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 comment on item page. 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, 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
- 1.4 Menu

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
- 2.9 Transfer
- 3.0 Hotel
- 3.1 Whishlist
- 3.2 Map listing

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

4. UPDATES
- 4.1 Home 7
- 4.2 Faq
- 4.3 Pricing tables
- 4.4 Common

5. UPDATES
- 5.1 Ribbons css
- 5.2 Footers versions
- 5.3 Header versions
- 5.4 Gallery overlay
- 5.5 Map + infobox

6. UPDATES
- 6.1 Footer Fixed
- 6.2 Notify
- 6.3 Search modal
- 6.4 Header 7

7. UPDATES
- 7.1 Date dropper/Time dropper
- 7.2 Tabs home
- 7.3 Morphext
- 7.4 Cookie-bar
- 7.5 Sing In Modal
- 7.6 Styles Switcher

8. RESPONSIVE

IMPORTANT:
We suggest to add you custom css styles in css/custom.css in order to makes updates easy!

CSS STRUCTURE
<!-- COMMON CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/vendors.css" rel="stylesheet">
	
<!-- ALTERNATIVE COLORS CSS -->
<link href="#" id="colors" rel="stylesheet">
	
<!-- CUSTOM CSS -->
<link href="css/custom.css" rel="stylesheet">

VENDORS.CSS CONTENT
- 1. Icons
- 1. Animate.css
- 3. Magnific Popup
- 4. Popup
- 5. jQuery Swicth
- 6. ionRange slider
- 7. iCheck plugin Square skin, grey
- 8. Owl Carousel
- 9. Slider pro
- 10.Bootstrap Date time picker
- 11.Date dropper
- 12.Time dropper

NOTE: some pages have additional/specific css styles...like Blog page.

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

You can control the opacity of the header/parallax images via css, in css/style.css change the opacity here:	
	
.parallax-content-1 {
	display: table;
	width: 100%;
	height: 470px;
	background: rgba(0, 0, 0, 0.6);
}

and for some home versions
.intro_title {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}

Change the primary color
The theme comes with 4 predefined colors. 



Example to switch the default color scheme to Green	
1) Add this line above or below custom.css in the head of the page
<link href="css/colors/color-green.css" rel="stylesheet">

2) Quick solution: copy for example the styles in css/colors/color-green.css inside css/custom.css 
(this method permit to change the default color scheme without edit every page (point 1)

REVOLUTION SLIDER NEW VERSION 4.6.4 

The item comes with premade Revolution sliders templates 4.6.4 (index_20, index_2, index_10, index_11).  
Use this version if you don't wont  struggle into more complex settings and options available in
the Version 5.4. Documentation can be found here

REVOLUTION SLIDER NEW VERSION 5.4.X 

The item comes with premade Revolution sliders templates V5.4.x (index_1, and from index_15 to index_19). 
These templates are generated via Visualeditor included with the pack, but edit them is possible 
only directly on the html code. Please use a reference the Revolution Slider 5.4x Documentation included
in the zip file you have to download.

Included with the Citytours item is Revolution Slider Visual Editor, a great application that bring
your to create stunning sliders or edit the templates included in the library.

Download Revolution files links
1) Revolution Slider 5.4x
2) Revolution Slider Visual Editor
3) Revolution Slider Addon  

HOW TO USE THE VISUAL EDITOR
1) Install Revolution Slider Visual Editor
2) Don't worry if once installed it requires license code, just Manually install visual-editor-extension.zip 


3) Then follow the documentation included in the Visual editor zip pack. You can also upload premade examples
locate in pack. Then export your slider (HTML method or PHP method).

Enjoy it!

Notify info window (for example in index.html)

Just take as reference in js/notify_func.js+ comments in the code to edit it. 
For more info view the full documentation here.

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.',
				get_directions_start_address: '',
				phone: '+3934245255',
				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
get_directions_start_address= get directions start address (leave empty or specify the start address)
phone: phone number
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.

CHANGE THE DEFAULT COLOR STYLE OF THE MAP
You can add you onw style for example in js/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/.
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>

Home with video header (fallback with a background image in tablets and mobile that does not support video as bg)

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.

4) Change the opacity of the content mask over the video on desktop/tablet view
.intro_title {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}
Change wheater location
You simply provide your US zip code, WOEID, lat/long, or any location in the script at the bottom of the page: 
  $.simpleWeather({
    location: 'Marseille, France',
    woeid: '',
    unit: 'c',
   	
		......

  });
});

NOTE: for more details please refer to the full documentation (http://simpleweatherjs.com/). 
Some towns are not supported by the script: 
1) try using antoher method: 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. Here an example http://codepen.io/fleeting/pen/skbqf  
2) Look for a city/town near as much as possible.

IMPORTANT: the weather icon font is not visible on your local computer. To view it upload your site to your host/server.
How to setup the Grid gallery
Take as reference the grid_gallery_1.html/ grid_gallery_2.html pages and if needed, here the documentation.

How the fixed sidebar works
Take as reference the single_tour_fixed_sidebar.html page and if needed, here the documentation.

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 = "test@domain.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 (for scripts options check the relative vendor site) .

Images are not included.

D) Updates - top

V.4.0 (14 August 2018)

Vesion.4.0

HOW TO UPDATE FROM PREVIOUS VERSION (before update we suggest to make a backup of your old files)
This tool can be very useful to  compare files https://www.diffchecker.com/

1) Css files structure has been changed in order to improve site performance, updates and color switcher:

BEFORE

<!-- Google web fonts -->	
<link href="https://fonts.googleapis.com/css?family=Gochi+Hand|Lato:300,400|Montserrat:400,400i,700,700i" rel="stylesheet">
<!-- BASE CSS -->
<link href="css/base.css" rel="stylesheet">

AFTER
<!-- COMMON CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/vendors.css" rel="stylesheet">
	
<!-- CUSTOM CSS -->
<link href="css/custom.css" rel="stylesheet">
    
2) Updated Ionrange input slider plugin: File affected js/common_scripts.js, js/common_scripts_min.js, css/vendors.css

3) Updated Owl Carousel plugin: File affected js/common_scripts.js, js/common_scripts_min.js, js/css/vendors.css + func on footer for pages	
that use the carousel

4) File affected css/vendors.css

5) Add show password: File affected js/common_scripts.js, js/common_scripts_min.js, js/functions.js, css/style.css and of course html code inside	
the pages.

6) Updated Bootstrap Library
a) Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/bootstrap.js, js/bootstrap.min.js, js/common_scripts.js,	
 js/common_scripts_min.js, js/functions.js.
b) Update some classes in the html. Unfortunately there's no easy way to update the theme to BS4 other 	
than doing it manually. The differences, are explained in this link.	Mainly are in the grid classes, 	
responsive images, visibility classes,  Accordions.  
We suggest to use this tool https://www.diffchecker.com/ and compare the html files with the new ones.
c) Update css/style.css or compare using this tool https://www.diffchecker.com/

7) Changed map style: File affected map_contact.js, map_full_page.js, map_home.js, map_hotels.js, map_listing_hotels.js, map_listing_restaurants.js,
map_listing_tours.js, map_restaurants.js, map_single_restaurant.js, map_transfer.js, map.js.

8) Add Opacity control for parallax header sections: see the section above "Control the opacity of the header images" to see which 	
css has been changed.

9) Add Sign in Modal: File affected css/style.css, vendors.css, js/common_scripts.js, js/common_scripts_min.js, js/functions.js and of course the		
html code on page.

10) Add Magnific Popup animation: File affected css/style.css, vendors.css, js/common_scripts.js, js/common_scripts_min.js, js/functions.js 	
and of course the	html code on page.

11) Improved scroll to top button: File affected css/style.css,  js/functions.js

12) Some css minor improvements: File affected css/style.css compare using this tool https://www.diffchecker.com/

V.3.5 (20 November 2017)

V.3.4 (13 October 2017)

V.3.3 (29 May 2017)

V.3.2 (8 May 2017)

V.3.1 (28 Feb 2017)

V.3.0 (4 November 2016)

V.2.3 (26 July 2016)

V.2.2 (09 June 2016)

V.2.1 (24 May 2016)

Updates

V.2.0 (26 March 2016)

V.1.9 (16 March 2016)

V.1.8 (12 December 2015)

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)

V.1.3 (21 April 2015)

V.1.2 (9 April 2015)

V.1.1 (26 March 2015)

Vesion.3.5

HOW TO UPDATE FROM PREVIOUS VERSION (before update we suggest to make a backup of your old files and
works on a test version)

1)Fixed a menu mobile undesired Shadow: update css/menu.css file

2) Faq smooth scroll version 2 fix incorrect position: update the following script on footer page
<script>
	$('#faq_box a[href^="#"]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
			|| location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			   if (target.length) {
				 $('html,body').animate({
					 scrollTop: target.offset().top -115
				}, 800);
				return false;
			}
		}
	});
	</script>

3) Footer Reveal Script disabled on Mobiles + Fixed and issue related the filters column collapse on mobiles:
please update js/fucntions.js

4) Updated Parallax plugin: please update js/common_scripts.js and common_scripts.min.js

5) Fixed an issue related preloader on last Chrome Version Mac OS:
in css/style.css udpate the following style under the section "Preloading"
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	bottom: 0;
	background-color: #fff;
	z-index: 999999999;
}

6)Fixed an issue related the modal search form for Iphone IOS 11:
update js/functions.js plus check for this class in style.css
body.has-fullscreen-modal {
 	position: fixed;
	width: 100%;
}

7) New date and time dropper:
update js/functions.js, js/common_scripts.js and common_scripts.min.js
update css/style.css or check for the new section 6.5
new css files: datedropper.css, timedropper.css (plus min version), "src" folder in css folder

Vesion.3.2

HOW TO UPDATE FROM PREVIOUS VERSION (before update we suggest to make a backup of your old files and
works on a test version)

1) Update the following libraries/files
- Css:

- Js: 


2) New files:
- Css:

- Js:

- Other:


3) Change the Search box in the top menu

Change these lines


into


Then on footer page these are new lines of code


NOTE: Remeber to update functions.js as previously mentioned.

4) Add Footer Reveal Effect
Update js/common_script.js, functions.js, style.css and take as reference 
footer_fixed_reveal_page_structure.html.

The structure changes a little, mainly is:

<header>
....
</header>
<section>
...
</section>
<main>
...
</main>
<footer class="revealed">
</footer>

Vesion.3.0

1) Copy the entire folder twitter
2) Copy all the new css styles in style.css (under the section UPDATES V3)
3) Copy all the new css styles in responsive.css (under the section UPDATES V3)
4) Update the following files:
- css/menu.css
- js/map_full_page.js
- js/map_home.js
- js/map_hotels.js
- js/map_listing_hotels.js
- js/map_listing_restaurants.js
- js/map_listing_tours.js
- js/map_restaurants.js
- js/map_single_restaurant.js
- js/map_transfer.js
- js/functions.js (just only swap text on button added)
- css/color-orange.css
- css/color-green.css
- css/color-aqua.css
5) Copy css/shop.css
6) Copy the new images from img folder:
- folder products
- footergallery1.jpg, footergallery2.jpg, etc
- post-thumb-1.jpg, post-thumb-2.jpg, etc
- pattern_3.png
- pattern_4.png
- pattern_5.png
- twitter_icon.svg
- icon-select.png
- credit-card-icon.png

Vesion.2.0

How to update from previous version:

1) Copy/paste the new js files: js/jquery.simpleWeather.js + js/jquery.simpleWeather.min.js
2) Replace the css/weather.css with the updated one
3) At the bottom of the page replace the old code with the new one:

<!-- Specific scripts -->   
<script src="js/jquery.simpleWeather.min.js"></script> 
<script>
// v3.1.0
//Docs at http://simpleweatherjs.com
$(document).ready(function() {
  $.simpleWeather({
    location: Paris, France',
    woeid: '',
    unit: 'c',
    success: function(weather) {
 html = '<h4><i class="weathericon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h4>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';
	  
	   for(var i=0;i<weather.forecast.length;i++) {
   html += '<span class="details_forecast">'+weather.forecast[i].day+': '+weather.forecast[i].high+'</span>';
      }
  
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});
</script>

IMPORTANT: the weather icon font is not visible on your local computer. To view it upload your site to your host/server.

Vesion.1.9

1) Udpate the fixed sidebar
1.1 Copy and paste into your js folder the new script theia-sticky-sidebar.js
1.2 At the bottom of the html pages(detail_page, cart, cart_2, faq) remove the old code:

<script src="js/jquery.pin.min.js"></script>
<script>
$("#cart_box").pin({padding: {top: 80, bottom: 25},minWidth: 1100, containerSelector: "#container_pin"})
</script>

and add the new one:

<script src="js/theia-sticky-sidebar.js"></script>
<script type="text/javascript">
    jQuery('#sidebar').theiaStickySidebar({
      additionalMarginTop: 80
    });
</script>

1.3 Wrapp the pinned element with <div class="theiaStickySidebar">...</div> + add to the parent top #sidebar.
Example:
<aside class="col-md-4" id="sidebar">
 <div class="theiaStickySidebar">
	.....
</div>
</div>

2) Update the Bootsrap Library. Update these files: 
js/common_scripts_min.js
js/bootsrap_min.js
js/bootsrap.js
css/bootsrap.css
css/bootsrap.min.css

3)Layer slider and tabs home page please refer to the relative pages.

Vesion.1.8

IMPORTANT! Before to start make a copy of your original site files.

CSS
1) Copy this css file: finaltilesgallery.css
2) In css/style.css + responsive.css search for the comment v.1.8
3) For the new icon set copy from the css folder , the folder icon_restaurant
4) Copy and paste base.css
5) Copy and paste ion.rangeSlider.skinFlat.css / ion.rangeSlider.css

JS
1) Update or copy the folling files:
- map_single_restaurant.js
- map_home.js
- map_hotels.js
- map_restaurants.js
- map_full_page.js
- map_transfer.js
- map.js
- jquery.finaltilesgallery.js
- lightbox2.js
- functions.js
- common_scripts_min.js
- ion.rangeSlider.min.js
- ion.rangeSlider.js
- jquery.sliderPro.js
- jquery.sliderPro.min.js

IMAGES
1) In img folder copy these folders: icons_search, slider_single_restaurant, pins.
2) This single image sprite-skin-flat.png

PHP FORMS
There is a new php form relative to the reviews for the restaruant section. Update validate.js and copy
review_restaurant.php file

PAGES
Copy and paste all new html pages.

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 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