Colina - Theme documentation
Version 1.1.0

Stylesheets

First of all, you need to include all needed css files. Make sure that the main theme css " theme.css" is the last one, it will apply all basic theme files. Media queries for responsive preview are included!

            <link rel="stylesheet" media="all" href="css/bootstrap.css" />
<link rel="stylesheet" media="all" href="css/animate.css" />
<link rel="stylesheet" media="all" href="css/font-awesome.css" />
<link rel="stylesheet" media="all" href="css/linear-icons.css" />
<link rel="stylesheet" media="all" href="css/hotel-icons.css" />
<link rel="stylesheet" media="all" href="css/magnific-popup.css" />
<link rel="stylesheet" media="all" href="css/owl.carousel.css" />
<link rel="stylesheet" media="all" href="css/datepicker.css" />
<link rel="stylesheet" media="all" href="css/theme.css" />    
            

Javascript

Add all main .js files to your document. Options and initalizations are in " main.js"

            <script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.bootstrap.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.owl.carousel.js"></script>
<script src="js/main.js"></script>    
            

Page loader

Page loader markup needs to be firs element after "body" tag.

Markup of loader

<div class="page-loader"></div>

Loader javascript

Be sure that $(window).bind("load", function () {...} cannot be inside $(function() {...}) shorthand for $( document ).ready()

$(window).on("load", function () {
    setTimeout(function () {
        $('.page-loader').addClass('loaded');
    }, 1000);
})

Navigation

Markup

First of all, you need to include all needed css files. Make sure that the main theme css " theme.css" is the last one, it will apply all basic theme files. Media queries for responsive preview are included!

            <header>

    <!-- ======================== Navigation ======================== -->

    <div class="container">

        <!-- === navigation-top === -->

        <nav class="navigation-top clearfix">

            <!-- navigation-top-left -->

            <div class="navigation-top-left">
                <a class="box" href="#">
                    <i class="icon icon-phone-handset"></i> (01) 252-3333
                </a>
            </div>

            <!-- navigation-top-right -->

            <div class="navigation-top-right">
                <a class="box" href="#">
                    <i class="icon icon-star"></i> Special offers
                </a>
                <a class="box" href="reservation-1.html">
                    <i class="icon icon-tag"></i> Reservations
                </a>
            </div>
        </nav>

        <!-- === navigation-main === -->

        <nav class="navigation-main clearfix">

            <!-- logo -->

            <div class="logo animated fadeIn">
                <a href="index.html">
                    <img class="visible-md visible-lg" src="assets/images/logo.png" alt="Alternate Text" />
                    <img class="visible-xs visible-sm" src="assets/images/logo-mobile.png" alt="Alternate Text" />
                </a>
            </div>

            <!-- toggle-menu -->

            <div class="toggle-menu"><i class="icon icon-menu"></i></div>

            <!-- navigation-block -->

            <div class="navigation-block">

                <!-- navigation-left -->

                <ul class="navigation-left">
                    <li>
                        <a href="index.html">Home <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <ul>
                            <li><a href="index.html">Home - Spaced</a></li>
                            <li><a href="index-2.html">Home - Boxed</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Pages <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <ul>
                            <li><a href="about.html">About us</a></li>
                            <li><a href="rooms-category.html">Rooms category</a></li>
                            <li><a href="room-overview.html">Room overview</a></li>
                            <li><a href="404.html">404 Not found</a></li>
                            <li><a href="shortcodes.html">Shortcodes</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Booking <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <ul>
                            <li><a href="reservation-1.html">Booking step 1</a></li>
                            <li><a href="reservation-2.html">Booking step 2</a></li>
                            <li><a href="reservation-3.html">Booking step 3</a></li>
                        </ul>
                    </li>
                </ul>

                <!-- navigation-right -->

                <ul class="navigation-right">
                    <li>
                        <a href="facility.html">Facilities</a>
                    </li>
                    <li>
                        <a href="#">Blog <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <ul>
                            <li><a href="blog-category.html">Blog category</a></li>
                            <li><a href="blog-item.html">Blog item</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>

            </div> <!--/navigation-block-->

        </nav>
    </div> <!--/container-->
</header>    
            

Call javascript

The functions are triggers login, searchbar or cart items. Mobile events are included too.

            // Toggle menu
// ------------------------------------

$('.toggle-menu').on('click', function () {
    $(this).toggleClass('open');
    $(this).parent().find('.navigation-block').toggleClass('open');
});

var $box = $('.options-content .options .box');
$box.click(function () {
    var $this = $(this),
        $boxWrapper = $this.closest('.box-wrapper');
    if ($this.hasClass('active')) {
        $boxWrapper.removeClass('box-wrapper-selected');
        $this.removeClass('active');
    }
    else {
        $boxWrapper.addClass('box-wrapper-selected');
        $this.closest('.options-content').find('.box').removeClass('active');
        $this.addClass('active');
    }
});

// Mobile - Dropdown menu
// ------------------------------------

$('.open-dropdown').on('click', function (e) {
    e.preventDefault();
    if ($(document).width() >= 992) {
        return false;
    }
    var $this = $(this),
        $li = $this.closest('li'),
        $drop = $li.find('ul');
    $li.toggleClass('expanded');
    if ($li.hasClass('expanded')) {
        $drop.slideDown();
    }
    else {
        $drop.slideUp();
    }
});

// Desktop - Dropdown menu
//---------------------------

$('.navigation-block > ul > li').bind({
    mouseenter: function () {
        if ($(document).width() < 992) {
            return false;
        }
        $(this).addClass('hovered');
    },
    mouseleave: function () {
        if ($(document).width() < 992) {
            return false;
        }
        $(this).removeClass('hovered').removeAttr('class');
    },
});
            

Frontpage slider

Markup example of slider

Animation are included and it can be called on data-amination attributes. List of supported animations are

            <div class="frontpage-slider">
    <div class="container">
        <div class="owl-slider owl-slider-header">

            <!-- === slide item === -->

            <div class="item" style="background-image:url(...)">
                <div class="box text-right">
                    <h2 class="title animated h1" data-animation="fadeInDown">
                        ...
                    </h2>
                    <div class="desc animated" data-animation="fadeInUp">
                        ...
                    </div>
                    <div class="desc animated" data-animation="fadeInUp">
                        ...
                    </div>
                    <div class="animated" data-animation="fadeInUp">
                        <a href="#" class="btn btn-clean">Link</a>
                    </div>
                </div>
            </div>

        </div> <!--/owl-slider-->
    </div> <!--/container-->
</div> <!--/frontpage-slider-->
            

Initalize the plugin

For more documentation please visit Owl Carousel webiste

                // Frontpage slider
    // ----------------------------------------------------------------

    var arrowIcons = [
        '<span class="icon icon-chevron-left"></span>',
        '<span class="icon icon-chevron-right"></span>'
    ];

    $.each($(".owl-slider"), function (i, n) {

        $(n).owlCarousel({
            autoHeight: false,
            navigation: true,
            navigationText: arrowIcons,
            items: 1,
            singleItem: true,
            addClassActive: true,
            transitionStyle: "fadeUp",
            afterMove: animatetCaptions,
            autoPlay: 8000,
            stopOnHover: false
        });

        animatetCaptions();

        function animatetCaptions(event) {
            "use strict";
            var activeItem = $(n).find('.owl-item.active'),
            timeDelay = 100;
            $.each(activeItem.find('.animated'), function (j, m) {
                var item = $(m);
                item.css('animation-delay', timeDelay + 'ms');
                timeDelay = timeDelay + 180;
                item.addClass(item.data('animation'));
                setTimeout(function () {
                    item.removeClass(item.data('animation'));
                }, 2000);
            });
        }

        if ($(n).hasClass('owl-slider-fullscreen')) {
            $('.header-content .item').height($(window).height());
        }
    });
            

Booking

Example booking 1

Example 1: Use class "booking booking-default-theme"

Example booking 2

Example 2: Use class "booking booking-inner"

Booking markup

            <div class="booking"> <!--for slider overflow use 'booking-inner' class-->

    <div class="container">

        <!--=== booking-wrapper ===-->

        <div class="booking-wrapper">
            <div class="row">

                <!--=== date arrival ===-->

                <div class="col-xs-4 col-sm-3">
                    <div class="date" id="dateArrival" data-text="Arrival">
                        <input class="datepicker" readonly="readonly" />
                        <div class="date-value"></div> 
                    </div>
                </div>

                <!--=== date departure ===-->

                <div class="col-xs-4 col-sm-3">
                    <div class="date" id="dateDeparture" data-text="Departure">
                        <input class="datepicker" readonly="readonly" />
                        <div class="date-value"></div>
                    </div>
                </div>

                <!--=== guests ===-->

                <div class="col-xs-4 col-sm-2">

                    <div class="guests" data-text="Guests">
                        <div class="result">
                            <input class="qty-result" type="text" value="2" id="qty-result" readonly="readonly" />
                            <div class="qty-result-text date-value" id="qty-result-text"></div>
                        </div>

                        <!--=== guests list dropdown ===-->

                        <ul class="guest-list">

                            <li class="header">
                                Please choose number of guests
                            </li>

                            <!--=== adults ===-->

                            <li class="clearfix">

                                <!--=== Adults value ===-->

                                <div>
                                    <input class="qty-amount" value="2" type="text" id="ticket-adult" data-value="2" readonly="readonly" />
                                </div>

                                <div>
                                    <span>Adults <small>16+ years</small></span>
                                </div>

                                <!--=== Add/remove quantity buttons ===-->

                                <div>
                                    <input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-adult" />
                                    <input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-adult" />
                                </div>

                            </li>

                            <!--=== chilrens ===-->

                            <li class="clearfix">

                                <!--=== Adults value ===-->

                                <div>
                                    <input class="qty-amount" value="0" type="text" id="ticket-children" data-value="0" readonly="readonly" />
                                </div>

                                <!--=== Label ===-->

                                <div>
                                    <span>Children <small>2-11 years</small></span>
                                </div>


                                <!--=== Add/remove quantity buttons ===-->

                                <div>
                                    <input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-children" />
                                    <input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-children" />
                                </div>

                            </li>

                            <!--=== Infants ===-->

                            <li class="clearfix">

                                <!--=== Adults value ===-->

                                <div>
                                    <input class="qty-amount" value="0" type="text" id="ticket-infants" data-value="0" readonly="readonly" />
                                </div>

                                <!--=== Label ===-->

                                <div>
                                    <span>Infants <small>Under 2 years</small></span>
                                </div>

                                <!--=== Add/remove quantity buttons ===-->

                                <div>
                                    <input class="qty-btn qty-minus" value="-" type="button" data-field="ticket-infants" />
                                    <input class="qty-btn qty-plus" value="+" type="button" data-field="ticket-infants" />
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!--=== button ===-->

                <div class="col-xs-12 col-sm-4">
                    <a href="reservation-1.html" class="btn btn-clean">
                        Book now
                        <small>Best Prices Guaranteed</small>
                    </a>
                </div>

            </div> <!--/row-->
        </div><!--/booking-wrapper-->
    </div> <!--/container-->
</div> <!--/booking-->
            

Initalize the calendar & guest list

                // Datepicker
    // ------------------------------------------------------

    // Default calendar namespaces
    var dateFormat = "<span class='day'>d</span> <span class='month'>M</span> <span class='year'>yy</span>",
        dateArrival = '#dateArrival input',
        dateDeparture = '#dateDeparture input',
        dateArrivalVal = '#dateArrival .date-value',
        dateDepartureVal = '#dateDeparture .date-value';

    // Show arrival calendar
    $(dateArrival).datepicker({
        minDate: 'D',
        dateFormat: dateFormat,
        // get value on selected date for departure
        onSelect: function (txt, inst) {
            $(dateDepartureVal).html(txt);
            $(dateArrivalVal).html($(dateArrival).val());
        },
        onClose: function (selectedDate) {
            $(dateDeparture).datepicker("option", "minDate", selectedDate);
        }
    });

    // Show departure calendar
    $(dateDeparture).datepicker({
        minDate: 'D',
        dateFormat: dateFormat,
        // get value on selected date for return
        onSelect: function (txt, inst) {
            $(dateDepartureVal).html(txt);
            $(dateDepartureVal).html($(dateDeparture).val());
        }
    });

    // set current date
    $('.datepicker').datepicker('setDate', 'today');
    // get current value from departure 
    $(dateArrivalVal).html($(dateArrival).val());
    // get current value from return
    $(dateDepartureVal).html($(dateDeparture).val());
    // hide return input field
    updateGuestNumber();
    // update number of guest list


    // Guests 
    // -------------------------------------------------------

    var $guests = $('.guests'),
        $guestList = $('.guests *');

    // Guest list toogle event - dropdown
    $('.guests .result').on('click', function (e) {
        e.stopPropagation();
        $guests.toggleClass("show");
    });

    // Close on page click
    $(document).on("click", function (e) {
        if (!$(e.target).is($guestList)) {
            $guests.removeClass("show");
        }
    });

    // Quantities (add remove guests numbers) 
    // -------------------------------------------------------

    $('.qty-plus').add('.qty-minus').click(function (e) {
        e.preventDefault();

        var $this = $(this),
            fieldName = $this.attr('data-field'),
            $input = $('input#' + fieldName);

        var currentVal = parseInt($input.data('value')),
            ticketType = $input.data('tickettype');

        if (!isNaN(currentVal)) {
            var isChanged = false,
                value = 0;

            if ($this.hasClass('qty-plus') && currentVal < 12) {
                value = currentVal + 1;
                isChanged = true;
            }

            if ($this.hasClass('qty-minus') && currentVal > 0) {
                value = currentVal - 1;
                isChanged = true;
            }

            if (isChanged) {
                $input.data('value', value);
                $(ticketType).val(ticketType + '-' + value);
                $input.val(value);
                // Update guests number
                updateGuestNumber();
            }
        }
    });

    // Passangers result
    function updateGuestNumber() {
        var adult = $('#ticket-adult').val(),
            children = $('#ticket-children').val(),
            infants = $('#ticket-infants').val(),
            qty = $('#qty-result');
        qty.val(parseInt(adult) + parseInt(children) + parseInt(infants));
        // DOM results
        $('#qty-result-text').text(qty.val());
    }
            

Stretcher widget

Stretcher widget is custom made grid stretcher, and it support only 4 elements for inline display.

Markup

            <section class="stretcher-wrapper">
    <!-- === stretcher === -->
    <ul class="stretcher">
        <!-- === stretcher item === -->
        <li class="stretcher-item" style="background-image:url(...);">
            <!--logo-item-->
            <div class="stretcher-logo">
                <div class="text">
                    <span class="f-icon f-icon-bedroom"></span>
                    <span class="text-intro">...</span>
                </div>
            </div>
            <!--main text-->
            <figure>
                <h4>Your title ...</h4>
                <figcaption>Description ...</figcaption>
            </figure>
            <!--anchor-->
            <a href="#">Anchor link (this text will not be visable)</a>
        </li>
        <li>
            ...
        </li>
        <!-- === stretcher item more=== -->
        <li class="stretcher-item more">
            <div class="more-icon">
                <span data-title-show="Show more" data-title-hide="+"></span>
            </div>
            <a href="#"></a>
        </li>
    </ul>
</section>
            
            

Javascript:

                // Strecher accordion
    // ----------------------------------------------------------------

    var $strecherItem = $('.stretcher-item');
    $strecherItem.bind({
        mouseenter: function (e) {
            $(this).addClass('active');
            $(this).siblings().addClass('inactive');
        },
        mouseleave: function (e) {
            $(this).removeClass('active');
            $(this).siblings().removeClass('inactive');
        }
    });
            

Image blocks

The markup

            <div class="image-blocks"> use 'image-blocks-theme' for background adjustment or 'image-blocks-header' with section-header

    <div class="container">

        <!--item block -->

        <div class="blocks blocks-left"> <!--use 'blocks-left' or 'blocks-right' class for image position-->
            <div class="item">
                <div class="text">

                    <!-- === room info === -->

                    <h2 class="title">
                        ...
                    </h2>
                    <p>
                        ...
                    </p>

                    <!-- === room facilities === -->

                    <div class="room-facilities">

                        <!--=== icon ===-->

                        <figure>
                            <figcaption><i class="hotelicon hotelicon-guest"></i> 4 Persons</figcaption>
                        </figure>

                        <!--=== icon ===-->

                        <figure>
                            <figcaption><i class="hotelicon hotelicon-roomservice"></i> Room service</figcaption>
                        </figure>

                        <!--=== icon ===-->

                        <figure>
                            <figcaption><i class="hotelicon hotelicon-king-bed"></i> Kingsize bed</figcaption>
                        </figure>

                        <!--=== icon ===-->

                        <figure>
                            <figcaption><i class="hotelicon hotelicon-kitchen"></i> All inclusive</figcaption>
                        </figure>

                        <!--=== icon ===-->

                        <figure>
                            <figcaption><i class="hotelicon hotelicon-compas"></i> 460 sqft room</figcaption>
                        </figure>

                        <!--=== icon ===-->

                        <figure>
                            <figcaption><i class="hotelicon hotelicon-tv"></i> TV</figcaption>
                        </figure>

                    </div>

                    <!-- === booking === -->

                    <div class="book">
                        <div>
                            <a href="room-overview.html" class="btn btn-clean btn-lg">...</a>
                        </div>
                        <div>
                            <span class="price h2">...</span>
                            <span>...</span>
                        </div>
                    </div> <!--/booking-->

                </div><!--/text-->
            </div> <!--/item-->

            <!-- == image === -->

            <div class="image" style="background-image:url(...)">
                <img src="..." alt="" />
            </div>
        </div>

    </div> <!--/container-->
</div> <!--/image-blocks-->    
            

Rooms widget

Markup carousel

            
<div class="rooms rooms-widget">

    <!-- === rooms header === -->

    <div class="section-header">
        <div class="container">
            <h2 class="title">
                ... 
                <a href="rooms-category.html" class="btn btn-sm btn-clean-dark">Link</a>
            </h2>
            <p>
                ...
            </p>
        </div>
    </div>

    <!-- === rooms content === -->

    <div class="container">

        <div class="owl-rooms owl-theme">

            <!-- === rooms item === -->

            <div class="item">
                <article>

                    <!-- === image === -->

                    <div class="image">
                        <img src="..." alt="" />
                    </div>

                    <!-- === details === -->

                    <div class="details">
                        <div class="text">
                            <h2 class="title">
                                ...
                            </h2>
                            <p>
                                ...
                            </p>
                        </div>
                        <div class="book">
                            <div>
                                <a href="room-overview.html" class="btn btn-main">...</a>
                            </div>
                            <div>
                                <span class="price h2">...</span>
                                <span>...</span>
                            </div>
                        </div>
                    </div>
                </article>
            </div>

        </div><!--/owl-rooms-->
    </div> <!--/container-->
</div> <!--/room-widget-->    
            

Javascript

            // Rooms carousel
// ----------------------------------------------------------------

var arrowIcons = [
    '<span class="icon icon-chevron-left"></span>',
    '<span class="icon icon-chevron-right"></span>'
];

$.each($(".owl-rooms"), function (i, n) {
    $(n).owlCarousel({
        autoHeight: false,
        pagination: true,
        navigation: true,
        navigationText: arrowIcons,
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 2],
        itemsTablet: [768, 2],
        itemsTabletSmall: true,
        itemsMobile: [479, 1],
        addClassActive: true,
        autoPlay: 5500,
        stopOnHover: true
    });
});    
            

Facility tabs

Markup tabs

            <div class="facility">

    <!-- === facility-addons === -->

    <div class="facility-addons">

        <!-- === nav-tabs === -->

        <ul class="nav nav-tabs" role="tablist">

            <li role="presentation" class="active">
                <a href="#menus" aria-controls="menus" role="tab" data-toggle="tab">
                    <i class="hotelicon hotelicon-kitchen"></i>
                    <span class="visible-md visible-lg">Tab item</span>
                </a>
            </li>

            <li>
                ...
            </li>
        </ul>

        <!-- === tab-panes === -->

        <div class="tab-content">

            <!-- ============ tab #1 ============ -->

            <div role="tabpanel" class="tab-pane active" id="menus">
                <div class="content">
                    ...

                </div>
            </div>

        </div> <!--/tab-content-->

    </div> <!--/facility-addons-->
</div> <!--/facility-->
            

Credits

Images

• Unsplash
• Pexels
• Pixabay
• Morguefile

jQuery

• Owl Carousel
• Magnific popup
• Ion RangeSlider

CSS

• Bootstrap
• Animate.css
• Linear icons
• Source Sans Pro - Google Fonts
• Roboto - Google Fonts