Please note that you need to download the "jm-real-estate-ads.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".

Installing the Template

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

Installing the Template

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-real-estate-ads - Default" and click on "Default" to set this template as the default one.

Installing the Template

From your download area at Joomla-Monster.com you need to download the EF4 Joomla-Monster Framework plugin. 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 below article, you will find a video tutorial on how to install the Quickstart package step by step:

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

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"

Installing the Framework

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

Installing the Framework

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.

Installing the Framework

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"

Installing the DJ-MegaMenu

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

Installing the DJ-MegaMenu

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.

Installing the DJ-MegaMenu

2. DJ-Classifieds

From your download area at DJ-Extensions.com you need to download the DJ-Classifieds package. The package is named as "pkg_dj-classifieds-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"

Installing the DJ-Classifeds

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

Installing the DJ-Classifeds

3) The package contains a component, modules 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-Classifieds plugins and check their status.

Installing the DJ-Classifeds

4) Now, you need to copy the JM-Real-Estate-Ads theme for DJ-Classifieds.
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-real-estate-ads-ef4" directory from this location:

quickstart/components/com_djclassifieds/themes/

to this location on your server:

root/components/com_djclassifieds/themes/

DJ-Classifieds

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.

The JM-Real-Estate-Ads theme you will need to set as the default one in the DJ-Classifieds global configuration.

3. 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"

Installing the DJ-MediaTools

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

Installing the DJ-MediaTools

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.

Installing the DJ-MediaTools

4. 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"

Installing the DJ-QueryMonster

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

Installing the DJ-QueryMonster

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.

Installing the DJ-QueryMonster

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

Installing the DJ-QueryMonster

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/

Transferring Images for Modules

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.

The "JM Real Estate Ads" 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-computers-electronics-store - Default" to edit this template parameters.

Configuring the Template

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

Configuring the Template

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.

Configuring the Template

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:

Configuring the Template

Customize Responsive Layout:

For all screens except "Small" and "Extra Small" we use the default settings:

Configuring the Template

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

Configuring the Template

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=Roboto:300,400,500,700,900,900italic

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

Horizontal Menu

Configuring the Template

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=Roboto:300,400,500,700,900,900italic

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

Module Headings

Configuring the Template

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=Roboto:300,400,500,700,900,900italic

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

Article headings

Configuring the Template

Advanced settings

Configuring the Template

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.

Configuring the Template

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.

Configuring the Template

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.

Configuring the Template

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.

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

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

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-Real-Estate-Ads" 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

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 Parameters

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:

DJ-MegaMenu Parameters

DJ-MegaMenu Parameters

DJ-MegaMenu Parameters

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-Real-Estate-Ads" 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 "Home" menu item, we displayed the following modules:

  • DJ-Classifieds Menu
  • Articles – Newsflash
  • Custom HTML modules with the custom code from Typography

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

4. Documentation

DJ-Megamenu documentation is available here.

DJ-Classifieds extension needs no introduction to anyone. A complete solution if you want to display classified ads with Joomla.

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

1. Global configuration

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

Configuring DJ-Classifieds

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

This is how the "Global" tab looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

This is how the "Views" tab looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

Worth to mention:

  1. Theme - choose "jm-real-estate-ads" theme as the default one. It is important to get the same design as on live demo.
  2. Include default CSS - make sure this option is set to "No"
  3. Social buttons code - you can use a custom code to display the social icons.
    On live demo we used the code generated from Addthis.

This is how the "Images" tab looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

On the "Security" and "SEO Settings" tabs we used the default settings.

2. Component Settings

From the top bar menu, click on "Components → DJ-Classifieds". On this page you will see the control panel of DJ-Classifieds component. Before you start adding categories, you need to configure some settings that may be useful for you and your site visitors, such as extra fields, locations, promotions etc.

Extra fields

In the DJ-Classifieds control panel click on "Extra Fields".

Configuring DJ-Classifieds

The DJ-Classifieds component allows to assign extra fields to ad details from the certain category. Extra fields you can display on the blog, table, single ad view, user profile as well as in the search module:

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

This is a list of extra fields used on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

This is an example of the edited extra field:

Configuring DJ-Classifieds

Location

In the DJ-Classifieds control panel click on "Location".

Configuring DJ-Classifieds

In the location settings, you can add predefined locations that will appear for example when a user will be adding a new ad or in the search module:

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

This is a list of locations used on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

This is an example of the edited location:

Configuring DJ-Classifieds

When a user is adding a new add, there is also possibility to display a map, which allows to target a user and set the geographic location.

Configuring DJ-Classifieds

This map can be enabled in the global configuration.

Promotions

In the DJ-Classifieds control panel click on "Promotions".

Configuring DJ-Classifieds

You can choose from 5 promotion types and decide which promotions should be published for users as well as you can set a price for each promotion type. On "JM-Real-Estate-Ads" live demo, we used the default settings for promotions.

Read more about promotions.

This is an example of the ad that is promoted using the background and border promotions:

Configuring DJ-Classifieds

Durations

In the DJ-Classifieds control panel click on "Durations".

Configuring DJ-Classifieds

In the Durations settings, you can manage durations of displaying ads on your site. You can create a new duration and set a price for each duration on the list. A user may choose a duration while adding a new ad on your site. On "JM-Real-Estate-Ads" live demo, we used the default settings for durations.

Read more about durations.

Types

In the DJ-Classifieds control panel click on "Types".

Configuring DJ-Classifieds

In the Types settings, you can define an unlimited types of ads, for example: for sale, rent, free, exchange. The types can be marked in a different colors which you can customize as you wish.

Read more about types.

This is a list of types used on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

This is an example of the ad with the "Urgent" label type:

Configuring DJ-Classifieds

Points System

In the DJ-Classifieds control panel, click on "Points Packages" or "User Points".

Configuring DJ-Classifieds

Points system is a feature that allows users to buy points and use them to pay for posting ads on your site.

Read more on how to configure points system.

Categories

Now you can pass to create categories of ads. In the DJ-Classifieds control panel click on "Categories".

Configuring DJ-Classifieds

On this page all categories of ads are displayed. Take a look on a list of all categories on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

This is an example of the edited category:

Configuring DJ-Classifieds

Items

If needed, you can add an ad from the back-end. In the DJ-Classifieds control panel click on "Items".

Configuring DJ-Classifieds

On this page all ads are displayed. Take a look on a list of all ads on "JM-Real-Estate-Ads" live demo:

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

This is an example of the edited ad:

Configuring DJ-Classifieds

3. Displaying Component on Website

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

Configuring DJ-Classifieds

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

4. Module Settings

The DJ-Classifieds extension includes several modules that you can display on your website.

DJ-Classifieds Items

This module allows to display ads from selected categories. You can display this module on one of the available module positions in the template.

Let's create a new DJ-Classifieds Items 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".

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

On this page you will see a form of adding a new DJ-Classifieds Items module.

Configuring DJ-Classifieds

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. Number of items and Number of columns - enter how many ads you want to display. If you would like to display ads in columns, then select a number of columns.
  4. Categories and Regions - specify from which categories and regions you wish to display ads. Leave empty to display ads from all categories and regions.

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

On "JM-Real-Estate-Ads" live demo we have displayed three "DJ-Classifieds Items" modules. Check the parameters we have added for each of them:

  1. Urgent Ads - on the "bottom1-1" module position.
    Configuring DJ-Classifieds
  2. Most Recent Ads - on the "bottom2-1" module position.
    Configuring DJ-Classifieds
  3. Most Popular - on the "left-column" module position.
    Configuring DJ-Classifieds

DJ-Classifieds Maps

This module allows to display the Google Map with locations of ads. You can display this module on one of the available module positions in the template.

Let's create a new DJ-Classifieds Maps 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".

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

On this page you will see a form of adding a new DJ-Classifieds Maps module.

Configuring DJ-Classifieds

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. Map width and Map height - enter the Google Map demonsions
  4. Default address - enter the default address. The default address will be selected on the Google Map.

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

On "JM-Real-Estate-Ads" live demo we have displayed two "DJ-Classifieds Maps" module. Check the parameters we have added for it:

  1. Header Bg Front - on the "header-bg" module position.
    Configuring DJ-Classifieds
  2. Classifieds Map - on the "content-bottom" module position.
    Configuring DJ-Classifieds

DJ-Classifieds Menu

This module displays a menu with all ads categories. You can display this module on one of the available module positions in the template.

Let's create a new DJ-Classifieds Menu 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".

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

On this page you will see a form of adding a new DJ-Classifieds Menu module.

Configuring DJ-Classifieds

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. Link to new ad view - choose if you want to display a link to "Add Item" view. On that view, a user can add a new ad.

When you finnish filling the form, click on "Save & Close" to save the module.

On "JM-Real-Estate-Ads" live demo we have displayed two "DJ-Classifieds Menu" modules.

  1. Categories - on the "dj-mega-classifieds0" module position. It is a module position displayed in submenu of "Home" item.
    Read more details on how to display a module in submenu.
  2. Categories - on the "left-column" module position.

DJ-Classifieds Search

This module allows you to search ads by attributes. You can display this module on one of the available module positions in the template.

