Documentation

BookBeach - HTML Site template

Thank you so much for purchasing our item from themeforest.

Version: 3.7
Author: Mike Ansonika

Created: 18 May, 2018
Last Update: 15 September 2025

If you have any questions that are beyond the scope of this help file, Please contact us via Support Tab.

Installation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP (suggested FTP client Filezilla) or localhost in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- html - Contains all of the assets referenced
  - admin_section – Html files admin section
  - assets – Files web forms
  - coming_soon – Files Cooming Soon Page
  - css - Stylesheet files
  - img - Images files
  - js - Javacript files
  - layerslider – LayerSlider assets files
  - revolution-slider – Revolution Slider Files.
  - sass - Sass files
  - video – Video Files.
- html/index.html - Homepage

CSS Structure

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
  - 2.2 About
  - 2.3 Listing
  - 2.4 Detail page
  - 2.5 Login/register
  - 2.6 Map styles
  - 2.7 Contacts
  - 2.8 404 page
  - 2.9 Cart section
  - 2.10 Media Gallery
  - 2.11 Faq
- 2.12 Adventure
- 2.13 Home AirBnb
- 2.14 Half screen map
- 2.15 Autocomplete Address Search
- 2.16 OpenStreet Map
- 2.17 Parallax Video Background
- 2.18 Other Headers

3. COMMON

  - 3.1 Misc
  - 3.2 Accordion
  - 3.3 List
  - 3.4 Spacing
  - 3.5 Block reveal
  - 3.6 Cookie bar
  - 3.7 Sing In Modal
  - 3.8 Input Switcher
  - 3.9 Datepicker
  - 3.10 Styles Switcher

Note: Some pages required additional specific css in the header, for example in the blog page.

<!-- SPECIFIC CSS -->
<link href="css/blog.css" rel="stylesheet">

Javascript Structure

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

js/common_scripts.js content:

Boostrap.js
Wow.js
Owl.carousel.js
MagnificPopup.js
Theia-sticky-sidebar.js
ResizeSensor.js
Sticky-kit.js
jQuery Selectbox
jQuery Mmenu
jQuery Show hide passoword
jQuery Nice Select
Ion.RangeSlider
Check Switchery.js

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - html/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder.

Color Schemes

You can change your Website's Color Scheme in an instant. The theme comes with 12 predefined color schemes.

Simply add Color CSS file link it in the Document <head>.
For example for css/color-green.css add this line on every head page after css/custom.css:

Add this line on every head page after custom.css 
<link href="css/color-green.css" rel="stylesheet">

or simply copy the color styles (from example css/color-green.css) in css/custom.css so you don't need to edit every page;

or play with SASS files variables.

Common settings/edits

If you need a little help editing the template, check out Tuts+ tutorial How to Customize an HTML Template.

Change the logo

To change the logo, simply use your PNG24 file (suggested logo height is 36/40px) or better SVG format. Below how is coded:

<div id="logo">
  <img src="img/logo.svg" width="170" height="36" alt="" class="logo_normal">
 <img src="img/logo_sticky.svg" width="170" height="36" alt="" class="logo_sticky">
</div>

Change the address of Google map in contact page

Open mapmarker_func.js and change with your latitude and longitude + your full address (below and example). You can change also your map marker (that has to be png24).

//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 Issues on Google Map
(if the Google map works localy in demo mode but does not works once the site will be online)

Google requires an api key for the Google map. They require a credit card for a new api..don’t worry there cost is very low and the quantity of views for free are very high: https://cloud.google.com/maps-platform/pricing/sheet/

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 additional 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
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Noteif you apply an api key, the map locally does not load. You must upload your site to your host.

Address Autocomplete with Google API

IMPORTANT! It requires an API key (see the section Google Map API); 
locally the autocomplete does not works, you should apply the api key on the footer page script 
then upload the site to see it working. 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"></script>

Home with video header (fallback with a background image in tablets and mobile)
(these devices does not support video autoplay as background due to bandwidth limit consume policy)

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)=
intro.mp4
intro.ogv

You can change also the opacity in style.css

video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.6;
}

2) To change the fallback background image for mobiles and tablets open css/style.css and find this class:

@media (max-width: 1024px):
#hero_video{
background: #ccc url(../img/home_section_1.jpg);
background-size:cover;
background-position: center bottom;}

Control the opacity of the header images

You can control the opacity of the header images via css, in css/style.css change the opacity here:

.hero_in.general .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero_in.tours .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}
.hero_in.hotels .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}
.hero_in.restaurants .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}

or for the home page
.hero_single.version_2 .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.45);
}

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

Let's take as example the map used in single_tour.html page. Open js/map_tours.js.

'Marker': [
  {
  type_point: 'Historic',
  name: 'Open Bus',
  location_latitude: 48.865633, 
  location_longitude: 2.321236,
  map_image_url: 'img/thumb_map_single_tour.jpg',
  rate: 'Superb | 7.5',
  name_point: 'Open Bus',
  get_directions_start_address: '',
  phone: '+3934245255',
  url_point: 'tour-detail.html'
  },

type_point = category tour
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= rate
name_point= the title in info box
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.

TipTOOL TO FIND/CREATE COORDINATES: https://www.latlong.net/convert-address-to-lat-long.html

Leaflet OpenStreet Map + MapBox

The item comes with another Interactive Map Solution. It a bit different from the Google Map Api. Leaflet + OpenStreetMap is totally free; the implementation with Mapox requires registration and an API access token key (free untill 750,000 user views/requests; more info at https://www.mapbox.com/pricing/)

Below we examine how it works, let's take as example tours-half-screen-map-leaflet.html file.

1) js/leaflet_map/leaflet_tours_half_screen_func.js

BELOW HOW TO CENTER THE MAP AND MAIN MAP SETTINGSvar map = L.map('map', {
        center: [48.865633, 2.321236],
        minZoom: 2,
        zoom: 13
    });

MAPBOX ACCESS TOKEN (https://www.mapbox.com/ and create your access token)L.tileLayer( 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
     attribution: '',
     tileSize: 512,
     maxZoom: 18,
     zoomOffset: -1,
     id: 'mapbox/streets-v11',, 
     accessToken: 'Your Mapbox Access Token',
     subdomains: ['a','b','c']
    }).addTo( map );

2) js/leaflet_map/leaflet_tours_markers.js

In this file there are all the markers/points data:"id":1, //ID to use in the html page to view the infowindow of the point from the list
"type_point":"Historic", //Type Point
"location_latitude":48.865633, //Lat
"location_longitude":2.321236, //Long
"map_image_url":"img/thumb_map_single_tour.jpg", //Thumb 
"rate":"Superb | 7.5", //Rate
"name_point":"Open Bus", //Name Point
"get_directions_start_address":"", //directions start address (leave empty or specify the start address)
"phone":"+3934245255", //Phone
"url_point":"tour-detail.html" //Specific poin url page

3) How to use Leaflet + OpenStreetMap only

Just simply replace this line on footer
  <script src="js/leaflet_map/leaflet_tours_half_screen_func.js"></script>
  INTO<script src="js/leaflet_map/leaflet_no_mapbox_tours_half_screen_func.js"></script>

Datepicker doc and generator

Please refer to this documentation

Menu Options

Takes as reference menu-options.html to view the different submenu positions and third level submenu.

PHPMAILER PHP forms

Note: We strongly reccomend before to edit the item to test the version that works better on your host based on your needs.

PHPmailer text/html (contact.php, newsletter.php, contact_detail.php): This version send an email with basic html support on text.

PHPmailer with html template (contact_template_email.php, newsletter_template_email.php, contact_detail_template_email.php): This version is without SMTP and send the message inside an HTML template, (template-email.html) for the main message and for the confirmation page sent to the use who fill the form (confirm.html).

PHPmailer with html template SMTP (contact_template_email_smtp.php, newsletter_template_email_smtp.php, contact_detail_template_email_smtp.php): This version is like above but with SMTP Authentication.

Common settings (edit recipients) for the 3 forms: reservation, contacts and newsletter.

$mail->setFrom('info@BookBeach.com', 'Message from BookBeach); // Email Address and Name FROM
$mail->addAddress('jhon@BookBeach.com', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('noreply@BookBeach.com', Message from BookBeach); // Email Address and Name NOREPLY
$mail->Subject = Message from BookBeach;  // Email Subject

SMTP settings (contact your hosting provider, usually need only Host, Username and Password)

$mail->Host       = 'hostname'; // Set the SMTP server to send through
$mail->Username   = 'username'; // SMTP username
$mail->Password   = 'password'; // SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port       = 587; // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above

NOTE ABOUT THE HTML EMAIL TEMPLATE
The email template has been tested on various email clients (desktop and mobiles). But, maybe you know, it's quite impossible to provide an email template that looks equal on all email clients due they have different supports. The email template degrade nicely to maxime the compatibility. Email Template design it's beyond the scope of this item and support, you can implement with your own or drive to a most simple method to send the email (without email template).

Edit the email template with your images
Put your logo in the images folder. To reduce spam issue and email weight, all the images must be upload on your online site/server and the html looks like the example below:
<img src="http://www.yourdomain.com/phpmailer/images/logo.png" border="0" width="54" height="60" alt="" />

PHP files: Contact form old/previous method

All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented.

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


// Below the subject of the email
$e_subject = 'You\'ve been contacted by ' . $name_contact . '.';

// You can change this if you feel that you need to.
$e_body = "You have been contacted by $name_contact $lastname_contact with additional message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$message_contact\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $lastname_contact via email, $email_contact or via phone $phone_contact";

$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: $email_contact" . PHP_EOL;
$headers .= "Reply-To: $email_contact" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

$user = "$email_contact";
$usersubject = "Thank You";
$userheaders = "From: info@BookBeach.com\n";
$usermessage = "Thank you for contact BookBeach. We will reply shortly!";
mail($user,$usersubject,$usermessage,$userheaders);

if(mail($address, $e_subject, $msg, $headers)) {

  // Success message
  echo "";
  echo "Email Sent.
";
  echo "Thank you $name_contact,
 your message has been submitted. We will contact you shortly.";
  echo "";

} else {

  echo 'ERROR!';

}

Other working forms and common issues

Other working forms adopt the same logic and script. 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 or requires special "php headers"
4) Set the permission of the asset folder on your host to 755 your FTP client

Source & Credits

For the sources listed below, you can find more documentation on the relative sites.

Images are not included. Videos and images only for demo purpose. Below the sources sites:

Support

If this documentation doesn't answer your questions, post via Item Support Tab

We are located in GMT +1 time zone and we answer all questions within 24-48 hours working days. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template according to Envato Support Terms. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

More Templates

Checkout Our Below Premium Templates

Our Portfolio

Updates

See what's new added, changed, fixed, improved or updated in the latest versions and how to update from previous version.

For Future Updates Follow Us @themeforest / @behance / @Dribbble

Version 3.7 (15 September 2025)

Update Bootstap Library 5.3.7

How to update from previous version

1. Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js

Version 3.6 (23 May 2025)

Fixed Fixed a header glitch in Chome Mac OS

How to update from previous version

Please update css/style.css

Version 3.5 (30 January 2025)

Update Updated Coming soon page

How to update from previous version

Please update the entire folder "coming_soon".

Version 3.4 (4 November 2024)

Update Fixed a secure site https link for the function "Get directions" in Google map markers infoboxes

How to update from previous version

On the js files used for the Google Map, on footer of these files update this line from http to https > form action="https://maps.google.com/maps" method="get" target="_blank"......

Version 3.3 (14 October 2024)

Update Removed word wrap in the assets/php files (not necessary)

How to update from previous version

1. Update the php files in assets folder or delete this line > $msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

Version 3.2 (17 June 2024)

Update Bootstap Library 5.3.3

How to update from previous version

1. Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js

Version 3.1 (28 Febraury 2024)

Update Added Boostrap Icons

How to update from previous version

1. Update the following files: css/vendors.css
2. Copy and paste css/bs-icons folder
3. Update the html code on footer pages section .follow_us

Version 3.0 (10 December 2023)

Update Updated Documentation

Version 2.9 (3 October 2023)

Updated Updated Jquery Library

How to update from previous version

1. Update the following files:
- js/common_scripts.js

Version 2.8 (19 June 2023)

AddedAdded Animations on Page Scroll (How to use it)
AddedAdded New Home Page Categories Hover Effect
AddedAdded New Home Page Categories Radio Search Form

How to update from previous version

1. Update the following files:
- js/common_scripts.js
- js/main.js (new section script // Scroll animation)
- css/vendors.css + css/vendors.unminified.css
- takes a reference the changes on the HTML pages and the section above that point to some examples on how to use this feature added

2. Update the following files: - css/style.css or add the new section "2.19 Home Categories Hover effect"
- js/main.js (new section script // Categorie hover images)
- takes as reference index-20.html and copy the new images/video used

3. Update the following files: - css/style.css or add the new section "2.20 Home Search Radio categories"
- takes as reference index-22.html and copy the new images/video used

Version 2.7 (10 January 2023)

Updated Updated Jquery Library
AddedAdded PHPMAILER library most popular code for sending email with SMTP and HTML email support

How to update from previous version

1. Update the following files:
- js/common_scripts.js

2. PHPMAILER method as set as default for the newsletter subscription, contact form and contact detail in detail-working-contact-form.html; below the changes:
1) On footer pages change this line <script src="assets/validate.js"></script> into <script src="phpmailer/validate.js"></script>

2) For each form change the path to the respective php file:
Newsletter (footer pages)> phpmailer/newsletter_template_email.php
Contact form (contacts.html) > phpmailer/contact_template_email.php
Contact detail (detail-working-contact-form) > phpmailer/contact_detail_template_email.php

3) Copy the phpmailer folder and edit the main settings following the documentation section above PHPMAILER

