A. Installing the Template
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 :
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.
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:
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:
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/
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:
-
Previous Button - this is a path to the "Previous" button in the custom navigation.
The path is: images/modules/navi/prev.png -
Next Button - this is a path to the "Next" button in the custom navigation.
The path is: images/modules/navi/next.png -
Play Button - this is a path to the "Play" button in the custom navigation.
The path is: images/modules/navi/play.png -
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:
- Title - enter a module title. A module must have a title, otherwise you won't be able to save the module.
-
Position - select a module position. This way you will put a module on the desired place.
Read more details regarding the module positions. - Album - choose an album which you want to display within the module
- Album layout - choose the album layout which you want to display within the module
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:
-
Header-bg Mediatools - on the "header-bg" module position.
-
Header-bg Mediatools Nivo - on the "header-bg" module position.
-
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.
-
Module Class Suffix - we used module suffix "noimage-ms navigation-ms".
-
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.
-
Module Class Suffix - we used module suffix "grid-ms".
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
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:
- Name - enter a tab title. A tab must have a title, otherwise you won't be able to save the tab
- Group - select a group. This way you will put tab in selected group.
- 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:
- Title - enter a module title. A module must have a title, otherwise you won't be able to save the module.
- Position - select a module position. This way you will put a module on the desired place.
Read more details regarding the module positions. - Group - choose a group which you want to display within the module
- Theme - choose module DJ-Tabs Theme
- 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:
- 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)
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:
- Width - 370px
- Height - 225px
Files localization:
-
Perfect for families Boxes
'joomla/images/sample/box1.jpg'
'joomla/images/sample/box2.jpg'
'joomla/images/sample/box3.jpg' -
DJ-Tabs content
'joomla/images/sample/tabs1.jpg'
'joomla/images/sample/tabs2.jpg'
'joomla/images/sample/tabs3.jpg'
Files size:
- Width - 130px
- Height - 130px
Files localization:
-
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
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 :
- Enable in "Template Manager → Template → Advanced features" :
- Compress CSS
- Compress JS
- Compress HTML
- Enable in "System → Global Configuration"
- Cache
- Gzip Page Compression
- Add .htaccess file (expire headers for files)
- Optimize images in DJ-Mediatools (resmush.it)
- Components -> DJ-Mediatools -> Images and CSS -> Optimize
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?
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:
Got "no input file specified" or "404 - component not found" error messages?
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?
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: