Documentation by “Ansonika” v1.7

“COUNTRYHOLIDAYS - HTML Site template”

Created: 15 JUNE 2015
Last update: 28 Feb 2017
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

V.1.7 (28 Feb 2017)

V.1.6 (22 Dec 2016)

V.1.5 (26 July 2016)

Version 1.4 26 MARCH 2015

The Jquery Weather plugin stop to works: http://www.zazar.net/developers/jquery/zweatherfeed/ . We've Updated the item with another plugin. 
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: 'Marseille, 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.

Version 1.3 10 NOVEMBER 2015

- Fixed Child field in check avail form(index_3.html - room_booking.html) 
How to change from previuos version: 
  
open assets/validate.js and add children: $('#children').val(), like the example below:
$.post(action, {
          check_in: $('#check_in').val(),
          check_out: $('#check_out').val(),
          adults: $('#adults').val(),
          children: $('#children').val(),
          room_type: $('#room_type').val(),
          name_booking: $('#name_booking').val(),
          email_booking: $('#email_booking').val()
          },

Version 1.2 25 OCTOBER 2015

- Add language support for weather forecast script in about.html 
How to change from previuos version: 

1) Update this js file jquery.zweatherfeed.js. 

2) At the bottom of the html page replace these lines
<script>
$('#weather').weatherfeed(['FRXX0059'], {
		forecast: true
	});
</script>

with
<script>
$('#weather').weatherfeed(['FRXX0059'], {
		language : 'en',
		forecast: true
	});
</script>

NOTE: if you need to translate with your own language please refer to this file jquery.zweatherfeed.js. 
English and French translation are already done.

Version 1.1 16 JULY 2015

- Fixed an issue related to tablets that affect the input name and email (on tablet they are not clickable) in index_3.html and room_booking.html 
How to fix it
Add a col-sm-12 to the button at the end of the form

WRONG
<div class="col-md-12">
<div class="form-group">
<input type="submit" value="Book now" class="btn_full" id="submit-booking">
</div>
</div>

CORRECT
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input type="submit" value="Book now" class="btn_full" id="submit-booking">
</div>
</div>

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!. It comes with a fullwidth and a boxed version.

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.1 Rooms list
- 2.2 Room details
- 2.3 About us
- 2.4 Activities
- 2.5 Contacts us
- 2.6 Fullscreen gallery
- 2.7 Error page

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

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address to center the map. 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-marker2.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 requires 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 that if you apply the api key, the map does not load on your local computer, you should 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/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.
Add more slides to the fullscreen gallery: at the bottom of the page that you wont to add more slides you have to edit these lines 
jQuery(function($){
$.supersized({
		slides :  	[      // Slideshow Images
		{image : 'images/slider/1.jpg'},
		{image : 'images/slider/3.jpg'},
		{image : 'images/slider/4.jpg'},
		{image : 'images/slider/5.jpg'},
		{image : 'images/slider/6.jpg'} // Last has no comma
		]				
});
});

With autoplay: read more here http://support.ansonika.com/knowledgebase/113/
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 scripts1: 
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.

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

THE GRID
Please refer to this documentation Boostrap


C) PHP files: Contact form, Check availability form, Newsletter, Leave a review, 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

If your host requires SMTP authentication use the php scritps versions located in the asset folder (of course change the file name in the html pages or rename them); follow the comments on code to apply your smtp settings. Autoreply is not supported.

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.

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