Documentation

PARADISE - Hotel Site Template

Thank you so much for purchasing our item from Themeforest.

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:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. Choose the demo folder menu version preferred that are identical but differ in the menu/navigation. You will need to upload these files to your hosting web server (that support PHP) using FTP (suggested FTP client Filezilla) or localhost in order to use it on your website and of course after your edits.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   • html - Contains all of the assets referenced
     • coming_soon_assets - Coming soon page assets
     • css - Stylesheet files
     • img - Images files
     • js - Javacript files
     • phpmailer - Php files for the forms
     • sass - Sass/scss 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 or play with the scss files included.
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.SITE STRUCTURE and TYPOGRAPHY
- 1.0 Preloader
- 1.1 Typography
- 1.2 Animations title
- 1.3 Buttons
- 1.4 Structure

2. CONTENT
- 2.1 Home
- 2.2 About
- 2.3 Room list
- 2.4 Room details
- 2.5 News page
- 2.6 Contact page
- 2.7 Error page
- 2.8 Gallery
- 2.9 Restaurant
- 2.10 Advertise modal
- 2.11 Cookie Bar GDPR
3. COMMON
- 3.1 Misc
- 3.2 Datepicker
- 3.3 Forms
- 3.4 Success submit 
- 3.5 Progess Scroll to top
- 3.6 Spacing
- 3.7 Pagination

Javascript Structure

This theme use these Javascript (minified versions included). We have 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_min.js content:

• jQuery Library
• Boostrap.js
• Headroom.js
• Jarallax
• Jarallax Video extension
• Gsap
• ScrollTrigger
• ScrollCue.js
• Owl Carousel
• Footer Reveal
• Date range picker
• Isotope
• Theia Sticky Sidebar
• Fullscreen Lightbox

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.

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/45px) or better SVG format. Below how is coded:

<img src="img/logo.png" width="135" height="45" alt="">

Control the opacity of the header images

You can control the opacity of the header images via data attribute as the example below:

<div class="opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">

Animation Scroll Cue

Show elements by scrolling. Animation types available:

• fadeIn
• slideInLeft
• slideInRight
• slideInDown
• slideInUp
• zoomIn
• zoomOut
• rotateIn
• bounceIn
• bounceInLeft
• bounceInRight
• bounceInDown
• bounceInUp
• flipInX
• flipInY

Please read the full documentation here.

Jarallax Parallax Images and Videos (full documentation here)

Example of Parallax Background Image:

<div data-jarallax data-speed="0.2" class="jarallax">
  <img class="jarallax-img" src="<background_image_url_here>" alt="">
  Your content here...
</div>"

Example of Parallax Video Background:

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
Your content here...
</div>
          
<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax data-video-src="https://vimeo.com/110138539">
Your content here...
</div>
<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax data-video-src="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
</div>

Date picker V2 (full documentation here)

Open js/commun_functions.js (or js/datepicker_inline.js) for common settings.

Change date format in Date picker V1 (full documentation here)

Open js/commun_functions.js (or js/datepicker_inline.js) and in Datepicker section change the format:

//Datepicker
	var $inputdates = $('input[name="dates"]');
	$(function() {
		$inputdates.daterangepicker({
			  autoUpdateInput: false,
			  autoApply:true,
			  minDate:new Date(),
			  locale: {
				  cancelLabel: 'Clear'
			  }
		  });
		  $inputdates.on('apply.daterangepicker', function(ev, picker) {
			  $(this).val(picker.startDate.format('MM-DD-YY') + '  >  ' + picker.endDate.format('MM-DD-YY'));
		  });
		  $inputdates.on('cancel.daterangepicker', function(ev, picker) {
			  $(this).val('');
		  });
	  });"

Icon Fonts

The item incluse these icons font libraries:

• Bootstrap Icons: view here the reference classes
• Custom icons: view in css/custom-icons folder the demo html files useful for the class reference

PHP files

You can change the method by using another php file in phpmailer folder. Below a short explanation of the different methods and common settings:

PHPmailer text/html: This version send an email with basic html support on text (for example contact.php).

PHPmailer with html template: 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). For example contact_template_email.php (default).

PHPmailer with html template SMTP: This version is like above but with SMTP Authentication (for example contact_template_email_smtp.php).

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

$mail->setFrom('info@paradise.com', 'Message from paradise); // Email Address and Name FROM
$mail->addAddress('jhon@paradise.com', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('noreply@paradise.com', Message from paradise); // Email Address and Name NOREPLY
$mail->Subject = Message from paradise;  // 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, images must be upload on your online site/server and the html looks like the example below:
<img src="http://www.yourdomain/phpmailer/images/logo.png" border="0" width="54" height="60" alt="" />

Source & Credits

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

• Bootstrap
• Bootstrap Icons
• Date range picker
• Date range picker V2
• Jquery
• Owl carousel
• Scroll Cue js
• Gsap
• PHPMailer
• Full Screen Lightbox
• Jquery Isotope
• Jarallax Parallax
• Headroom header scroll effect
• Theia sticky sidebar

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

• Pixabay
• Unsplash
• Freepik

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

Don’t forget to Rate this template

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 4.3 (8 January 2025)

1. Update Added categoy effect home page (index-8.html, index-9.html)
2. Update Added home page with working form request on top (index-10.html)
3. Update Created 5 pre demos folders of the item in their different menu versions available

How to update from previous version:

Added categoy effect home page (index-8.html, index-9.html):
1. Copy the new html pages
2. Update css/style.css or only the new section 2.12
3. Update js/common_functions.js or only the section // Categories hover images/videos
4. Copy the video/img used in this new section

Added home page with working form request on top (index-10.html):
1. Copy the new html page
2. Update css/style.css or only the new section 2.13

Created 5 pre demos folders of item in their different menu versions available:
basically for previous customers does not change nothing. The core files of the item are the same (js/css). We only create 5 menu pre demos ready to use.

Version 4.2 (17 June 2024)

1. Update Force UTF8 for Special Characters in PHPmailer mail sender

How to update from previous version:

In the phpmailer folder, in the php files, add this line:
$mail->CharSet = 'UTF-8'; //Force UTF for special characters
before the $mail->send();
Repeat for the confirmation $mail->send();
NOTE: this update is useful for users who use other languages than English or have character issues on the emails received.

Version 4.1 (17 June 2024)

1. Update Updated Jquery Library v 3.7.1

How to update from previous version:

Please update the following files: js/common_scripts.js

Version 4.0 (13 March 2024)

1. Update Updated Bootstrap Icon Library

How to update from previous version:

Please update the following folder/files: css/bs-icon-font entire folder, css/vendors.css, css/vendors.min.css

Version 3.9 (10 December 2023)

1. Update Updated Documentation

Version 3.8 (9 October 2023)

1. Update Updated Bootstrap Icons Library (NEW TWITTER ICON)

How to update from previous version

1. Updated Bootstrap Icons Library

Please update the following folder/files: css/bs-icon-font entire folder, css/vendors.css, css/vendors.min.css

Version 3.7 (20 September 2023)

1. Update Added Home version with Working Booking request form (index-7.html)
2. Fixed Moved the datepicker script for top search to a separate file.

How to update from previous version

1. Added Home version with Working Booking request form

Takes as reference index-7.html

2. Moved the datepicker script on search to a separate file (instead of js/common_functions.js)

Please update js/common_functions.js and copy js/datepicker_search.js file.

Add in the pages where present the search availability, the following line on footer page: <script src="js/datepicker_search.js"></script>

Version 3.6 (28 August 2023)

1. Fixed Font Family Fix on email HTML templates.
2. Fixed Email verification in phpmailer/contact_template_email_smtp.php duplicated.
3. Update Updated Datepicker
4. Update Improved Success Message for working web forms (ex.contact.html or the working booking request demo)

How to update from previous version

1. Font Family Fix on email HTML templates

Update the following files phphmailer/template-email.html + confirmation.html or change the font family in css inline from Poppins to Montserrat.

2. Email verification in phpmailer/contact_template_email_smtp.php duplicated.

Update phpmailer/contact_template_email_smtp.php with only one "Email verification" lines:

// Email verification, do not edit
function isEmail($email_contact ) {
return(preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/",$email_contact));
}

3. Updated Datepicker

1. Update the following files: js/common_scripts.js, js/common_functions.js, js/datepicker_inline.js
2. Copy the following files: css/daterangepicker_v2.css
3. In css/style.css copy the new section /* Hero new datepicker */ + UPDATE the footer section css code + UPDATE the .mouse_wp class code
4. Takes as reference the html pages, there are few changes in the code. ATTENTION: a new class has been added (home-search) + id for input field to the hero section that have the datepicker.

   <div class="hero home-search full-height jarallax" data-jarallax-video="https://vimeo.com/360765915" data-speed="0.2">
            .....
   <input class="form-control" type="text" name="dates" id="dates" placeholder="Check in / Check out" readonly="readonly">
   

4. Improved Success Message

In css/style.css copy the new section "3.8 Success submit"

Version 3.5 (28 June 2023)

1. Fixed Issue on phpmailer/reserve_template_email_smtp.php, SMTP library link not present.

How to update from previous version

Update from line 1 to 9 of this file.

Version 3.4 (5 May 2023)

1. Fixed Scroll bar issue on Mobile for room-details.html + room-details-booking.html
2. Fixed Scroll bar issue on first page load
3. Fixed Date Range Picker Font family

How to update from previous version

1. Scroll bar issue on Mobile for room-details.html + room-details-booking.html

• Update the review section score html code for those pages: it has been changed the grid classes for mobiles .col-11 > .col-10 and .col-1 > .col-2

2. Scroll bar issue on first page load

• Update css/style.css or add the property "overflow:hidden" to the following classes: .hero + .parallax_section_1

3. Date Range Picker Font family

• Update css/vendors.min.css + css/vendors.css

Version 3.3 (17 March 2023)

1. Update Added Masonry Gallery Page
2. Update Added Restaurant Page
3. Update Added Modal Advertise (with cookie session)
4. Update Added GDPR Cookie Bar
5. Update Added Restaurant Menu of the day
6. Update Added Coming Soon Page

How to update from previous version

1. Added Masonry Gallery Page

• Please takes as reference the gallery.html + images in img/gallery
• Update css/style.css or copy the new section "2.8 Gallery"

2. Added Restaurant Page

• Please takes as reference the restaurant.html + images in img/restaurant
• Update css/style.css or copy the new section "2.9 Restaurant"

3. Added Modal Advertise (with cookie session)

• Please takes as reference the modal-advertise-1.html + image in img folder
• Update css/style.css or copy the new section "2.10 Advertise modal"
• Copy and paste js/modal_popup.js

4. Added GDPR Cookie Bar

• Please takes as reference the cookie-bar.html
• Update css/style.css or copy the new section "2.11 Cookie bar"
• Copy and paste js/jquery.cookiebar.js

5. Added Restaurant Menu of the day

• Please takes as reference the menu-of-the-day.html + images in img/daymenu
• Copy the new css/day_menu.css
• Copy the new js/day_menu.js

6. Added Coming Soon Page

• Please takes as reference the coming-soon.html
• Copy and paste the new folder coming_soon_assets located in the main root

Version 3.2 (13 March 2023)

1. Update Added new menu version with submenus (menu-5.html)
2. Update Changed a class name just only to make the code more understandable
3. Update Added another home version (takes as reference index-6.html)
4. Update Added a js example for the datepicker (calendar) in another language. Takes as reference js/datepicker_inline_other_lang.js

How to update from previous version

1. Added new menu version

• Please takes as reference the menu-5.html
• Update css/style.css or copy the new section /*-------- Menu version 4 with submenu example on menu-5.html --------*/
• Update js/common_functions.js or copy the code under the comment // Menu v4 + submenu

2. Changed a class name

• Change the class name "menu_v1" to "menu_v4" on menu-4.html
• Change the class name "menu_v1" to "menu_v4" in css/style.css or update this section /*-------- Menu v4 --------*/

Version 3.1 (9 Dec 2022)

1. Fixed Incompatibility between Owl Carousel Centered with Loop and The Lightbox Gallery (room-details.html)

How to update from previous version

Please takes as reference the html updated for the .carousel_item_centered part in room-details.html/room-details-booking.html.