Overview

Template is based on the Warp 7 framework which is fast and powerful template engine.

Template Configuration

Template settings can be accessed under Joomla backend template configuration:

Extensions -> Templates -> cd_bookme

Settings

Modules

Some of the positions has style set to Blank

Layouts

Sidebars columns are set to default:

For the homepage a new layout has been created. System output has been disabled. Layout has been assigned for the home menu. 

Grid & Appearance

Grid and appearance have been set as on the screen above.

Modules

There are several styles available for each module. The basic ones are Box Primary and Box Secondary. For each module header additionally an icon can be set.

Top Header

Place a custom HTML module under TOOLBAR-L position:

Have a Questions? <i class="uk-icon-phone uk-margin-small-left"></i> Call Customer Services on: <span class="call-us-number"> <strong> 800 122 122</strong></span>

Place a custom HTML module under TOOLBAR-R position:

<ul class="social_networks uk-clearfix">
                <li class="facebook">
                    <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                </li>
                                <li class="twitter">
                    <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                </li>
                                <li class="linkedin">
                    <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                </li>
                                <li class="gplus">
                    <a href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
                </li>
                                <li class="rss">
                    <a href="http://realhomes.inspirythemes.biz/feed/?post_type=property" target="_blank"> <i class="fa fa-rss "></i></a>
                </li>
</ul>

Logo must be placed in the LOGO position for the menu to be seen in the Menu position.

 

Logo custom HTML should be placed without any extra tags like <p> otherwise it may appear as two lines. Editor should not be used to place it, just plain HTML e.g.

<img src="images/logo.jpg" alt="logo" />

When using Editor additional <p></p> tags are being added causing additional height. 

 

Logo Small 

Logo small can be placed on the LOGO-SMALL position to show on the mobile menu  

Menu

Place Menu Module under MENU position.

Responsive Menu

In order to make the menu responsive, create a copy of the MAIN MENU and place it in OFF CANVAS position.

TOP-A

JomHoliday search module with Default layout set.

TOP-B

JomHoliday items module with Clean layout set.

TOP-C

Custom HTML module with content:

<h1 class="uk-margin-remove">How it works?</h1>
<h3 class="uk-margin-small-top">3 easy steps and you're ready to go!</h3>
<div class="uk-grid uk-margin-large-top uk-how-it-works">
    <div class="uk-width-1-3 uk-text-center">
        <i class="fa fa-search" data-uk-scrollspy="{cls:'uk-animation-slide-top, delay:900'}"></i>
        <h5 class="uk-text-primary"><strong>SEARCH</strong></h5>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="uk-width-1-3 uk-text-center">
        <i class="fa fa-heart-o" data-uk-scrollspy="{cls:'uk-animation-slide-bottom, delay:1800'}"></i>
        <h5 class="uk-text-primary"><strong>SELECT</strong> </h5>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="uk-width-1-3 uk-text-center">
        <i class="fa fa-shopping-cart" data-uk-scrollspy="{cls:'uk-animation-slide-top, delay:1800'}"></i>
        <h5 class="uk-text-primary"><strong>BOOK</strong> </h5>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
</div>

TOP-D

JomHoliday Items module with Default layout.

BOTTOM-A

Background image with parallax effect. Custom HTML module:

<div style="height: 450px; background-image: url('images/parallax.jpg'); background-size: 1920px 1013px; background-repeat: no-repeat; background-position: 50% 0px;" data-uk-parallax="{bg: '-400'}" class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">
    <div class="uk-width-medium-1-2">
        <h1 style="color: #FFF">We are <strong>happy</strong> to make you <strong>happier</strong></h1>
        <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="uk-display-block uk-text-large uk-form-width-small uk-container-center" style="border: 3px solid #fff; padding: 10px; color: #fff">View More</a>
    </div>
</div>
background-image: url('images/parallax.jpg'); insert own image here.

BOTTOM-C

Custom HTML module:

<h1 class="uk-margin-large-top">Top Destinations</h1>
<h4>Finest Selection of top destinations</h4>
<div data-uk-grid-margin="" data-uk-grid-match="{target:'&gt; div &gt; .uk-panel', row:true}" class="uk-grid-width-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-4 uk-grid uk-grid-match uk-grid-collapse uk-text-center">
    <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
        <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a>
        <img src="images/destinations/tower.jpg" class="uk-overlay-scale" alt="tower"/>
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
    </figure>
    <div class="uk-panel uk-panel-box">
        <h3>Romantic Getaway</h3>
        <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Paris</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p>
        <h3 class="uk-display-block uk-text-right uk-text-success">$199 / room</h3>
        <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;"><i class="uk-icon-chevron-left"></i> Book Now </a>
    </div>
    <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-top, delay:900'}">
        <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a>
        <img src="images/destinations/img1.jpg" class="uk-overlay-scale" alt="beach"/>
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
    </figure>
    <div class="uk-panel uk-panel-box">
        <h3>Beach Paradise</h3>
        <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Bahamas</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p>
        <h3 class="uk-display-block uk-text-right uk-text-success">$399 / room</h3>
        <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;"><i class="uk-icon-chevron-left"></i> Book Now </a>
    </div>
    <div class="uk-panel uk-panel-box">
        <h3>Familly Fun</h3>
        <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Greece</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p>
        <h3 class="uk-display-block uk-text-right uk-text-success">$220 / room</h3>
        <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;">Book Now <i class="uk-icon-chevron-right"></i></a>
    </div>
    <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-bottom, delay:1800'}">
        <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a>
        <img src="images/destinations/aqua.jpg" class="uk-overlay-scale" alt="familly"/>
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
    </figure>
    <div class="uk-panel uk-panel-box">
        <h3>Friends</h3>
        <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Ibisa</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p>
        <h3 class="uk-display-block uk-text-right uk-text-success">$99 / room</h3>
        <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;">Book Now <i class="uk-icon-chevron-right"></i></a>
    </div>
    <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-right, delay:2700'}">
        <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a>
        <img src="images/destinations/ibisa.jpg" class="uk-overlay-scale" alt="ibisa"/>
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
    </figure>
</div>

BOTTOM-D

Set of 4 menus linked under module MENU.

Maps Wide

In order to use this view you need to have an Ajax Map Search Module paid addon

Create an empty page with no content e.g. empty article and assign an Ajax Map Search Module for that menu, set MAP WIDE layout and MAP HEIGHT to 100vh:

Additionally template must be set in Full Width Content mode. It can be done by creating another profile and enable the Full Width Content switch and Hide System Output:

This new layout must be assigned for the created menu at the bottom of the page:

When edits are finished click SAVE on top of the page.

Create a custom HTML module, and place it under FOOTER position:

© 2016 BookMe. All rights reserved

 

 

  • No labels