Let's create a new DJ-Classifieds Search 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".

Configuring DJ-Classifieds

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

Configuring DJ-Classifieds

On this page you will see a form of adding a new DJ-Classifieds Search module.

Configuring DJ-Classifieds

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. Layout - choose if you want to display a search module vartically or horizontally
  4. Result view - choose if you want to display a search results in blog or table view

When you finnish filling the form, click on "Save & Close" to save the module.

On "JM-Real-Estate-Ads" live demo we have displayed three "DJ-Classifieds Search" modules.

  1. Search Front Input - on the "header-bg" module position. It is a search module published on the "Home" page.

    Configuring DJ-Classifieds

  2. Search - on the "left-column" module position.

    Configuring DJ-Classifieds

  3. Search - on the "content-top" module position. It is a search module published on the "For Rent" page.

    Configuring DJ-Classifieds

5. Plugins Settings

The DJ-Classifieds 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.

Payment Plugins

This is a list of available payment plugins in the DJ-Classifieds extension.

  • DJ-Classifieds Przelewy24 payment
  • DJ-Classifieds Authorize.net payment
  • DJ-Classifieds PayU payment
  • DJ-Classifieds Paypal payment
  • DJ-Classifieds Bank Transfer payment
Read more about payment plugins.

Other Plugins

Beside the payment plugins, there are also two additional plugins.

  • DJ-Classifieds Pagebreak - this plugin allows to display tabs or accordion in an ad description
  • DJ-Classifieds quickicon - this plugin displays the DJ-Classifieds icon in the control panel of Joomla
  • Search DJ-Classifieds - this plugin allows to search within ads content using the Joomla search component

6. Documentation

DJ-Classifieds documentation is available here.

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".

Configuring DJ-MediaTools

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 looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-MediaTools

This is how the "Basic Album Options" tab looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-MediaTools

This is how the "Layout Element Options" tab looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-MediaTools

This is how the "Customize Layout" tab looks on "JM-Real-Estate-Ads" live demo:

Configuring DJ-MediaTools

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".

Configuring DJ-MediaTools

On this page all albums are displayed. Take a look on a list of albums on "JM-Real-Estate-Ads" live demo:

Configuring DJ-MediaTools

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

Configuring DJ-MediaTools

This is an example of the edited album:

Configuring DJ-MediaTools

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".

Configuring DJ-MediaTools

On this page all custom items are displayed. Take a look on a list of custom items on "JM-Real-Estate-Ads" live demo:

Configuring DJ-MediaTools

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

Configuring DJ-MediaTools

This is an example of the edited custom item:

Configuring DJ-MediaTools

3. Displaying Component on Website

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

Configuring DJ-MediaTools

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".

Configuring DJ-MediaTools

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

Configuring DJ-MediaTools

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

Configuring DJ-MediaTools

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-Real-Estate-Ads" live demo we have displayed four DJ-MediaTools Ablum modules. Check the parameters we have added for each of them:

  1. High Standard Houses - Gallery - on the "bottom1-1" module position (assigned with menu item 'Home').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

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

    Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " title-border2-ms slider2-ms slider1-ms".
      Read more about module suffixes in this template.

  2. High Standard Houses - Gallery - on the "bottom1-1" module position (assigned with menu item 'Home 1 - Gallery Grid').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " title-border2-ms slider2-ms".
      Read more about module suffixes in this template.

  3. Latest Adverts - on the "bottom1-1" module position (assigned with menu item 'Home 4 - Tabber').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " title-border1-ms slider2-ms slider1-ms".
      Read more about module suffixes in this template.

  4. Latest Adverts - on the "bottom1-1" module position (assigned with menu item 'Home 5 - Slideshow with thumbnails').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " title-border1-ms slider2-ms".
      Read more about module suffixes in this template.

  5. Latest Adverts - on the "bottom1-1" module position (assigned with menu item 'Home 3 - Slider').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " slider1-ms slider2-ms title-border1-ms".
      Read more about module suffixes in this template.

  6. Promoted Adverts - on the "bottom1-1" module position (assigned with menu item 'Home 3 - Slider').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " slider1-ms slider2-ms title-border1-ms".
      Read more about module suffixes in this template.

  7. Promoted Adverts - on the "bottom1" module position (assigned with menu item 'Home 5 - Slideshow with thumbnails').
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " slider1-ms slider2-ms title-border1-ms".
      Read more about module suffixes in this template.

  8. Tabber Bottom - on the "bottom1-1" module position.
    Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " title-border1-ms slider2-ms".
      Read more about module suffixes in this template.

  9. Promoted Adverts - on the "top-mod1" module position.
    Configuring DJ-MediaTools Configuring DJ-MediaTools Configuring DJ-MediaTools

    Worth to mention:

    1. Module Class Suffix - we used these module suffixes " title-border1-ms slider2-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.

