Official Documentation Joomla® Vik Extensions by e4j

Template Hotelier Documentation

Hotelier Template Documentation

Template Hotelier

Hotelier template documentation
(based on VikBooking extension)

Installation
Template installation

Step 1 - Install E4J Hotelier template

After unziped the .zip file, from your back-end setting panel, go to: "Extensions → Extension Manager", browse E4J Hotelier installation package of your Joomla version then hit the "Upload and Install"

Joomla Template installation

 

Step 2 - Set default template style

Go to: "Extensions → Template Manager", set E4J Hotelier template style as your default template style.

Joomla Template installation success

Install all the modules

Here the list of all the modules that we used in the our demo website :

Vik Content Slider

Vik Wall Image

Vik Social Icon

Vik Booking Rooms

Vik Booking Horizontal Search (you can find it in the VikBooking Extension)

Template settings

In this page you can choose the color variation your prefer for your website.

Extensions -> Template Manager -> E4JHotelier

template color layout

Template Fonts

You can choose different fonts and size for the website’s body and headers.

template variations

 

This parameter allow your header to stay up to the website when you are scrolling this one.

template menu fixed params

This is a preview:

template menu fixed example

Responsive layout for all the devices

You can chose if make your website compatible with all the devices with this parameter.

joomla template responsive params

This is a preview:

joomla template responsive example

Set up your logo

The Logo is actually a simple image element. In Joomla we are using a Custom HTML module published on the template logo position for it to display.

Go to Extensions » Modules Manager. Click on New. Select a Custom HTML module.

And fill the Textarea field with your image. After publishing the module, the logo will display in the template.

 

Set up Joomla Main Menu

Create the menu

After installation of the template click on Menus » Menu Manager Menu » Add New Menu in the administration menu on top. Give it a name and click on Save & Close.

You can now assign menu items to the menu. Click on Menus » YOUR MENU » Add New Menu Item.

Assign the menu

Before the menu works properly in your template, you have to assign it to a menu module published on the mainmenu module position. To achieve this, click on Extensions » Module Manager » New. Choose Menu. Next publish the module on the mainmenu position of the template.

joomla main menu params

Modules configuration
Setup the slider module

This module allows you to create an images slides with an easy procedure, with the "Add Slide" button you could add all the slider you need.

Module-position: slider-fullscreen
  • Background image This field allow you to choose the images
  • Title slide In this field you can write the title of your slide
  • Text This is the field for the description of your slide
  • Read More link In this field you may to insert a link for your slide 

joomla slider module

Vik Wall Image

This module allow you to insert a big image as a background of a particular template area.

Module-position: fullbox

Module's fields:

  • Background - with this parameter you can insert the background image that you want.
  • Your content - here you can insert all the content that you want to be showed over the image.

vik wall image

In our demo website the newsletter element is not a real module but just html code, we don't have any newsletter module.

The social buttons over this module are the Vik Social Icons module, we'll speak about it in the next chapter.
To embed an external module inside another module, like in our case, you have to use the code of Joomla, to do so, follow these steps:
1. Open the module that you want integrate and give it a custom position, in our example is "social".
2. Check that it'll be display in all the pages of your Joomla website and save it.
3. Open Vik Wall Image and click the Toogle button of the textarea editor.
4. This button will show you the code of your textarea, copy the code , then click again on the Toogle button, it'll bring back your editor.
5. Write the content you want or align it in the way you want, before to save it, enable the Prepare contentthat you can find in the Options label of this module.

  • Enable Mask - This command create a mask over your image, in this way, if you'll write some text you can read it more easily.
  • Color Mask - With this colorpicker you can decide the color of your mask
  • Level opacity mask - With this parameter you can decide how need to be transparent your mask
  • Prepare content - it's the parameter that you need to enable if you want embed some modules using in the textarea of Vik Wall Image

Backend example 1 - Backend example 2

Here the code of our demo website that you can easily copy in your textarea:

<h2 style="text-align: center;">FOLLOW OUR OFFERS</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla purus id risus blandit vestibulum. <br /><br /></p>
<div style="text-align: center;">{loadposition social}</div>
Vik Social Icons

With this module you can easily use all the most famous social networks just putting your social link in the Link parameter of this module.

vik social icons

Vik Booking Rooms

This module will show all the rooms of your facility, you can decide how many rooms do you want to show in the first display and how do you want to scroll them.

For this module you can choose between two layout through the Layout parameter.

vik booking rooms - params


Default
parameter:

vik booking rooms - default param

 

Price left parameter:

vik booking rooms - priceleft param

HTML Modules variations
Activities modules

joomla custom html module


This module is a custom html module, to create this kind of content you have to have an image with square dimension, an example: 160x160, otherwise the module can't fit well your images.

To have this structure you have to copy the code below and paste it in your custom html module through the "Toggle editor" button in the custom html editor.

The code to copy is:

<div class="activities-cnt">
    <!-- Start First Block -->
    <div class="activities-cnt-inner">
        <div class="activities-cnt-img">
            <a href="#"><img src="images/horses-activities.jpg" alt="" /></a>
        </div>
        <div class="activities-cnt-text">
            <h4>Trip with horses</h4>
            <p>Cras pretium non leo sed feugiat. In venenatis odio convallis ipsum feugiat, ac pretium risus ullamcorper. Mauris convallis ac est ac commodo.</p>
        </div>
    </div>
    <!-- End First Block -->
    <!-- Start Second Block -->
    <div class="activities-cnt-inner">
        <div class="activities-cnt-img"><img src="images/scuba-diving.jpg" alt="" /></div>
        <div class="activities-cnt-text">
            <h4>Scuba Diving</h4>
            <p>Cras pretium non leo sed feugiat. In venenatis odio convallis ipsum feugiat, ac pretium risus ullamcorper. Mauris convallis ac est ac commodo.</p>
        </div>
    </div>
    <!-- End Second Block -->
    <!-- Start Third Block -->
    <div class="activities-cnt-inner">
        <div class="activities-cnt-img"><img src="images/trip-activities.jpg" alt="" /></div>
        <div class="activities-cnt-text">
            <h4>Amazing Trip</h4>
            <p>Cras pretium non leo sed feugiat. In venenatis odio convallis ipsum feugiat, ac pretium risus ullamcorper. Mauris convallis ac est ac commodo.</p>
        </div>
    </div>
    <!-- End Third Block -->
<!-- Start Fourth Block -->
    <div class="activities-cnt-inner">
        <div class="activities-cnt-img"><img src="images/trip-activities.jpg" alt="" /></div>
        <div class="activities-cnt-text">
            <h4>Hotel Animation</h4>
            <p>Cras pretium non leo sed feugiat. In venenatis odio convallis ipsum feugiat, ac pretium risus ullamcorper. Mauris convallis ac est ac commodo.</p>
        </div>
    </div>
    <!-- End Fourth Block -->
</div>

As you can read from the grey write "Start/End of the first block", this is the code that you need to copy and paste every time that you need to add a new box.

Then you have to replace the images and the text with your informations.

 

Other modules
Login module

As you can see in our demo website, we used a particular login display, to have this kind of layout, please, follow this instructions:

joomla login module

We used the Basic login module of Joomla. 
Go to Extensions » Modules Manager. Click on New. Select a Login module

Module-position: upmenu-right
Class-suffix: loginmenu 
Languages switcher module

To have a multilanguage website you can use the native language manager of Joomla, in our demo website we used the Languages switcher module.
Go to Extensions » Modules Manager. Click on New. Select a Languages switcher

With this module you can choose if you want a dropdown list of your languages or just the little flags listed, we used the dropdown display:

joomla module languages switcher

Module-position: upmenu-right
Class-suffix: langtab

To see how we setup this module in the Back-end: Page 1 Page 2

Module variations

To customize your website you can use the class suffix for different modules, all the class suffix need to be written with a white space just before, in this way:

joomla module class suffix

you can also use more than one class suffix, in the case that you want mix two kind of layout, an example a centered title with borders (you can read about those class just below), in the case that you want mix both the class you always need to leave a white space between them, in this way:

joomla module class suffix combo

Here the list of the class suffix that you can use with this template, beside you can see their example:

1. Grey Background

With this class suffix you can have a grey background instead of the default white one.

Class-suffix: grey

module variation grey

2. Title Center

With this class suffix you can have the title of your module centered.

Class-suffix: title-center

module variation title center

3. Middle border

With this class suffix you can have the title of your module with a line aligned vertically. In the below image the class is mixed with the title-center.

Class-suffix: middle-line

module variation middle border

4. Underline title

With this class suffix you can have an underlined title module.

Class-suffix: underline

module variation underline title

5. Border title on the right side

With this class suffix you can have a right border for your module title, the color border depends by your template layout.

Class-suffix: rightborder

module variation border

6. Border title on the left side

With this class suffix you can have a left border for your module title, the color border depends by your template layout.  

Class-suffix: leftborder

module variation border

6. Color module background

With these two class suffix you can have two different colors background, this color depends by the Template layout that you chose.

Class-suffix: color
Class-suffix: color-light

module variation background

7. Footer inline

With this class suffix you'll have yours item menu footer in the same line instead in the classical list view.

Class-suffix: menu-inline
Menu subtitle

To add an item menu subtitle you need to follow this steps:

1. Open the item menu where you want to add your subtitle. Example
2. add two pipes between the first part of your Menu title and the part that you want to be your subtitle. Example
3. Save you item menu

Here it's the Front-end example:

main menu subtitle

Title module double color

To have the title module with two colors, like our demo website, you should use a procedure really similar to the subtitle menu, you have to use two pipes between the two title parts Backend example.

Here the Frontend example:

module subtititle

 

CSS Customizations

From the 1.3 template version has been added the custom.css file to place all your CSS customization. It is recommended to add all your modifications on this file, in this way you'll never lose them, this file will be not overridden in the future template updates.

You can find the file in the panel Extensions > Templates > Templates > e4j Hotelier Details and Files > css > custom.css

Map positions

This is the map position of this template:

joomla map position

Here the pdf version.

Demo website position modules

template demo position

Theme Update

To know how to update the template, please, check our Knowledge Base on this link.

General troubleshooting
jQuery Conflicts

Sometimes happens, when you'd installed all the modules, that the VikBooking Calendar is not working or that the slider has some problems, an example, shows your images one just after the other in one vertical line.

In this case your website has a jQuery Conflicts, it means that too many extensions are loading the jQuery library, to solve this problem you have to disable all the Load jQuery parameters in all the Vik Extensions that are enabled and from the Slider modules either.

 

template jQuery conflicts

Extensionsforjoomla.com is not affiliated with or endorsed by the Joomla!® Project or Open Source Matters.
The Joomla!® name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
E4J s.r.l. - VAT N. 06794860483

This site uses cookies. By continuing to browse you accept their use. Further information