Documentation | Hotel Himara - Hotel HTML Template

General Configurations

Boxed Layout.

Step 1. Search for body tag

Step 2. Add class boxed

Example - Hotel Himara


 <body class="boxed">

 ...

 </body>

Horizontal Header.

Step 1. Search for header tag

Step 2. Add class horizontal-header

Example - Hotel Himara


<header class="horizontal-header">

...

</header>

Vertical Header.

Step 1. Search for header tag

Step 2. Add class vertical-header

Example - Hotel Himara


<header class="vertical-header">

...

</header>

Sticky Header. (only for horizontal header)

Step 1. Search for header tag

Step 2. Add class sticky-header

Example - Hotel Himara


<header class="horizontal-header sticky-header">

...

</header>

Transparent Header. (only for horizontal header)

Step 1. Search for header tag

Step 2. Add class transparent-header

Example - Hotel Himara


<header class="horizontal-header transparent-header">

...

</header>

Dark Header.

Step 1. Search for header tag

Step 2. Add class dark-header

Example - Hotel Himara


<header class="horizontal-header dark-header">

...

</header>

Open Header. (only for vertical header)

Step 1. Search for header tag

Step 2. Add class open-header

Example - Hotel Himara


<header class="vertical-header <open-header></open-header>">

...

</header>

Revolution Slider

For Revolution Slider Documentation please click here

Image Lightbox

Step 1. Create a big and a small image. The big image will be the lightbox image, the small image the thumbnail

Separate Image Example - Hotel Himara


<a href="images/example-lg.jpg" rel="magnific-popup">
    <img src="images/example.jpg" alt="image" />
</a>

Multiple Images Example - Hotel Himara


<div class="image-gallery">
    <a href="images/example-lg1.jpg" rel="magnific-popup">
        <img src="images/example1.jpg" alt="image" />
    </a>
    <a href="images/example-lg2.jpg" rel="magnific-popup">
        <img src="images/example2.jpg" alt="image" />
    </a>
    <a href="images/example-lg3.jpg" rel="magnific-popup">
        <img src="images/example3.jpg" alt="image" />
    </a>
</div>

Instagram Feed

Step 1. Open file main.js (js folder)

Step 2. Search for INSTAGRAM FEED section

Step 3. Replace userID and accessToken with yours

js/main.js - Hotel Himara