6. Documentation

DJ-Mediatools documentation is available here.

JM Real Estate Ads 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)

Module positions for normal and large screen

Check out more details about layout customization!

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

Module positions for medium screen

Check out more details about layout customization!

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

Module positions for small screen

Check out more details about layout customization!

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

Module positions for extra small screen

Check out more details about layout customization!

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



1. Available module designs.

module-suffixes


2. Use the suffix for DJ-MediaTools Album (for Slider and Modern Slider layout) module if you want to get the following view for navigation. Otherwise the module will use the default css styles.



Suffix name: slider1-ms


3. Use the suffix for DJ-MediaTools Album module if you want to get the following view for readmore. Otherwise the module will use the default css styles.



Suffix name: slider2-ms


4. Use the suffix for DJ-Classifieds Search module if you want to get the following view for input.



Suffix name: jm-search


5. Use the suffix for DJ-Classifieds module if you want to get the following view for Category select.



Suffix name: category-ms


6. Use the suffix for Menu module if you want to get the following view for menu.



Suffix name: tags-ms


7. Use the suffix to disable module margin.


Suffix name: margin-ms


8. 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:

height1

_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:

height2

The JM-Real-Estate-Ads 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.

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

Component View

On "JM-Real-Estate-Ads" live demo, we disabled component view on the front page.

From the top bar menu, click on "Extensions → Template Manager → JM-Real-Estate-Ads - Default". On this page you will see all template settings.

Click on "Basic settings" tab.

Component View

Now, select menu item where you want to disable component.

Component View

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

Logo image

Logo image you can add in the "Basic Settings" of template parameters. Read more on how to add a logo image.

Top-Bar Menu

The "Top-Bar" menu is located in the top right corner of the template.

Top-Bar Menu

First of all, you need to create a menu.
From the top bar menu, click on "Menus → Menu Manager".

On this page you will see a list of all menus. If you made a clean Joomla installation, you will probably see only "Main Menu".
Click on "New".

Top-Bar Menu

Fill the form as follows.

Top-Bar Menu

Now, click on "Save & Close" to save the menu.

The next step is to create menu items. From the top bar menu, click on "Menus → Topbar". Now, click on "New".

Top-Bar Menu

Let's take the "Register" menu item as example. Click on "User Manager → Registration Form".

Top-Bar Menu

These menu items we use on "JM-Real-Estate-Ads" live demo:

  • For Sale - this is a menu alias of the DJ-classifieds "Category Table layout" menu item.
    You need to choose "System Links → Menu Item Alias" and select a menu item to link to.
  • For Rent - this is a menu alias of the DJ-classifieds "Category Table layout" menu item.
    You need to choose "System Links → Menu Item Alias" and select a menu item to link to.
  • All Classifieds - this is a menu alias of the DJ-classifieds "Category Blog layout" menu item.
    You need to choose "System Links → Menu Item Alias" and select a menu item to link to.
  • Login - this is a menu alias of the "Login Form" menu item.
    You need to choose "System Links → Menu Item Alias" and select a menu item to link to.
  • Register - this is a menu alias of the "Register Form" menu item.
    You need to choose "System Links → Menu Item Alias" and select a menu item to link to.
  • Post advert - this is the DJ-Classifieds "Add Item" view. You need to choose "DJ-Classifieds → Add item" to create this view.

Top-Bar Login

In the "top-bar" module position of "JM-Real-Estate-Ads" live demo, we published also a login module. It is visible only for logged-in users.

Top-Bar Login

From the top bar menu, click on "Extensions → Module Manager". On this page you will see a list of created modules, click on "New".

Top-Bar Login

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

Top-Bar Login

On this page you will see a form of adding a new login module.

Top-Bar Login

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 the "top-bar" module position.
  3. Access - you need to choose "Registered" option. Then the module will show up only if a user is logged-in.

Header Background

Header Background

The header background is DJ-Classifieds Map module on position "header-bg".
Read more on DJ-Classifieds Module Settings.

"Search Front Slogan" Custom HTML Module

Header Module

On the "header" module position of "JM-Real-Estate-Ads" live demo, we published a custom HTML 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".

Header Module

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

Header Module

On this page you will see a form of adding a new Custom HTML module.

Header 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 the "header" module position.
  3. Source code - if you click on this icon, a popup window will show up where you need to paste a custom code from the typography article.
The custom code you need to paste:

<div class="jm-custom-title">Find Your sweet home!</div>

Take a look on how it should look like:

Header Module

Click on "Ok" to save the source code and then click on "Save & Close" to save the module.

Search Module

On the same module position as the Custom HTML module, we published the DJ-Classifieds Search 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".

Search Module

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

Search Module

On this page you will see a form of adding a new DJ-Classifieds Search module.

Search Module

Below you can see what parameters we set for this module.

Search 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 the "header" module position.
  3. Module Class Suffix - you need to add the "jm-search category-ms" module class suffix to get the same look of the search module as on live demo.
    Read more about module suffixes

Below DJ-Classifieds Search module we have published "Search Front Advanced" Custom HTML module.

Search Module

The custom code you need to paste:

<div style="text-align: center;">
<p class="jm-advanced"><span class="jm-advanced-link">Advanced search</span></p>
</div>

Worth to mention:

  1. Module Class Suffix - you need to add the " no-margin-ms" module class suffix to get the same look of the search module as on live demo.

Top module

"Here you will sell quickly and find things easy!" Custom HTML module

The "Here you will sell quickly and find things easy!" module is a Custom HTML module published on the "top" module position.
The code which you need to paste in this module you will find in the typography article.

The custom code you need to paste:

<div class="clearfix">
<div class="jm-box col3">
<div class="icon"><a href="#link"><img src="images/modules/front/icon1.png" alt="" /></a></div>
<h3 class="title">Best Ads Only</h3>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="jm-box col3">
<div class="icon"><a href="#link"><img src="images/modules/front/icon2.png" alt="" /></a></div>
<h3 class="title">Driving Directions</h3>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="jm-box col3">
<div class="icon"><a href="#link"><img src="images/modules/front/icon3.png" alt="" /></a></div>
<h3 class="title">Contact Real Estate Agent</h3>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>  

Title, description and link you can simply change as you like.
To change icons you just need to edit image URL.

Search Module

Location of icons images:

  1. images/modules/front/icon1.png
  2. images/modules/front/icon2.png
  3. images/modules/front/icon3.png

Bottom1 module

"High Standard Houses - Gallery" DJ-Mediatools Module

The "High Standard Houses - Gallery" module is a DJ-MediaTools Album module published on the "bottom1" module position.
Screenshots and description for this module you will find in the DJ-MediaTools module settings section.

Bottom2 module

"Most Recent Ads" DJ-Classifieds module

The "Most Recent Ads" module is a DJ-Classifieds Items module published on the "bottom2" module position.
For this module we used the "title-border2-ms" module class suffix. Read more about module suffixes.
A screenshot and description for this module you will find in the DJ-Classifieds modules settings section.

Bottom3 module

"Social" Custom HTML Module

On the "bottom3" module position of "JM-Real-Estate-Ads" live demo, we published a custom HTML module for socials.

From the top bar menu, click on "Extensions → Module Manager". On this page you will see a list of created modules, click on "New".

Socials Module

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

Socials Module

On this page you will see a form of adding a new Custom HTML module.

Socials 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 the "bottom3" module position. .
  3. Source code - if you click on this icon, a popup window will show up where you need to paste a custom code from the typography article.

Copyrights Module

Copyrights Module

  1. This is a custom HTML module published on the "copyrights" module position.
    You can create such a module as we described here or here.
  2. This is Joomla-Monster.com footer link. Read more on how to remove the footer link.

On "JM-Real-Estate-Ads" 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.

Pagebreak - Tabs or Accordion

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

Pagebreak - Tabs or Accordion

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.

Pagebreak - Tabs or Accordion

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.

Pagebreak - Tabs or Accordion

Select the presentation style from the list.

Pagebreak - Tabs or Accordion

When done, click on "Save & Close".

This is how tabs look on "JM-Real-Estate-Ads" live demo:

Pagebreak - Tabs or Accordion

This is how sliders (accordion) look on "JM-Real-Estate-Ads" live demo:

Pagebreak - Tabs or Accordion

The "JM-Real-Estate-Ads" 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.

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.

Read more on 11 tips to speed-up your Joomla website.

On "JM-Real-Estate-Ads" 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.

The "JM-Real-Estate-Ads" template is provided with PSD slices.
From your download area at Joomla-Monster.com you need to download the "jm-real-estate-ads-PSD-slices.zip" package which contains the following files:

  • banner.psd - it contains banner image as PSD slice
  • slices.psd - it contains all the template images including logo, social icons, slider navigation and DJ-Classifieds category icons
  • category_icons.psd - it contains a psd source for DJ-Classifieds Categories icons

Read more on how to modify PSD slices.