Version 2.6 (12 October 2022)

Updated Updated Bootstrap Library
AddedAdded Kenburns Slider

How to update from previous version

1. Update the following files:
- css/bootstrap.css
- css/bootstrap.min.css
- js/common_scripts.js
- js/bootstrap.bundle.js + bootstrap.bundle.min.js
- in css/style.css update the "hr" tag css

2. Takes as reference index-19.html. Copy the folliwng files in the respective folders:
- css/vegas.css
- css/vegas.min.css
- js/vegas.js
- js/vegas.min.js

Version 2.5 (17 June 2022)

Added Responsive Time Picker

How to update from previous version

1. Update the following files:
- css/style.css: only 1 new class > .form-control:disabled, .form-control[readonly] { background-color: #fff; opacity: 1;}
- css/style.css: section 3.13 Time picker
2. Copy and paste the files js/jquery-clock-timepicker.js
3. Takes as reference restaurant-detail-2.html new code lines:

<input type="text" class="form-control time" data-precision="10" placeholder="Time">

ON FOOTER

<!-- Timepicker -->
    <script src="js/jquery-clock-timepicker.js"></script>
	    <script>
	        $(function() {
	        $('.time').clockTimePicker();
	     });
	</script>

Version 2.4 (16 March 2022)

Updated Updated Bootstrap Library
Updated Removed magic quotes from the php form files in asset folder

How to update from previous version

1. Update the following files:
- css/bootstrap.css
- css/bootstrap.min.css
- css/style.css
- js/common_scripts.js
- js/bootstrap.bundle.js + bootstrap.bundle.min.js

(Same for the rtl version....just update the same files...but with -rtl extension)

NOTE: you have to apply some changes in the html code of the page since in BS5 there are small differences. Below a short list or see here https://getbootstrap.com/docs/5.0/migration/

MODALS
data-modal > data-bs-modal
data-target > data-bs-target
data-dismiss > data-bs-dismiss
The code of te close button has been changed too.

COLLAPSE AND TOGGLES
data-toggle=.. > data-bs-toggle=...
data-parent=... > data-bs-parent=...

CLASSES
.float-left > .float-start
.float-right > .float-end
.text-left > .text-start
.text-right > .text-end
.no-gutter > .g-0

There is als a great tool that help you to discover the differences between files and code https://www.diffchecker.com/

Main CSS changes: please update css/style.css. Below a quick list of the classes changed
- .box_list figure a img
- .box_list .wrapper
- .form-group
- .cart-list (all the table styles)

Other HTML changes:
- some classes on footer page has been changed (.ml-lg-auto > ms-lg-auto; p-r-5 > pe-5)
- added in the home pages + about.html a "position-relative" class to the call_section container
- in cart-1.html removed the class "table-striped"

Version 2.3 (14 January 2022)

Updated Updated Documentation

Version 2.2 (25 October 2021)

Updated Updated Documentation

Version 2.1 (18 May 2021)

Updated Dismiss Instagram Feed (detail pages)

How to update from previous version

1. Dismiss Instagram Feed; due to the new restriction policies the Plugin stop to works and there aren't at the moment any stable alternative. We updated the detail pages with a thumb grid.
Update the following files: - js/common_scripts.js + css/style.css(new class ".pictures_grid" under the section 2.4)

Version 2.0 (31 March 2021)

Updated Admin Section - Bootsrap Library
Updated Admin Section - jQuery Library
Updated Admin Section - Dismiss retina plugin
Updated Admin Section - Dismiss Selectbox plugin css/admin.css
Updated Admin Section - Google font link in the head
Added Admin Section - Add edit booking in bookings.html
Updated Main site - Bootsrap Library
Updated Main site - jQuery Library
Updated Main site - Google font link in the head
Updated Main site - Instagram Feed
Updated Main site - Hamburgher icon mobile
Added Main site - Main Menu hover effect
Added Main site - Revolution Slider (2 Examples)
Added Main site - Parallax Video and images home pages (5 Examples)
Added Main site - Text Rotator
Fixed Main site - Coming soon issue error message

How to update from previous version

1. Admin Section - Updated BootStrap Library
Update the following files:
- admin_section/vendor/bootstrap + admin_section/js/admin.js + css/admin.css
(Rtl version still use Bootstrap 4.4.1)

2. Admin Section - Updated jQuery Library
Update the following files: admin_section/vendor/jquery

3. Admin Section - Dismiss retina plugin
Update the following files: on footer pages remove this line vendor/retina-replace.min.js

4. Admin Section - Dismiss Selectbox plugin
Update the following files:on footer pages remove this line vendor/jquery.selectbox-0.2.js

5. Admin Section - Google font link in the head
Update the following files: on head pages change the Google font link

6. Admin Section - Add edit booking in bookings.html
Update the following files: admin_section/bookings.html

7. Main site - Bootsrap Library
Update the following files:
- css/bootstrap.min.css
- css/bootstrap.css
- js/common_scripts.js
- js/bootstrap.bundle.min.js
- js/bootstrap.bundle.js

8. Main site - jQuery Library
Update the following files: js/common_scripts.js

9. Main site - Google font link in the head
Update the following files: on head pages change the Google font link

10. Main site - Instagram Feed
Update the following files: js/common_scripts.js

11. Main site - Hamburgher icon mobile
Update the following files: css/vendors.css + css/vendors.unminified.css

12. Main site - Main Menu hover effect
Update the following files: js/main.js (new section // Menu hover effect)

13. Main site - Revolution Slider: copy the entire folder revolution-slider + takes as reference the new html pages

14. Main site - Parallax Video and images home pages
Update the following files: - css/style.css (new section 2.17 Parallax Video Background + 2.18 Other Headers)
- takes as reference the new pages
- copy the new js files: js/jarallax.min.js + js/jarallax-video.min.js
- update style.css css/style.css > section /* Home video background*/

15. Main site - Text Rotator
Update the following files: - takes as reference the new page
- copy the new js files: js/typed.min.js + js/typed.js

16. Main site - Coming soon issue error message
Update the following files: - coming_soon/css/style.css
- update the html on index.html

Version 1.9 (22 October 2020)

Updated Mapbox Map Styles needs to be updated (Old Style has been removed)

How to update from previous version

Update the following files:

js/leaflet_map/leaflet_tours_func.js
js/leaflet_map/leaflet_tours_half_screen_func.js
js/leaflet_map/leaflet_single_tour_func.js

Version 1.8 (10 September 2020)

Fixed Fixed an issue related to the sticky horizontal nav in tour-detail.html: in some browser(and screen size) the nav will be pushed down when user scroll the page till bottom.

How to update from previous version

In js/main.js (// Sticky filters section) add the param bottoming:false like the example below:

// Sticky filters
  $(window).bind('load resize', function () {
    var width = $(window).width();
    if (width <= 991) {
      $('.sticky_horizontal').stick_in_parent({
        bottoming:false,
        offset_top: 50
      });
    } else {
      $('.sticky_horizontal').stick_in_parent({
        bottoming:false,
        offset_top: 67
      });
    }
  });

Version 1.7 (25 August 2020)

Update Updated BootStrap Library
Update Updated jQuery Library
Added Added Datepicker past dates disabled feature
Update Updated Owl Carousel to Version 2.3.4
Update Removed iCheck plugin checkbox/radio styling
Fixed Fixed issue for Datepicker on scroll page (ex. in tour-detail.html)
Update Updated Daterangepicker script
Update Minor changes to detail page secondary nav
Added Added Bootstrap modal example
Added Added another modal example (not Bootstrap)
Added Added detail page with contact form
Added Added another pricing tables
Update Updated the Google Font link
Added Added the feature to have the datepicker full view on Mobiles only
Added Added new home version (index-10.html)
Fixed Fixed an issue contact form validation

How to update from previous version

1. Updated BootStrap Library
Update the following files:
- css/bootstrap.min.css
- css/bootstrap.css
- js/common_scripts.js
- js/bootstrap.bundle.min.js
- js/bootstrap.bundle.js
(Rtl version still use Bootstrap 4.4.1)

2. Updated jQuery Library
Update the following files:
- js/common_scripts.js (in html_rtl also if you use rtl version)

3. Added Datepicker past dates disabled feature
Just add this param on datepicker script on footer page (for example see index.html):
minDate:new Date(),

4. Updated Owl Carousel to Version 2.3.4
Update the following files:
- css/vendors.css
- css/vendors.unminified.css
- js/common_scripts.js
(same for RTL version)

5. Removed iCheck plugin checkbox/radio styling
Update the following files:
- css/vendors.css
- css/vendors.unminified.css
- js/common_scripts.js
- js/main.js
(same for RTL version)

Then in the html pages change this code (better you copy the code from the html pages updated):

            <label>
  <input type="checkbox" class="icheck">All <small>(945)</small>
</label>
INTO
         <label class="container_check">All <small>(945)</small>
<input type="checkbox">
<span class="checkmark"></span>
</label>

Then in css/style.css update the following class .container_check under the comment /* Checkbox style *

6. Fixed issue for Datepicker on scroll page (ex. in tour-detail.html)
- 6.1 Add the class input-dates to the div that contain the date field as the example below:

<div class="form-group input-dates">
<input class="form-control" type="text" name="dates" placeholder="When..">
<i class="icon_calendar"></i>
</div>

- 6.2 Add this param on datepicker script on footer page: parentEl:'.scroll-fix',

- 6.3 In js/main.js new script in section //Range DatePicker scroll fix

7. Updated Daterangepicker script
Update the following files:
- css/vendors.css
- css/vendors.unminified.css
- css/daterangepicker.css
- js/common_scripts.js
- js/moment.min.js

And in css/style.css the section 3.9 Datepicker

8. Minor changes to detail page secondary nav
Update in css/style.css this class .secondary_nav in 2.4 Detail page section

9. Added Bootstrap modal example
Takes as reference the page bootstrap-modal.html and in css/style.css copy the styles in /* Bootstrap Modal Fix */ section

10. Added another modal example (not Bootstrap)
Takes as reference the page modal-version-2.html and in js/main.js copy the script under the comment // Modal generic.
In css/style.css copy the section 3.10 Modal Generic

11. Added detail page with contact form
Takes as reference the page detail-working-contact-form.html and new css in css/style.css under the comment /* Detail page contact form */.
Then update the assets/validate.js file and copy the new contact_detail.php.

12. Added another pricing tables
Takes as reference the pages pricing-tables-2.html, pricing-tables-3.html.
In css/style.css copy the new styles in the sections 3.11 Others pricing tables + the new js/tabs.js file.

13. On all pages change the Google font link into:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

14. Added the feature to have the datepicker full view on Mobiles only
Takes as reference tour-detail.html. To enable add this class="datepicker_mobile_full" to the body selector.
Then in css/style.css copy these lines under the section /* Full view calendar on mobile only */

15. Added new home version (index-10.html)
Takes as index-10.html and new css in css/style.css under the section /* Search 3 index-10.html */

16. Fixed an issue contact form validation
Update assets/validate.js.

Version 1.6 (5 Febraury 2020)

Update Updated BootStrap Library
Update Updated jQuery Library
Update Quantity DropDown Panel Minor Styles
Update Updated DatePicker Minor Styles
Update Removed Retina Script no longer supported by jQuery 3x
Added Home Page AirBnB style
Added Home Page with Address Autocomplete
Added Half Screen Map Listing
Added Leaflet Open Street Map (+Mapbox)
Added Another Range Slider (in Half Screen Map)

How to update from previous version

1. Updated BootStrap Library
Update the following files:
- css/bootstrap.min.css
- css/bootstrap.css
- js/common_scripts.js

2. Updated jQuery Library
Update the following files:
- js/common_scripts.js
- We have included the jQuery Library in js/common_scripts.js, so please remove from the footer of the pages

Note: In the pages that use isotope filter script, please change on footer this line:
              $(window).load(function(){ 
into $(window).on('load', function(){...

3. Quantity DropDown Panel Minor Styles
Update in css/syle.css this section aprox line 2008 /* Panel Drop Down */

4. Removed Retina Script no longer supported by jQuery 3x
Update the following files: js/common_scripts.js

5. Home Page AirBnB style: New section in css/style.css > 2.13 Home AirBnb

6. Home Page with Address Autocomplete
- New section in css/style.css > 2.15 Autocomplete Address Search + takes a reference index-8.html (in particular the footer script)

7. Half Screen Map Listing
- New section in css/style.css > 2.14 Half screen map
- In js/main.js these sections are new > // Search half screen map + // Range slider half screen map
- New js files: js/map_tours_half_screen.js + js/map_hotels_half_screen.js + js/map_restaurant_half_screen.js

8. Leaflet Open Street Map (+Mapbox)
- New section in css/style.css > 2.16 OpenStreet Map
- New folder in js folder > leaflet_map

9. Another Range Slider (in Half Screen Map)
- Update js/common_scripts.js
- In style.css > 2.14 Half screen map section
- Update css/vendors.css + vendors.unminified.css

Version 1.5 (3 Ocotber 2019)

Update Updated BootStrap Library
Added Added arrows on Flexslider + Click function index-2.html
Update Removed Weather Plugin no longer active
Added Adventure section
Added Added RTL support
Added Changed the width of main container in some blocks of the homepage

How to update from previous version

1. Updated BootStrap Library
Update the following files:
- css/bootstrap.min.css
- css/bootstrap.css
- js/common_scripts.js - In css/style.css update the following class in 3.1 Misc section: .form-control {}

2. Added arrows on Flexslider + Click function index-2.html
- in css/style.css update the entire css section jQuery FlexSlider v2.7.0
- on footer of index-2.html update the footer script

3. Removed Weather Plugin no longer active: update js/common_scripts.js

4. Adventure section
- in css/style.css copy the entire section 2.12 Adventure - update js/main.js (// Sticky titles + // Opacity mask + // Aside panel + // Show more button)

5. Added RTL support
- copy and takes as reference the folder html_rtl

6. Changed the width of main container in some blocks of the homepage
- in css/style.css has been added this class: .container-custom {}
- change in the html homapage this container class

<div class="container-fluid margin_80_0">

into

<div class="container container-custom margin_80_0">

Version 1.4 (29 May 2019)

Fixed Infinite looping scroll on some Chrome Browser versions for the Horizontal Sticky nav (ex. in tour_detail.html).

How to update from previous version

Update the following files:
- js/common_scripts.js
- js/main.js

// Secondary nav scroll
  var $sticky_nav= $('.secondary_nav');
  $sticky_nav.find('a').on('click', function(e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $('html, body').animate({
      'scrollTop': $target.offset().top - 140
    }, 800, 'swing');
  });
  $sticky_nav.find('ul li a').on('click', function () {
    $sticky_nav.find('ul li a.active').removeClass('active');
    $(this).addClass('active');
  });

Version 1.3 (10 December 2018)

Update BootStrap Library
Update Removed @import
Update Added HTML Visual Editor in admin section
Fixed Fix long list for dropdown (example index-3.html)

How to update from previous version

1. Update BootStrap Library
Update the following files:
- css/bootstrap.min.css
- css/bootstrap.css
- js/common_scripts.js

2. Removed @import
Update the following files:
- update css/style.css or remove @import for google font
- add on every html pages head the Google font link
- same changes for the coming soon page and admin section (html pages + css/admin.css)

3. Added HTML Visual Editor in admin section
- update css/style.css or remove @import for google font
- add on every html pages head the Google font link

4. Fix long list for dropdown
- update in css/style.css the entire section /* Jquery select */ (aprox line 6143)

Version 1.2 (10 August 2018)

Added Another Home version index-7
Fixed Issue related to the language/currency selector on footer (on IE the options are white not visible)
Update Top header icons converted into Icon fonts in order to change color easly
Added User Logged on top header
Added Map Markerclusterer
Update Minor files reordering
Added More color schemes
Added Psd/eps logo file
Added More menu dropdown options (menu-options.html)
Added Single month datepicker without date range (tour-detail-singlemonth-datepicker.html)
Update Reduced the default image size for tours, hotels, restaurants in order to increase the page speed
Update Class .grid_item in style.css/style.scss (related to images/elements under the Carousel in the homepage)

How to update from previous version

1. Takes as reference index-7.html (new class .search_container in css/style.css (aprox line 2999)

2. Issue related to the language/currency selector on footer: in css/style.css new class .styled-select#lang-selector select option aprox line 1275

3. Top header icons converted into Icon fonts in order to change color easly:
- copy the following files: css/icon_fonts/font/Glyphter.eot, css/icon_fonts/font/Glyphter.ttf, css/icon_fonts/font/Glyphter.svg, css/icon_fonts/font/Glyphter.woff
- update the following files: css/vendors.css + css/vendorsunminified.css + css/icon_fonts/css/all_icons.css + css/icon_fonts/css/all_icons.min.css
- in css/style.css update the entire style for ul#top_menu (aprox from line 596 to 746)

4. User Logged on top header: Takes a reference index-6.html:
- in css/style.css copy the styles under the section /* Dropdown user logged */
- in js/main.js at the end copy the new lines of code under the section /* Dropdown user logged */

5. Map Markerclusterer: in css/style.css copy the style under the section /* Cluster styles */:
- copy this file js/markerclusterer.js
- update all the js maps files (ex. map_hotels.js)
- on footer of every page that use the map (the listing pages) add on footer js/markerclusterer.js

6. In order to reduce as much as possible the request to a server and organize better the assets included with the item, some files have been moved:
- Datepicker.css now is in vendors.css/vendorsuniminifed.css
- Icon fonts now are in vendors.css/vendorsuniminifed.css
- Moment.min.js+Datepicker.js has been moved in common_script.js
- menu.css...it's included in the main style.css (@import removed)

7. More color schemes: new colors files in css folder

8. They are in the main folder

9. More menu dropdown options (menu-options.html):
takes as reference menu-options.html and the new styles in css/style.css (sections /* Submenu 2nd level right */ + /* Submenu 3rd level */ + /* Arrows top 3rd level*/)

Version 1.1 (8 June 2018)

Added Admin section
Fixed Improved top header icons for a better readbility in different browsers

How to update from previous version

1. Admin section: copy the folder admin_section

2. Improved top header icons for a better readbility in different browsers:
- copy the following images from img folder: icon_cart.svg, icon_heart.svg
- in css/style.css update the #top_menu styles from line 596 to 694 aprox

Documentation

BookBeach - HTML Site template

Installation

CSS Structure

Javascript Structure

Sass

Color Schemes

Common settings/edits

Change the logo

Change the address of Google map in contact page

Common Issues on Google Map(if the Google map works localy in demo mode but does not works once the site will be online)

Address Autocomplete with Google API

Home with video header (fallback with a background image in tablets and mobile)(these devices does not support video autoplay as background due to bandwidth limit consume policy)

Control the opacity of the header images

Set up site launch page located in site_launch folder

How MAPS works

Leaflet OpenStreet Map + MapBox

Datepicker doc and generator

Revolution Slider

KenBurns Slider

Animations on Scroll

Menu Options

PHPMAILER PHP forms

Common settings (edit recipients) for the 3 forms: reservation, contacts and newsletter.

SMTP settings (contact your hosting provider, usually need only Host, Username and Password)

PHP files: Contact form old/previous method

Other working forms and common issues

Source & Credits

Support

Don’t forget to Rate this template

More Templates

Updates

Version 3.7 (15 September 2025)

How to update from previous version

Version 3.6 (23 May 2025)

How to update from previous version

Version 3.5 (30 January 2025)

How to update from previous version

Version 3.4 (4 November 2024)

How to update from previous version

Version 3.3 (14 October 2024)

How to update from previous version

Version 3.2 (17 June 2024)

How to update from previous version

Version 3.1 (28 Febraury 2024)

How to update from previous version

Version 3.0 (10 December 2023)

Version 2.9 (3 October 2023)

How to update from previous version

Version 2.8 (19 June 2023)

How to update from previous version

Version 2.7 (10 January 2023)

How to update from previous version

Version 2.6 (12 October 2022)

How to update from previous version

Version 2.5 (17 June 2022)

How to update from previous version

Version 2.4 (16 March 2022)

How to update from previous version

Version 2.3 (14 January 2022)

Version 2.2 (25 October 2021)

Version 2.1 (18 May 2021)

How to update from previous version

Version 2.0 (31 March 2021)

How to update from previous version

Version 1.9 (22 October 2020)

How to update from previous version

Version 1.8 (10 September 2020)

How to update from previous version

Version 1.7 (25 August 2020)

How to update from previous version

Version 1.6 (5 Febraury 2020)

How to update from previous version

Version 1.5 (3 Ocotber 2019)

How to update from previous version

Version 1.4 (29 May 2019)

How to update from previous version

Version 1.3 (10 December 2018)

How to update from previous version

Version 1.2 (10 August 2018)

Common Issues on Google Map
(if the Google map works localy in demo mode but does not works once the site will be online)

Home with video header (fallback with a background image in tablets and mobile)
(these devices does not support video autoplay as background due to bandwidth limit consume policy)