// =============================================
// INSTAGRAM FEED - OWL CAROUSEL 
// =============================================
if ($("#instafeed-gallery").length) {
  var galleryFeed = new Instafeed({
    get: "user",
    userId: 6954412019,
    accessToken: "6954412019.1677ed0.7a363e167d20449998757a3381ca9987",
    resolution: "standard_resolution",
    useHttp: "true",
    template: '<figure class="gradient-overlay-hover instagram-icon"><a href="{{link}}" target="_blank"><img src="{{image}}" class="img-responsive"></a></figure>',
    target: "instafeed-gallery",
    after: function() {
      var owl = $(".instagram-owl"),
        owlSlideSpeed = 300;
      $(document).ready(function() {
      
      ...

Info: How to get userID and accessToken? Get userID and accessToken, or check instagram official documentation here

Booking Form Configuration

Step 1. Go to email folder

Step 2. Open booking.php

Step 3. Search for Site Settings

Step 4. Replace details with yours.

email/booking.php - Hotel Himara

#####################################################################################################
                
// Site Settings
$site_title          = "Hotel Himara";
$site_url            = "https://eagle-themes.com/himara";
$facebook_link       = "https://www.facebook.com/";
$twitter_link        = "https://twitter.com/";
$admin_phone         = "+1 888 123 4567";

// Email Settings
$admin_email         = "contact@eagle-themes.com";
$admin_subject       = "Himara Hotel - New Reservation";
$customer_subject    = "Himara Hotel - Booking Details";

// Output Messages
$success_mssg        = "Your reservation has been submitted to us and we just sent you a confirmation email. We'll contact you as quickly as possible.";
$error_mssg          = "An error has occurred. Please check your PHP email configuration.";
$email_mssg          = "Please enter a valid email!";
$booking_date        = "You can't depart before you arrive";
$empty_email         = "Email is empty! Please enter your email (e.g. myemail@email.com)";
$empty_roomtype      = "Room Type is empty! Please enter something.";
$empty_checkin       = "Arrival Date is empty! Please enter something.";
$empty_checkout      = "Departure Date is empty! Please enter something.";
$empty_adults        = "Adults is empty! Please enter something.";
$empty_name          = "Name is empty! Please enter something.";
$empty_phone         = "Phone Number is empty! Please enter something.";
$empty_comments      = "Coomments section is empty! Please enter something.";
$empty_country       = "Country section is empty! Please enter something.";

#####################################################################################################

Info: Please take note that this will only will work in a live environment.

How to add new field?

Step 1. Go to 1 of booking forms or advanced booking form (booking-form.html)

Step 2. Add new field as seen below

Example


<form id="booking-form">
...
    <div class="form-group">
        <input type="text" class="form-control" name="booking-fax" placeholder="fax" >
    </div>
...
</form>

Step 3. Go to js folder

Step 4. Open main.js

Step 5. Open main.js

Step 6. Search for BOOKING FORM (line 729)

Step 7. Add new line as seen below

js/main.js - Hotel Himara

// =============================================
// BOOKING FORM
// =============================================
$("#booking-form").on('submit', function (e) {
    e.preventDefault();

    //Get input field values from HTML form
    var booking_name = $("input[name=booking-name]").val();
    var booking_email = $("input[name=booking-email]").val();
    var booking_phone = $("input[name=booking-phone]").val();
    var booking_roomtype = $("select[name=booking-roomtype]").val();
    var booking_startdate = $("input[name=daterangepicker_start]").val();
    var booking_enddate = $("input[name=daterangepicker_end]").val();
    var booking_adults = $("input[name=booking-adults]").val();
    var booking_children = $("input[name=booking-children]").val();
    var booking_country = $("select[name=booking-country]").val();
    var booking_comments = $("textarea[name=booking-comments]").val();
    var booking_fax = $("input[name=booking-fax]").val(); // new field

    //Data to be sent to server
    var post_data;
    var output;
    post_data = {
        'booking_name': booking_name,
        'booking_email': booking_email,
        'booking_phone': booking_phone,
        'booking_roomtype': booking_roomtype,
        'booking_startdate': booking_startdate,
        'booking_enddate': booking_enddate,
        'booking_adults': booking_adults,
        'booking_children': booking_children,
        'booking_country': booking_country,
        'booking_comments': booking_comments,
         'booking_fax': booking_fax // new field
    };

...

});

Step 8. Go to email folder

Step 9. Open booking.php

Step 10. Add new line as seen below

email/booking.php - Hotel Himara

//sanitize input data using php filter_var(). *php 5.2.0+
$customer_email     = filter_var($_post["booking_email"], filter_sanitize_string);
$roomtype           = filter_var($_post["booking_roomtype"], filter_sanitize_string);
$checkin            = filter_var($_post["booking_checkin"], filter_sanitize_string);
$checkout           = filter_var($_post["booking_checkout"], filter_sanitize_string);
$adults             = filter_var($_post["booking_adults"], filter_sanitize_string);
$children           = filter_var($_post["booking_children"], filter_sanitize_string);
$customer_name      = filter_var($_post["booking_name"], filter_sanitize_string);
$customer_phone     = filter_var($_post["booking_phone"], filter_sanitize_string);
$comments           = filter_var($_post["booking_comments"], filter_sanitize_string);
$country            = filter_var($_post["booking_country"], filter_sanitize_string);
$fax                = filter_var($_post["booking_fax"], filter_sanitize_string); // new field

Step 11. Now go to line 93

email/booking.php - Hotel Himara

//admin message
$admin_message = str_replace('%customer_name%', $customer_name, $admin_message);
$admin_message = str_replace('%customer_email%', $customer_email, $admin_message);
$admin_message = str_replace('%customer_phone%', $customer_phone, $admin_message);
$admin_message = str_replace('%roomtype%', $roomtype, $admin_message);
$admin_message = str_replace('%adults%', $adults, $admin_message);
$admin_message = str_replace('%children%', $children, $admin_message);
$admin_message = str_replace('%checkin%', $checkin, $admin_message);
$admin_message = str_replace('%checkout%', $checkout, $admin_message);
$admin_message = str_replace('%country%', $country, $admin_message);
$admin_message = str_replace('%comments%', $comments, $admin_message);
$admin_message = str_replace('%fax%', $fax, $admin_message); // new field
$admin_message = str_replace('%site_title%', $site_title, $admin_message);
$admin_message = str_replace('%site_url%', $site_url, $admin_message);
$admin_message = str_replace('%facebook_link%', $facebook_link, $admin_message);
$admin_message = str_replace('%twitter_link%', $twitter_link, $admin_message);

Step 13. Add new line as seen below

email/booking.php - Hotel Himara

//customer message
$customer_message = str_replace('%customer_name%', $customer_name, $customer_message);
$customer_message = str_replace('%customer_email%', $customer_email, $customer_message);
$customer_message = str_replace('%customer_phone%', $customer_phone, $customer_message);
$customer_message = str_replace('%roomtype%', $roomtype, $customer_message);
$customer_message = str_replace('%adults%', $adults, $customer_message);
$customer_message = str_replace('%children%', $children, $customer_message);
$customer_message = str_replace('%checkin%', $checkin, $customer_message);
$customer_message = str_replace('%checkout%', $checkout, $customer_message);
$customer_message = str_replace('%country%', $country, $customer_message);
$customer_message = str_replace('%comments%', $comments, $customer_message);
$customer_message = str_replace('%fax%', $fax, $customer_message); //new field
$customer_message = str_replace('%admin_email%', $admin_email, $customer_message);
$customer_message = str_replace('%admin_phone%', $admin_phone, $customer_message);
$customer_message = str_replace('%site_title%', $site_title, $customer_message);
$customer_message = str_replace('%site_url%', $site_url, $customer_message);
$customer_message = str_replace('%facebook_link%', $facebook_link, $customer_message);
$customer_message = str_replace('%twitter_link%', $twitter_link, $customer_message);

Step 14. Now open admin-template.html

Step 15. Add new row as seen below

email/admin-template.html - Hotel Himara

...
<tr>
    <td>fax</td>
    <td>%fax%</td>
</tr>
...

Step 16. Now open customer-template.html

Step 17. Add new row as seen below

email/customer-template.html - Hotel Himara

...
<tr>
    <td>fax</td>
    <td>%fax%</td>
</tr>
...

Contact Form Configuration

Step 1. Go to email folder

Step 2. Open email.php

Step 3. Search for Email Settings

Step 4. Replace details with yours.

email/email.php - Hotel Himara

#####################################################################################################

// Email Settings
$site_title       = "Himara Hotel";
$to_email         = "contact@eagle-themes.com";
$default_subject  = "Himara Hotel - New Message";

// Output Messages
$success_mssg   = "Your message has been sent successfully. Thank you.";
$error_mssg     = "An error has occurred. Please check your PHP email configuration.";
$short_mssg     = "Message is empty or too short! Please enter something.";
$empty_subject  = "Subject is empty! Please enter something.";
$empty_name     = "Name is empty! Please enter something.";
$empty_phone    = "Phone is empty! Please enter something.";
$email_mssg     = "Please enter a valid email!";

//Email Text
$tr_name    = "Name";
$tr_email   = "Email";
$tr_message = "Message";
$tr_phone   = "Phone Number";

#####################################################################################################

Info: Please take note that this will only will work in a live environment.

Google Map Configuration

Step 1. Open the HTML file (e.g. contact.html)

Step 2. Search for YOUR_API_KEY

Step 3. Replace it with your API Key

Example

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Info: How to get API Key? Get API Key.

Step 4. Go to js folder

Step 5. Open main.js

Step 6. Search for GOOGLE MAP

Step 7. Replace details with yours.

main.js - Hotel Himara

// =============================================
// GOOGLE MAP
// =============================================
function initialize() {
  var map;
  var panorama;
  var var_latitude = 39.7715865; // Google Map Latitude
  var var_longitude = 19.997841; // Google Map Longitude
  var pin = 'images/icons/pin.svg';

  //Map pin-window details
  var title = "Hotel Himara - Click to see";
  var hotel_name = "Hotel Himara";
  var hotel_address = "Lorem ipsum dolor, 25, Himara";
  var hotel_desc = "5 star deluxe Hotel";
  var hotel_more_desc = "Lorem ipsum dolor sit amet, consectetur.";
  ...
  }

Info: How to get Latitude and Longitude? Get Latitude and Longitude.

Support and Feedback

All questions you can send via support tab here .

Support includes:

Availability of the author to answer questions
Answering technical questions about item’s features
Assistance with reported bugs and issues
Help with included 3rd party assets

Support does not include:

Customization services
Installation services

More information about the terms of support you can see here

Change Log

Version 1.2.0 - 16 July, 2019
- Fixed Header Issue
- Fixed Scrolling Issue

Version 1.1.0 - 15 April, 2018
- Fixed Header Issue
- Added Place Details Page
- Added Event Details Page

Version 1.0.0 - 31 March, 2018 (Initial release)

Sources & Credits

Fonts & Icon Fonts:

Images, Video and Audio in the demo:

Hosting

Looking For The Best Web Hosting? If you are looking for the best web hosting, we recommend SiteGround .

SiteGround is one of the most recommended hosting companies. They are known for their top notch customer support and fast reliable hosting plans. Their optimized hosting includes everything you’ll need to create and grow a successful website.

Once again, thank you so much for purchasing this template. I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. Please don’t forget to rate Himara template on ThemeForest if you like it.

Hotel Himara

Hotel HTML Template

General Configurations

Boxed Layout.

Horizontal Header.

Vertical Header.

Sticky Header. (only for horizontal header)

Transparent Header. (only for horizontal header)

Dark Header.

Open Header. (only for vertical header)

Revolution Slider

Image Lightbox

Instagram Feed

Booking Form Configuration

How to add new field?

Contact Form Configuration

Subscribe Form Configuration (Mailchimp)

Google Map Configuration

Support and Feedback

Support includes:

Support does not include:

Change Log

Sources & Credits

Fonts & Icon Fonts:

Images, Video and Audio in the demo:

Hosting