# A. Installing the Template

Please note that you need to download the "jm-guest-house.zip" template package. You will find this package in your download area at Joomla-Monster.com. This is the file you will need to use to install the template in Joomla.

Log in to the backend of your site as follows:
www.yoursite.com/administrator

From the top bar menu, click on "Extensions → Extension Manager".
On this page you can install a template, component, module, plugin or language package.

1) On the "Upload Package File" tab – browse your PC and select the template package, click on "Upload & Install".

2) You should get a message saying that installing the template was successful.

3) From the top bar menu, click on "Extensions → Template Manager".
On this page you will see a list of installed templates. Tick on "JM Guest House - Default" and click on "Default" to set this template as the default one.

# B. Installing the Quickstart (Demo Copy)

From your download area at Joomla-Monster.com you need to download the quickstart installation. The package is named as "quickstart.zip" and it will be needed in this step.

Instead of installing the template and all extensions separately, you can simply install the Quickstart package, which is the exact copy of the demo site. This way you will save a lot of time on configuring all settings from a scratch.

In the article below, you will find out the difference between the template and quickstart packages :

http://www.joomla-monster.com/knowledge-base-area/general-questions/about-our-store/what-is-a-quickstart

Quickstart Installation Guide :

# C. Installing the EF4 Framework Plugin

Installing the plugin package looks very similar to installing the template package. From your download area at Joomla-Monster.com you need to download the EF4 Joomla-Monster Framework plugin. The package is named as "plg_EF4-framework.zip" and it will be needed in this step.

From the top bar menu, click on "Extensions → Extension Manager".

1) On the "Upload Package File" tab – browse your PC and select the plugin package, click on "Upload & Install"

2) You should get a message saying that installing the plugin was successful.

3) From the top bar menu, click on "Extensions → Plugin Manager". On this page you will see a list of available plugins in your Joomla. Search for "EF4 Joomla-Monster Framework" plugin and make sure it is published.

# D. Installing the Joomla Extensions

Installing the Joomla Extensions looks also similar to installing the template package.

After the purchase, an account at DJ-Extensions.com was created for you automatically. Please read the important messages that you received on your email.

### 1. DJ-MegaMenu

From your download area at DJ-Extensions.com you need to download the DJ-MegaMenu package. The package is named as "pkg_dj-megamenu-AIO-X.X.X.zip" and it will be needed in this step.

From the top bar menu, click on "Extensions → Extension Manager".

1) On the "Upload Package File" tab – browse your PC and select the extension package, click on "Upload & Install"

2) You should get a message saying that installing the package was successful.

3) The package contains a module and plugin. Once you have installed it, you need to make sure that the plugin is published.
From the top bar menu, click on "Extensions → Plugin Manager". On this page you will see a list of available plugins in your Joomla. Search for "DJ-MegaMenu system plugin" plugin and check the status.

### 2. DJ-MediaTools

From your download area at DJ-Extensions.com you need to download the DJ-MediaTools package. The package is named as "pkg_dj-mediatools-AIO-X.X.X.zip" and it will be needed in this step.

From the top bar menu, click on "Extensions → Extension Manager".

1) On the "Upload Package File" tab – browse your PC and select the extension package, click on "Upload & Install"

2) You should get a message saying that installing the package was successful.

3) The package contains a component, module and plugins.
Once you have installed it, you need to make sure that all plugins are published.
From the top bar menu, click on "Extensions → Plugin Manager". On this page you will see a list of available plugins in your Joomla. Search for DJ-MediaTools plugins and check their status.

### 3. DJ-Catalog2

From your download area at DJ-Extensions.com you need to download the DJ-Catalog2 package. The package is named as "pkg_dj-catalog2-AIO-X.X.X.zip" and it will be needed in this step.

From the top bar menu, click on "Extensions → Extension Manager".

1) On the "Upload Package File" tab – browse your PC and select the extension package, click on "Upload & Install"

2) You should get a message saying that installing the package was successful.

3) Now, you need to copy the JM Guest House theme for DJ-Catalog2.
From your download area at Joomla-Monster.com you need to download the quickstart package.
First of all, you need to unpack this file.
Next step is to transfer the "jm-guest-house" directory from this location:

QUICKSTART/components/com_djcatalog2/themes/

to this location on your server:

ROOT/components/com_djcatalog2/themes/

The JM Guest House theme you will need to set as the default one in the DJ-Catalog2 global configuration.

### 4. DJ-Tabs

From your download area at DJ-Extensions.com you need to download the DJ-Tabs package. The package is named as "pkg_dj-tabs-AIO-X.X.X.zip" and it will be needed in this step.

From the top bar menu, click on "Extensions → Extension Manager".

1) On the "Upload Package File" tab – browse your PC and select the extension package, click on "Upload & Install"

2) You should get a message saying that installing the package was successful.

### 5. DJ-jQueryMonster

From your download area at DJ-Extensions.com you need to download the DJ-jQueryMonster package. The package is named as "plg_system_djjquerymonster-X.X.X.zip" and it will be needed in this step.

From the top bar menu, click on "Extensions → Extension Manager".

1) On the "Upload Package File" tab – browse your PC and select the extension package, click on "Upload & Install"

2) You should get a message saying that installing the package was successful.

3) Once you have installed package, you need to enable this plugin and change their settings.
From the top bar menu, click on "Extensions → Plugin Manager". On this page you will see a list of available plugins in your Joomla. Search for DJ-jQueryMonster plugin and check their status.

4) After installation enable jQuery and jQuery UI settings in plugin configuration.

# E. Transferring Images for Modules

From your download area at Joomla-Monster.com you need to download the quickstart package.
First of all, you need to unpack this file.
Next step is to transfer all files from this location:

QUICKSTART/images/

to this location on your server:

ROOT/images/

We recommend to use Filezilla to transfer files. It is a popular FTP client. Read more details on how to use Filezilla.
If you have such an option, you can also use a file manager in the control panel of your hosting plan.

# F. Configuring the Template Parameters

The "JM Apartments" template is built on the "EF4 Joomla-Monster" framework. It is an advanced framework for Joomla templates, which allows to configure many useful settings using the template parameters.

All parameters are described in the following article:

EF4 Framework Settings

From the top bar menu, click on "Extensions → Template Manager".
On this page you will see a list of installed templates. Click on "jm-guest-house - Default" to edit this template parameters.

Let's take a look on the template parameters of our live demo.
On the first tab you will see the template details:

### 1. Basic Settings

Click on the "Basic Settings" tab. In this section, you are able to configure some basic parameters. Let's take a closer look to them.

### 2. Layout Builder

Click on the "Layout Builder" tab. In this section, you are able to configure the layout structure for desktop, tablet and mobile devices. Let's take a closer look to them.

#### Customize Layout Structure:

#### Customize Responsive Layout:

For all screens we use the default settings:

More about Layout Builder you can read in the following article:

Layout Builder

### 3. Font Settings

Click on the "Font Settings" tab. In this section, you are able to configure all font settings. Let's take a closer look to them.

#### Base Font

Google Web Font URL – all Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: //fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic

Google Web Font Family – default value is: 'Open Sans', sans-serif

#### Horizontal Menu

Google Web Font URL – all Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: //fonts.googleapis.com/css?family=Montserrat:700,400

Google Web Font Family – default value is: 'Montserrat', sans-serif

#### Module Headings

#### Article headings

#### Advanced settings

### 4. Color Modifications

Click on the "Color Modifications" tab. In this section, you are able to configure color settings. Let's take a closer look to them.

### 5. Advanced Features

Click on the "Advanced Features" tab. In this section, you are able to configure some advanced settings regarding your template. Let's take a closer look to them.

### 6. Settings Storage

Click on the "Settings Storage" tab. In this section, you are able to save your current settings into the JSON configuration file.

### 7. Documentation and Updates

On the two last tabs, you will find links to documentation as well as information about the current version of the installed template and its framework.

# G. The Template Files Structure

Let's take a closer look to the template files structure.

assets – inside this directory you will find the "config" subdirectory where all configuration files are stored.
Read more about settings storage.

cache – inside this directory you will find compressed CSS and JS files if you have enabled CSS/JS compression on the Advanced Features tab.

css – all compiled CSS files

fonts – inside this directory all uploaded fonts are stored

html – in this directory you can override the output from the Joomla core.
Read more on how to override the output from the Joomla! Core.

images – template images

js – template scripts

language - template language files

less – all LESS files

lib – template helper files

tpl – all layout and block files

component.php – popup template file

error.php – error page file

favicon.ico – favicon file

index.php – main index file

offline.php – offline page file

template_preview.png – large thumbnail of the template image

template_thumbnail.png - small thumbnail of the template image

templateDefault.json – template default parameters

templateDetails.xml – template details and parameters

# H. Editing the Template Files

If you would like to edit files to fit the template to your needs, check this useful information below.

### 1. Custom Code Injection to the Head Section

Many useful tools such as Google Analytics or other tracking services, require to add a javascript code to the "head" section of template in order to be able to track a site.
Read more on How to add a web analytics tracking code into the Joomla template

### 2. Adding Custom CSS Styles to the Template

The "JM Guest House" template includes a separate file, which you can use to add your custom CSS or LESS styles. This file is loaded as the last one stylesheet in the "head" section of the template, so you can easily overwrite existing CSS styles for selected elements that are located in a different file.
Read more on The best way to add custom CSS styles to Joomla 3 & 2.5 template

# I. Configuring the DJ-MegaMenu Extension

DJ-MegaMenu is an advanced menu system that gives you wide range of possibilities to set up the menu as you need. It allows to set the amount of columns per each menu item, as well as put the modules inside.

### 1. Module Settings

After the DJ-MegaMenu installation, the next step is to set up the module parameters.
From the top bar menu, click on "Extensions → Module Manager". On this page you will see a list of available modules in your Joomla. Search for the DJ-MegaMenu module and click on it.

Let's take a closer look to the most important features:

Position – make sure the module is displayed on the "top-menu-nav" module position.
Read more about module positions.

Status – you need to set "Published" to publish this module

Menu name – choose which menu you want to display within the DJ-MegaMenu module

Theme – choose "Override from template" as the default one

Columns width in pixels – enter the columns width. In the "JM Guest House" template we set 200px for each column

Mobile Menu – choose menu type for mobile devices

Mobile Menu Theme – choose theme for mobile menu

Mobile Menu trigger width – choose when a select box should appear for small screens. We entered 979, it means that the select box appears for screens smaller than 979px.

For more detailed instruction of DJ-MegaMenu, please visit this page:
http://dj-extensions.com/documentation/dj-megamenu/

### 2. Displaying Columns in Submenu

Please read this article on how to display multiple columns in submenu:
http://dj-extensions.com/faq/dj-megamenu-faq/how-to-display-multiple-columns-in-submenu

### 3. Displaying a Module in Submenu

Please read this article on how to display a module in submenu:
http://dj-extensions.com/faq/dj-megamenu-faq/how-to-display-module-inside-the-menu-column

In the submenu of "Services" menu item, we displayed the following modules:

- Menu module
- Article Category module
- Custom HTML modules with video IFRAME

For more FAQ articles regarding the DJ-MegaMenu configuration, please visit this page:
http://dj-extensions.com/faq/dj-megamenu-faq/

### 6. Documentation

DJ-Megamenu Documentation is available here.

# J. Configuring the DJ-MediaTools Extension

DJ-MediaTools extension allows to create slideshows and galleries, insert them into articles, modules or create separate component views.

Let's start with configuring the global options of component.

### 1. Global configuration

From the top bar menu, click on "Components → DJ-MediaTools". On this page you will see the control panel of DJ-MediaTools component. Click on "Options".

For detailed documentation regarding the DJ-MediaTools global options please visit this page:
http://dj-extensions.com/documentation/dj-mediatools/configuration

This is how the "Component Views" tab look on "JM Guest House" live demo:

This is how the "Basic Album Options" tab look on "JM Guest House" live demo:

This is how the "Layout Element Options" tab look on "JM Guest House" live demo:

This is how the "Customize Layout" tab look on "JM Guest House" live demo:

Worth to mention:

1. Previous Button - this is a path to the "Previous" button in the custom navigation.
   The path is: images/modules/navi/prev.png
2. Next Button - this is a path to the "Next" button in the custom navigation.
   The path is: images/modules/navi/next.png
3. Play Button - this is a path to the "Play" button in the custom navigation.
   The path is: images/modules/navi/play.png
4. Pause Button - this is a path to the "Pause" button in the custom navigation.
   The path is: images/modules/navi/pause.png

On the "Upload Settings" and "Permissions" tabs we used the default settings.

### 2. Component Settings

From the top bar menu, click on "Components → DJ-MediaTools". On this page you will see the control panel of DJ-MediaTools component.

The first step is to create an album for your slides.

#### Albums

In the DJ-MediaTools control panel click on "Albums".

On this page all albums are displayed. Take a look on a list of albums on "JM Guest House" live demo:

To create a new album, click on "New". Read more on how to create a new album.

This is an example of the edited album:

Once, you have created an album with custom items as album source, you can pass on to create your first custom item.

#### Custom items

In the DJ-MediaTools control panel click on "Custom items".

On this page all custom items are displayed. Take a look on a list of custom items on "JM Guest House" live demo:

To create a new custom item, click on "New". Read more on how to create a new custom item.

This is an example of the edited custom item:

### 3. Displaying Component on Website

The DJ-MediaTools includes two component views. You can see them all on live demo:

In the following article you will find out on how to display the DJ-MediaTools component on website.

### 4. Module Settings

The DJ-MediaTools extension includes one module.

#### DJ-MediaTools Album

This module allows to display an album in one of several layouts. You can display this module on one of the available module positions in the template.

Let's create a new DJ-MediaTools Album module. From the top bar menu, click on "Extensions → Module Manager". On this page you will see a list of created modules, click on "New".

On the next page you will see a list of all modules available in your Joomla. Click on "DJ-MediaTools Album".

On this page you will see a form of adding a new DJ-MediaTools Album module.

Worth to mention:

1. Title - enter a module title. A module must have a title, otherwise you won't be able to save the module.
2. Position - select a module position. This way you will put a module on the desired place.
   Read more details regarding the module positions.
3. Album - choose an album which you want to display within the module
4. Album layout - choose the album layout which you want to display within the module

If you leave an empty option or as inherit, it will take settings from global configuration.
The hierarchy of inheriting from lowest to highest priority: Global configuration » Album settings » Module settings

Read more about DJ-MediaTools Album module.
When you complete the form, click on "Save & Close" to save the module.

On "JM Guest House" live demo we have displayed three DJ-MediaTools Album modules. Check the parameters we have added for each of them:

1. Header-bg Mediatools - on the "header-bg" module position.
2. Header-bg Mediatools Nivo - on the "header-bg" module position.
3. Team Jane Doe Mediatools - on the "bottom2-1" module position.

   Worth to mention:

   - Module Class Suffix - we used module suffix "noimage-ms navigation-ms".
     Read more about module suffixes in this template.
4. Gallery - on the "content-bottom" module position.

   Worth to mention:

   - Module Class Suffix - we used module suffix "grid-ms".
     Read more about module suffixes in this template.

### 5. Plugins Settings

The DJ-MediaTools extension includes several plugins that you can use on your website.

From the top bar menu, click on "Extensions → Plugin Manager". On this page you will see a list of all plugins.

#### Album Source Plugins

This is a list of available album source plugins in the DJ-MediaTools extension.

- DJ-MediaTools Source - Joomla Content
- DJ-MediaTools Source - DJ-Catalog2
- DJ-MediaTools Source - DJ-Classifieds
- DJ-MediaTools Source - Folder
- DJ-MediaTools Source - K2
- DJ-MediaTools Source - VirtueMart
- DJ-MediaTools Source - EasyBlog
- DJ-MediaTools Source - HikaShop

Read more about album source plugins.

#### Other Plugins

Beside the album source plugins, there are also two additional plugins.

- DJ-MediaTools content plugin - this plugin allows to display an album inside article.
  Read more about DJ-MediaTools content plugin.
- DJ-MediaTools editor button - this plugin displays a button in Joomla editor.
  Read more about DJ-MediaTools editor button.

### 6. Documentation

DJ-MediaTools Documentation is available here.

# K. Configuring the DJ-Catalog2 Extension

DJ-Catalog2 is a simple and powerful directory/catalogue solution. Brilliantly fills a gap in the available extensions. This is the perfect choice if you need product catalogue and e-commerce like features without the complications of shopping cart/payments functionality. DJ-Catalog2 is really simple to setup and provides neat, modern output without need of advanced configuration (if you don't need to).

Let's start with configuring the global options of component.

### 1. Options

From the top bar menu, click on "Components → DJ-Catalog2". On this page you will see the control panel of DJ-Catalog2 component. Click on "Options".

This is how the "Options" look on "JM Guest House" live demo:

Worth to mention:

- Theme - Remember always set proper DJ-Catalog2 Theme otherwise extension will use default styles.

On the other tabs we used default settings.

### 2. Component Settings

From the top bar menu, click on "Components → DJ-Catalog2". On this page you will see the control panel of DJ-Catalog2 component.

The first step is to create Categories.

#### Categories

In the DJ-Catalog2 control panel click on "Categories".

On this page all categories are displayed. Take a look on a list of categories on "JM Guest House" live demo:

To create a new category, click on "New".

Example category in JM Guest House live demo.

Once, you have created a category, you can pass on to create producers.

#### Producers

In the DJ-Catalog2 control panel click on "Producers".

On this page all producers are displayed. Take a look on a list of producers on "JM Guest House" live demo:

To create a new producer, click on "New".

This is an example of the edited item:

#### Extra fields

In the DJ-Catalog2 control panel click on "Field groups".

On this page all field groups are displayed. To create a new custom item, click on "New".

Once, you have created a field group, you can pass on to create extra fields. In the DJ-Catalog2 control panel click on "Extra fields".

On this page all extra fields are displayed. Take a look on a list of fields on "JM Guest House" live demo:

To create a new field, click on "New".

This is an example of the field:

#### Products

Finaly you can create products. In the DJ-Catalog2 control panel click on "Products".

On this page all products are displayed.

To create a new product, click on "New".

This is an example product:

### 4. Modules

The DJ-Catalog2 extension includes eight modules.

You can display these modules on all available module positions in the template.

#### DJ-Catalog2 Cart Module

This module allows to display cart.

#### DJ-Catalog2 Categories

This module allows to display categories.

#### DJ-Catalog2 Filters Module

This module allows to display filters.

#### DJ-Catalog2 Frontpage

This module allows to display items.

This is how module options look on "JM Guest House" live demo:

#### DJ-Catalog2 Items

This module allows to display items.

This is how module options look on "JM Guest House" live demo:

#### DJ-Catalog2 Search Module

This module allows to display search field.

### 6. Documentation

DJ-Catalog2 Documentation is available here.

# L. Configuring the DJ-Tabs Extension

DJ-Tabs extension allows to display tabs and accordion, insert them into articles, modules or create separate component views.

Let's start with configuring the global options of component.

### 1. Global configuration

From the top bar menu, click on "Components → DJ-Tabs". On this page you will see the control panel of DJ-Tabs component. Click on "Options".

This is how the "Article Options" tab looks on "JM Guest House" live demo:

This is how the "Tabs/Accordion Options" tab looks on "JM Guest House" live demo:

### 2. Component Settings

From the top bar menu, click on "Components → DJ-Tabs". On this page you will see the control panel of DJ-Tabs component.

The first step is to create group for your tabs.

#### Groups

In the DJ-Tabs control panel click on "Groups".

On this page all groups are displayed. Take a look on a list of groups on "JM Guest House" live demo:

To create a new group, click on "New".

This is an example of the edited group:

Once, you have created a group, you can pass on to create your first tab item.

#### Items

In the DJ-Tabs control panel click on "Items".

On this page all items are displayed. Take a look on a list of items on "JM Guest House" live demo:

To create a new custom item, click on "New".

This is an example of the edited item:

Worth to mention:

1. Name - enter a tab title. A tab must have a title, otherwise you won't be able to save the tab
2. Group - select a group. This way you will put tab in selected group.
3. Type - choose source of tab content (Single Article, Article Category, Module position or Video)

On the other tabs we used the default settings. You can override global DJ-Tabs settings in this tab for particular item.

### 4. Module Settings

The DJ-Tabs extension includes one module.

#### DJ-Tabs Module

This module allows to display tabs. You can display this module on one of the available module positions in the template.

Let's create a new DJ-Tabs module. From the top bar menu, click on "Extensions → Module Manager". On this page you will see a list of created modules, click on "New".

On the next page you will see a list of all modules available in your Joomla. Click on "DJ-Tabs".

On this page you will see a form of adding a new DJ-MediaTools Album module.

Worth to mention:

1. Title - enter a module title. A module must have a title, otherwise you won't be able to save the module.
2. Position - select a module position. This way you will put a module on the desired place.
   Read more details regarding the module positions.
3. Group - choose a group which you want to display within the module
4. Theme - choose module DJ-Tabs Theme
5. Layout - choose the module layout (Tabs or Accordion)

Read more about DJ-Tabs.
When you complete the form, click on "Save & Close" to save the module.

On "JM Apartments" live demo we have displayed one DJ-Tabs Ablum module. Check the parameters we have added for each of them:

1. Tabs Front - on the "top1-1" module position.

### 6. Documentation

DJ-Tabs Documentation is available here.

# M. Module Positions in the Template

This Joomla template is using fully responsive layout that adjusts to various screens: desktops, tablets or mobiles.
EF4 Framework includes Layout Builder tool which allows you to customize template layout for different screen dimensions.

### Module positions for normal and large screen usually desktop and tablet landscape (980px and higher)

Check out more details about layout customization!

### Module positions for medium screen usually tablet (768px-979px)

Check out more details about layout customization!

### Module positions for small screen usually tablet portrait and mobile landscape (481px-767px)

Check out more details about layout customization!

### Module positions for extra small screen usually mobile portrait (480px and smaller)

Check out more details about layout customization!

# N. Module Suffixes in the Template

There are additional module designs available that you can control by entering a correct suffix name as a module parameter.
Let's check them all.

1. Available module designs

2. Use the following suffixes for Custom HTML module if you want to get the following view for module

Suffix name: promo1-ms (first module) promo2-ms (second module) promo3-ms (third module)

Additional suffix name: animate-ms

3. Use the following suffixes for Search module if you want to get the following view for module. Otherwise a module will use the default css styles.

Suffix name: search-ms

4. Use the following suffixes for DJ-Mediatools (Slider view) module if you want to display only content.

Suffix name: noimage-ms

5. Use the following suffixes for DJ-Mediatools module if you want to get the following view for navigation.

Suffix name: navigation-ms

6. Use the suffix for module to reduce space below module.

Suffix name: margin-ms

7. Additional and very useful suffix to make your modules height the same.
You just have to put a suffix at a module configuration to get the specified module height.
See here the screenshot:

_mod300 means that your module will be of 300 pixels high.
If you need to mix suffixes, remember to put that suffix at the end and add space between suffixes, see the example:

# O. Module images in the Template

The JM Guest House template provides modules with images. If you want change images, simply override images in selected localizations.

Files size:

1. Width - 370px
2. Height - 225px

Files localization:

1. Perfect for families Boxes
   'joomla/images/sample/box1.jpg'
   'joomla/images/sample/box2.jpg'
   'joomla/images/sample/box3.jpg'
2. DJ-Tabs content
   'joomla/images/sample/tabs1.jpg'
   'joomla/images/sample/tabs2.jpg'
   'joomla/images/sample/tabs3.jpg'

Files size:

1. Width - 130px
2. Height - 130px

Files localization:

1. Team
   'joomla/images/team/team1.jpg'
   'joomla/images/team/team2.jpg'
   'joomla/images/team/team3.jpg'

We recommend to use Filezilla to transfer files. It is a popular FTP client. Read more details on how to use Filezilla.
If you have such an option, you can also use a file manager in the control panel of your hosting plan.

# P. Typography

The JM Guest House extended typography you can see here.

In the typography article you will find some examples of custom code used in the template.
Read more on how to create a custom HTML module.

# Q. Setting up the Front Page

Let's start setting up the front page. The first thing is to set up the component view.

### Component View

On "JM Guest House" live demo, we need to hide component part on the front page.

From the top bar menu, click on "Extensions → Template Manager → JM Guest House → Basic Settings ". On this page you will see available settings.

Click on "Home" to disable component view in this menu item. If you want select multiple menu items you need press control button.

Now, click on "Save & Close" to save settings.

### Header Modules

#### Header Modules - DJ-Mediatools Module

1. The "Header-bg Mediatools" module is a DJ-MediaTools Album module published on the "header-bg" module position.
Screenshots and description for this module you will find in the DJ-MediaTools module settings section.

2. This is a Custom HTML module published on the "header" module position. The custom code you need to paste you will find in typography article.

### Navigation Modules

#### DJ-Megamenu

This is a DJ-Megamenu module published on the "top-menu-nav" module position.
Screenshots and description for this module you will find in the DJ-Megamenu module settings

### Top1 Modules

#### Dear Guests - Custom HTML Module

This is a Custom HTML module published on the "top1-1" module position. The custom code you need to paste you will find in typography article.

#### Boxes Rooms and Suites / Perfect for families - Custom HTML Module

This is a Custom HTML module published on the "top1-1" module position. The custom code you need to paste you will find in typography article.

### Colorful Line

#### Colorful line 1 - Custom HTML Module

This is a Custom HTML module published on the "colorful-line" module position. The custom code you need to paste you will find in typography article.

### Top2 Modules

#### About our Guest House - Custom HTML Module

The "About our Guest House" module is a Custom HTML module published on the "top2-1" module position. The custom code you need to paste you will find in typography article.

### Content Modules

#### Location - Custom HTML Module

The "Location" module is a Custom HTML module published on the "left-column" module position. The custom code you need to paste you will find in typography article.

#### Visit us any time - Custom HTML Module

The "Visit us any time" module is a Custom HTML module published on the "content-top" module position.

#### Tabs Front - DJ-Tabs Module

The "Boxes" module is a DJ-Tabs module published on the "right-column" module position. Screenshots and description for this module you will find in the DJ-Tabs module settings

### Bottom1 Modules

#### See Gallery - Custom HTML Module

The "See Gallery" module is a custom html module published on the "bottom1-1" module position. The custom code you need to paste you will find in typography article.

### Bottom2 Modules

#### Team Jane Doe Mediatools - DJ-Mediatools Module

The "Team Jane Doe Mediatools" module is a DJ-MediaTools Album module published on the "bottom2-1" module position.
Screenshots and description for this module you will find in the DJ-MediaTools module settings section.

### Footer Modules

#### Our hotel / Services / Areas / Info - Articles - Category Module

These modules are a Articles - Category modules published on the "footer-mod-1", "footer-mod-2", "footer-mod-3" and "footer-mod-4" module position.

### Copyright Modules

#### Copyright - Custom HTML Module

This is a Custom HTML module published on the "copyright" module position.

# R. Other Pages

On "JM Guest House" live demo, we also displayed some Joomla component views.
Let's take a look on the most interesting ones.

### Single Contact

On the "Single Contact" view you can display some information about your company as well as the contact form.
Read more on how to configure single contact.

### Pagebreak - Tabs or Accordion

Joomla has a built-in feature that allows to display tabs or accordion in an article.

From the top bar menu, click on "Content → Article Manager → Add New Article" to create a new article.

Now, click on "Pagebreak" button to create first tab/slide.

A popup window will appear where you need to enter a title.

Click on "Insert Page Break" and now you can add your content that you want to show within the first tab/slide. Repeat this for more tabs/slides.

Save the article.

In the "Content - Pagebreak" plugin you can choose on which way you want to display the pagebreak.

From the top bar menu, click on "Extensions → Plugin Manager" and then click on "Content - Pagebreak" plugin.

Select the presentation style from the list.

When done, click on "Save & Close".

This is how tabs look on "JM Guest House" live demo:

This is how sliders (accordion) look on "JM Guest House" live demo:

# S. Responsive Layout

The "JM Guest House" template is responsive. In the module positions section, you can see how the template and module positions behaviour on smaller screens.

#### Disable Responsive

There is a possibility to disable the responsive feature. The template will be displayed on smaller screens in the same way as on desktops. The responsive feature you can simply disable in the "Template Layout" settings of template parameters.
Read more about the template layout settings.

#### Hide Modules on Small Screens

Read more on how to hide modules on small screens.

# R. Joomla Optimization

Page load time affects two important factors that may have influence on the success of your site: seo rank and conversion rate. As you can read in Google Webmaster Guidelines, page load optimization is one of the best practices to get your site on the top of SEO rankings. In other hand, a fast loading website is more friendly to visitors.

Most important things to do :

1. Enable in "Template Manager → Template → Advanced features" :
   - Compress CSS
   - Compress JS
   - Compress HTML
2. Enable in "System → Global Configuration"
   - Cache
   - Gzip Page Compression
3. Add .htaccess file (expire headers for files)
4. Optimize images in DJ-Mediatools (resmush.it)
   - Components -> DJ-Mediatools -> Images and CSS -> Optimize

11 tips to speed-up your Joomla website - read more

# U. Using the Template for the RTL Languages

On "JM Guest House" live demo, you can preview the "RTL Languages" option which you can select from main menu.

If you want to display your template in RTL option to visitors, you simply need to install a RTL language and set it to default.
Read more how to install a language for Joomla.

# V. PSD Slices

The "JM Guest House" template is provided with PSD slices.
Read more on how to modify PSD slices.

# W. Other Useful Links

How to install the quickstart package?

http://www.joomla-monster.com/knowledge-base-area/general-questions/about-our-store/what-is-a-quickstart

I have Joomla automatically installed on my server. How can I install Quickstart now?

http://www.joomla-monster.com/blog/joomla-3-0/i-have-joomla-automatically-installed-on-my-server-how-can-i-install-quickstart-now

Our services:

http://www.joomla-monster.com/services/our-services

Use the quickstart package as a manual:

http://www.joomla-monster.com/blog/customization/use-the-quickstart-package-as-a-manual

How to change template name:

http://www.joomla-monster.com/blog/joomla-templates/how-to-change-joomla-3-2-5-template-name

Front-end site management in Joomla 3.x:

http://www.joomla-monster.com/blog/joomla-3-0/front-end-site-managing-in-joomla-3

Template duplication – make your website style different on subpages:

http://www.joomla-monster.com/blog/joomla-3-0/template-duplication-make-your-website-style-different-on-subpages

Got "no input file specified" or "404 - component not found" error messages?

http://www.joomla-monster.com/blog/joomla-3-0/got-no-input-file-specified-or-404-component-not-found-error-messages

How to stop Joomla! editor from cleaning some HTML elements?

http://www.joomla-monster.com/blog/joomla-3-0/how-to-stop-joomla-editor-from-cleaning-some-html-elements

Built-in language installer in Joomla

http://www.joomla-monster.com/blog/joomla-3-0/built-in-language-installer-in-joomla

How to modify LESS and CSS files in Joomla 3.x template?

http://www.joomla-monster.com/blog/joomla-templates/how-to-modify-less-and-css-files-in-joomla-3-0-template

How to unlock my article, module or menu item?

http://www.joomla-monster.com/blog/joomla-3-0/how-to-unlock-my-article-module-or-menu-item

More articles:

http://www.joomla-monster.com/blog

DJ-MediaTools Documentation:

http://dj-extensions.com/documentation/dj-mediatools/

DJ-MegaMenu Documentation:

http://dj-extensions.com/documentation/dj-megamenu/

DJ-MegaMenu FAQ:

http://dj-extensions.com/faq/dj-megamenu-faq/

DJ-Catalog2 Documentation:

http://dj-extensions.com/documentation/dj-catalog2/