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-Doctor - 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 below article, you will find a video tutorial on how to install the Quickstart package step by step:
C. Installing the EF3 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 EF3 Joomla-Monster Framework plugin. The package is named as "plg_EF3-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 "EF3 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-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.
D. 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-Doctor" template is built on the "EF3 Joomla-Monster" framework. It is an advanced framework for Joomla templates, which allows to configure many useful settings from the template parameters.
From the top bar menu, click on "Extensions → Template Manager".
On this page you will see a list of installed templates. Click on "JM-Doctor - Default" to edit this template parameters.
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.
Logo – click on "select" to browse for a logo image.
In the modal window, you will see the "images" directory which is located in your Joomla root directory. If you wish to upload your own logo image, simply click on "Browse", select a file from your PC and click on "Start Upload". Now, your logo should appear on the list, click on it and next click on "Insert".
Logo text – instead of using a logo image, you can simply enter a logo text. Please note that it will be displayed only when a logo image is not chosen.
Site description – enter a site description. It will be displayed next to the logo image or logo text.
Template color switcher – enable or disable the template color switcher. It is located at the bottom of your template.
Template style – choose the default template style. The "JM-Doctor" template includes 4 color versions: blue, orange, pink and green.
Font size switcher – enable or disable the font size switcher. It allows to enlarge or reduce the font size in the content area. It is located just above the content.
Back to top button – enable or disable the "back to top" button. It allows to scroll smoothly your site from the bottom to the top. It appears in the right bottom corner.
Favicon image – favicon is an icon that appears in the browser's address bar and next to the page's name in a list of bookmarks. Click on "Select" to browse for a favicon.
In the modal window, you will see the "images" directory which is located in your Joomla root directory. If you wish to upload your own favicon, simply click on "Browse", select a file from your PC and click on "Start Upload".
If you leave this option empty, it will use the default image from the template directory.
You can use any available favicon generator to create your icon.
Sticky Topbar – enable or disable the sticky topbar. This means that the topbar including your logo and DJ-MegaMenu will be sticky to the top when scrolling a page.
2. Template Layout
Click on the "Template Layout" tab. In this section, you are able to configure template layout settings. Let's take a closer look to them.
Template width – choose between static and fluid template width.
- static option - default width is 1168px.
The column's and gutter width is specified in pixels. - fluid option – if you choose this option, then an additional option will appear below.
The column's and gutter width is specified in percent.
Fluid template width – this option is visible only if the fluid template width is chosen above.
You need to enter the template width in percent or pixels.
Remember to add a unit after the width, for example 100% or 1168px.
Responsive layout – enable or disable the responsive layout.
- Enabled – the template layout will be responsive on tablet and mobile screens
- Disabled – the template layout will be the same on desktop, tablet and mobile screens
Scheme variation – choose the main columns ordering that best suit your needs. You can choose from:
- Left column - Content - Right column
- Left column - Right column - Content
- Content - Right column - Left column
Left column width – choose the left column width based on the bootstrap grid size.
More details on how to understand bootstrap grid system.
Right column width - choose the right column width based on the Bootstrap grid size.
More details on how to understand bootstrap grid system.
Disable component – choose for which pages you want to disable the component area. This option is useful, for example, if you want to create a front page with modules only.
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.
Global font settings
Text color – choose the text color.
Default value for the "JM-Doctor" template is: #858585
Font-size - choose the font size.
Default value is: 14px
Font option – choose the font option.
Default value is: Google Web Font
Google Web Font URL – enter a URL address for the Google Web Font you want to use.
All Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,700
Google Web Font Family – enter a Google Web Font family.
Default value is: 'Roboto', sans-serif
Module headings
Font-size - choose the font size.
Default value is: 22px
Font option – choose the font option.
Default value is: Google Web Font
Google Web Font URL – enter a URL address for the Google Web Font you want to use.
All Google Web Font you can browse here: http://www.google.com/webfonts
Google Web Font Family – enter a Google Web Font family.
Default value is: 'Roboto', sans-serif
DJ-Menu 1st level items
Font-size - choose the font size.
Default value is: 15px
Font option – choose the font option.
Default value is: Google Web Font
Google Web Font URL – enter a URL address for the Google Web Font you want to use.
All Google Web Font you can browse here: http://www.google.com/webfonts
Google Web Font Family – enter a Google Web Font family.
Default value is: 'Roboto', sans-serif
Article headings
Font-size - choose the font size.
Default value is: 32px
Font option – choose the font option.
Default value is: Google Web Font
Google Web Font URL – enter a URL address for the Google Web Font you want to use.
All Google Web Font you can browse here: http://www.google.com/webfonts
Google Web Font Family – enter a Google Web Font family.
Default value is: 'Roboto', sans-serif
Advanced settings
In the "Advanced Settings" option, you can choose font settings for specified selectors only.
Font-size - choose the font size.
Default value is: 18px
Font option – choose the font option.
Default value is: Google Web Font
Google Web Font URL – enter a URL address for the Google Web Font you want to use.
All Google Web Font you can browse here: http://www.google.com/webfonts
Google Web Font Family – enter a Google Web Font family.
Selectors – specify the id or class selectors for which you want to apply these font settings. For example: h1, #jm-sitedesc, use comma to separate them.
4. 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.
Developer mode – this option must be enabled if you are going to modify the template LESS files otherwise it should be disabled, since it may slow down your site loading. Read more about editing the template files.
Google Analytics – free web analytics tool that allows you to monitor your site traffic. If you enable this option, an extra field will appear below. Read more about Google Analytics features.
Google Analytics Code – enter your "Tracking ID" number.
New to Google Analytics? Please read more on how to sign up.
Google Wemaster Tools – this option allows you to verify your site to get access to web service for webmasters. If you enable this option, an extra field will appear below.
Verification Meta Tag Content – this option will add a meta tag to your site.
You need to enter the content string of the verification meta tag only.
Do not know how to verify your site? Check out this tutorial.
CSS Compress – optimize your site loading time by compressing CSS files. How does it work?
- merges CSS files into a one file
- removes comments, tabs, spaces, new lines, etc.
- reduces response time
Read more about editing the template files.
5. Settings Storage
Click on the "Settings Storage" tab. In this section, you are able to save your current settings into the JSON configuration file.
Quick tutorial on how to save and load settings.
- Save settings – enter a file name and click on "Save"
- Storage location – the path to the previously created file. You can browse this directory using a FTP client
- Stored settings – choose a file from the list and click on "Load" to load settings or click on "Download settings" to download the file
- Upload settings – this option may be useful if you want upload a configuration file that is not stored in the storage location. Click on "Browse" to choose a file and click on "Upload". Now you can load that file from the "Stored settings" option.
6. 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.
css – all compiled CSS files
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
index.php – main index file
template_preview.png – large thumbnail of the template image
template_thumbnail.png - small thumbnail of the template image
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-Doctor" 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 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:
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-Doctor" template we set 200px for each column
Display SELECT for small screens – choose "Yes" if you wish to display a select box on small screens instead of DJ-MegaMenu styles
Small screen 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 looks on "JM-Doctor" live demo:
This is how the "Basic Album Options" tab looks on "JM-Doctor" live demo:
This is how the "Layout Element Options" tab looks on "JM-Doctor" live demo:
This is how the "Customize Layout" tab looks on "JM-Doctor" 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-Doctor" 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-Doctor" 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-Doctor" live demo we have displayed two DJ-MediaTools Ablum modules. Check the parameters we have added for each of them:
- Slider Header - on the "header" module position.
Worth to mention:
- Module Class Suffix - we used these module suffix "header-ms".
Read more about module suffixes in this template.
- Module Class Suffix - we used these module suffix "header-ms".
- Why us? - on the "right-column" module position.
Worth to mention:
- Module Class Suffix - we used this module suffix "testimonials-ms".
Read more about module suffixes in this template.
- Module Class Suffix - we used this module suffix "testimonials-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
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-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-Doctor" live demo:
This is how the "Other Options" tab looks on "JM-Doctor" 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-Doctor" 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-Doctor" 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)
Worth to mention:
- Article - select article which will be displayed in tab.
- Icon - select icon if you want.
On the "Article options" tab 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-Doctor" live demo we have displayed four DJ-Tabs Ablum modules. Check the parameters we have added for each of them:
- Our services - on the "top" module position.
- Opening hours - on the "top" module position.
- Articles Tabs - on the "content-bottom" module position.
- Our Videos - on the "right-column" module position.
6. Documentation
DJ-Tabs Documentation is available here.
L. Module Positions in the Template
The JM-Doctor template provides up to 13 module positions. It does not mean that you can display only 13 modules on a page, since on each module position you can display more modules than one.
What does the flexible means? In the flexible module area you can display multiple modules in a row, with unlimited number of rows.
Read more about this feature.
Module positions for desktops & tablets - landscape orientation
Module positions for tablets - portrait orientation
Module positions for mobiles
M. Module Suffixes in the Template
JM-Doctor template provides many module designs that you can control by entering a module class suffix in module parameters.
Let's check them all.
Module Design
DJ-MediaTools Album Design Applicable to "Slider" layout
Use the following module class suffix:
- header-ms
DJ-MediaTools Album Design Applicable to "Slider" layout
Use the following module class suffix:
- testmonials-ms
DJ-MediaTools Album Design Applicable to all layouts
Use the following module class suffix:
- description-center-ms
Search Module Design
Use the following module class suffix:
- jm-search
Menu Module
Fixed Module Height
An additional and very useful suffix to make module height the same.
You just need to add a module class suffix to get the fixed module height.
_mod300 means that the module will have a height of 300px.
If you need to mix more suffixes, remember to put that suffix at the end and add a space between suffixes:
N. Module Icons in the Template
The JM-Doctor template provides several different icons in custom modules. Let's check them.
Front modules
Images size:
- Width - 54px
- Height - 54px
Images size (hover):
- Width - 90px
- Height - 90px
Files localization:
- Painless Treatment
'templates/jm-doctor/images/icons/custom/icon1.png'
'templates/jm-doctor/images/icons/custom/icon1-hover.png' - Professional Services
'templates/jm-doctor/images/icons/custom/icon2.png'
'templates/jm-doctor/images/icons/custom/icon2-hover.png' - Hight Quality Drugs
'templates/jm-doctor/images/icons/custom/icon3.png'
'templates/jm-doctor/images/icons/custom/icon3-hover.png'
The custom code you need to paste in module you will find in typography article.
To change the icons, you need to override pictures.
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.
Files localization:
- Make an appointment
'joomla/images/modules/icons/icon-phone.png' - Send us a message
'joomla/images/modules/icons/icon-mail.png' - Visit us
'joomla/images/modules/icons/icon-direction.png'
The custom code you need to paste in module you will find in typography article.
To change the icons, you need to override pictures.
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.
Subpage modules
Files localization:
- Pricing
'templates/jm-doctor/images/styleX/icon-pricing.png'
'templates/jm-doctor/images/icons/custom/icon-pricing-hover.png' - Gallery
'templates/jm-doctor/images/styleX/icon-gallery.png'
'templates/jm-doctor/images/icons/custom/icon-gallery-hover.png' - News
'templates/jm-doctor/images/styleX/icon-news.png'
'templates/jm-doctor/images/icons/custom/icon-news-hover.png' - For Kids
'templates/jm-doctor/images/styleX/icon-kids.png'
'templates/jm-doctor/images/icons/custom/icon-kids-hover.png' - Advices
'templates/jm-doctor/images/styleX/icon-tips.png'
'templates/jm-doctor/images/icons/custom/icon-tips-hover.png'
styleX - depends on selected template color version (style1, style2, style3 or style4)
The custom code you need to paste in module you will find in typography article.
To change the icons, you need to override pictures.
All icons are available in our PSD slices file, more details in section PSD Slices.
O. Typography
The JM-Doctor 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.
P. 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-Doctor" live demo, we hide component on the front page.
From the top bar menu, click on "Extensions → Template Manager → JM-Doctor → Template Layout ". On this page you will see available settings.
Click on "Home" to disable component view on menu item .
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.
Topbar Login
In the "topbar" module position of "JM-Doctor" live demo, we published also a login module. It is visible only for logged-in users.
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 "Login".
On this page you will see a form of adding a new login 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 the "topbar" module position.
- Access - you need to choose "Registered" option. Then the module will show up only if a user is logged-in.
Slider Header - DJ-Mediatools Module
The "Slider Header" module is a DJ-MediaTools Album module published on the "top" module position.
Screenshots and description for this module you will find in the
DJ-MediaTools module settings
section.
Icons Front - Custom HTML Module
On the "header" module position of "JM-Doctor" 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".
On the next page you will see a list of all modules available in your Joomla. Click on "Custom HTML".
On this page you will see a form of adding a new Custom HTML 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 the "header" module position.
- 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.
- Module Class Suffix - we used these module suffixes "top-ms".
Read more about module suffixes in this template.
<div class="jm-box-wrapper"> <div class="jm-box box1"><a href="#link"><span class="jm-icon"> </span><span class="jm-icon-title"><span class="jm" data-hover="Painless Treatment">Painless Treatment</span></span></a></div> <div class="jm-box box2"><a href="#link"><span class="jm-icon"> </span><span class="jm-icon-title"><span class="jm" data-hover="Professional Services">Professional Services</span></span></a></div> <div class="jm-box box3"><a href="#link"><span class="jm-icon"> </span><span class="jm-icon-title"><span class="jm" data-hover="High Quality Drugs">High Quality Drugs</span></span></a></div> </div>
Take a look on how it should look like:
Click on "Ok" to save the source code and then click on "Save & Close" to save the module.
The custom code you need to paste you will also find in typography article.
Our services - DJ-Tabs Module
The "Our services" module is a DJ-Tabs module published on the "top" module position.
Screenshots and description for this module you will find in the
DJ-Tabs module settings
section.
Opening hours - DJ-Tabs Module
The "Opening hours" module is a DJ-Tabs module published on the "top" module position.
Screenshots and description for this module you will find in the
DJ-Tabs module settings
section.
Why us? - DJ-Mediatools Module
The "Why us?" module is a DJ-MediaTools Album module published on the "top" module position.
Screenshots and description for this module you will find in the
DJ-MediaTools module settings
section.
Worth to mention:
- Module Class Suffix - we used these module suffixes "testimonials-ms".
Read more about module suffixes in this template.
Bottom Modules
On this position of "JM-Doctor" live demo, we published three custom modules.
The custom code you need to paste you will also find in typography article.
Copyrights Module
- This is a custom HTML module published on the "copyrights" module position.
- This is custom HTML module published on the "social" module position.
The custom code you need to paste you will also find in typography article. - This is Joomla-Monster.com footer link. Read more on how to remove the footer link.
Q. Other Pages
On "JM-Doctor" 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-Doctor" live demo:
This is how sliders (accordion) look on "JM-Doctor" live demo:
R. Responsive Layout
The "JM-Doctor" 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.
S. Using the Template for the RTL Languages
On "JM-Doctor" 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.
T. PSD Slices
The "JM-Doctor" template is provided with PSD slices.
Read more on how to modify PSD slices.
U. 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-Tabs Documentation: