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-services - 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 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.
2. DJ-ImageSlider
From your download area at DJ-Extensions.com you need to download the DJ-ImageSlider package. The package is named as "pkg_dj-imageslider-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.
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 Services" 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-services - 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 except "Extra Small" 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: http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic
Google Web Font Family – default value is: 'Lato', 'sans-serif'
Horizontal Menu
Google Web Font URL – all Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic
Google Web Font Family – default value is: 'Lato', 'sans-serif'
Module Headings
Google Web Font URL – all Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic
Google Web Font Family – default value is: 'Lato', 'sans-serif'
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
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
templateDefaults.json – default values for template variables
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 Services" 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
J. Configuring the DJ-ImageSlider Extension
DJ-ImageSlider extension allows you to display image slides with title and short description linked to any menu item, article or url address.
Let's start with the component settings.
1. Component Settings
From the top bar menu, click on "Components → DJ-ImageSlider". On this page you will see the control panel of DJ-ImageSlider component.
The first step is to create a category for your slides.
Categories
In the DJ-ImageSlider control panel click on "Categories".
On this page all categories are displayed. Take a look on a list of categories on "JM Services" live demo:
To create a new category, click on "New". Read more on how to create a new category.
This is an example of the edited category:
Once, you have created a category, you can pass on to create your first slide.
Slides
In the DJ-ImageSlider control panel click on "Slides".
On this page all slides are displayed. Take a look on a list of slides on "JM Services" live demo:
To create a new slide, click on "New". Read more on how to create a new slide.
This is an example of the edited slide:
2. Module Settings
The DJ-ImageSlider extension includes one module.
DJ-ImageSlider Module
You can display this module on one of the available module positions in the template.
Let's create a new DJ-ImageSlider 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-ImageSlider".
On this page you will see a form of adding a new DJ-ImageSlider 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. - Slider source - choose component if you want to display slides from component, choose folder if you want to display only images from specified folder path
- Theme - choose if you want to use the default theme or the template override. On our live demo we use the template override.
- Slides category - choose a category which you want to display within the module
Read more about DJ-ImageSlider module.
When you complete the form, click on "Save & Close" to save the module.
On "JM Services" live demo we have displayed 8 DJ-ImageSlider modules. Check the parameters we have added for each of them:
-
DJ-ImageSlider - on the "header" module position.
Worth to mention:
-
Previous Button - this is a path to the "Previous" button in the custom navigation.
The path is: images/djimageslider/navigation/prev.png -
Next Button - this is a path to the "Next" button in the custom navigation.
The path is: images/djimageslider/navigation/next.png -
Play Button - this is a path to the "Play" button in the custom navigation.
The path is: images/djimageslider/navigation/play.png -
Pause Button - this is a path to the "Pause" button in the custom navigation.
The path is: images/djimageslider/navigation/pause.png
Worth to mention:
-
Module Class Suffix - we used the following module suffixes: "slider1-ms blank-ms".
Read more about module suffixes in this template.
-
Previous Button - this is a path to the "Previous" button in the custom navigation.
-
Latest Projects - on the "content-top" module position.
Worth to mention:
-
Previous Button - this is a path to the "Previous" button in the custom navigation.
The path is: images/djimageslider/navigation/prev.png -
Next Button - this is a path to the "Next" button in the custom navigation.
The path is: images/djimageslider/navigation/next.png -
Play Button - this is a path to the "Play" button in the custom navigation.
The path is: images/djimageslider/navigation/play.png -
Pause Button - this is a path to the "Pause" button in the custom navigation.
The path is: images/djimageslider/navigation/pause.png
Worth to mention:
-
Module Class Suffix - we used the following module suffixes: "title-ms".
Read more about module suffixes in this template.
-
Previous Button - this is a path to the "Previous" button in the custom navigation.
-
Testimonials - on the "content-bottom" module position.
Worth to mention:
-
Module Class Suffix - we used the following module suffixes: "testimonials-ms".
Read more about module suffixes in this template.
-
Module Class Suffix - we used the following module suffixes: "testimonials-ms".
3. Documentation
DJ-ImageSlider documentation is available here.
K. Module Positions in the Template
The JM Services template provides up to 27 module positions. It does not mean that you can display only 27 modules on a page, since on each module position you can display more modules than one.
Read more about this feature.
Module positions for desktops & tablets - landscape orientation
Module positions for tablets - portrait orientation
Module positions for mobiles
L. Module Suffixes in the Template
JM Services 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-ImageSlider module design
Use the following module class suffix:
- slider1-ms
DJ-ImageSlider module design
Use the following module class suffix:
- testimonials-ms
DJ-ImageSlider module design
Use the following module class suffix:
- testimonials-ms alternative-ms
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:
M. Typography
The JM Services 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.
N. 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 Services" live demo, we hide the component view on the front page.
From the top bar menu, click on "Extensions → Template Manager → jm-services - Default". Next, go to the Basic Settings tab.
Click on "Home" to disable component view on menu item as follows:
Now, click on "Save & Close" to save settings.
Top Contact Module
On the "top-bar1" module position of "JM Services" 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 "top-bar1" 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.
The custom code you need to paste:
<ul class="jm-contact-icons">
<li class="jm-direction"><img src="images/modules/direction.png" alt="Direction" /><a title="Contact" href="#">Peterborough, UK</a></li>
<li class="jm-email"><img src="images/modules/email.png" alt="Email" /><a title="Contact" href="#">Email</a></li>
<li class="jm-phone"><img src="images/modules/phone.png" alt="Phone" /><a title="Contact" href="#">+44 7837 383 484</a></li>
</ul>
Top Login Module
In the "top-bar2" module position of "JM Services" live demo, we published a login 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 "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 "top-bar" module position.
Logo image
Logo image you can add in the "Basic Settings" of template parameters. Read more on how to add a logo image in the template parameters.
Header - DJ-ImageSlider Module
In the "header" module position of "JM Services" live demo, we published DJ-ImageSlider module.Screenshots and description for this module you will find in the DJ-ImageSlider module settings section.
Color Boxes
On the "content-top" module position of "JM Services" live demo, we published 3 custom HTML modules.
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 "top-bar1" 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.
The custom code you need to paste for the first color box:
<p style="margin: 0;">
<a class="jm-color-box1 text-center" href="#">
<span class="jm-icon-title">
TIME MACHINE
</span>
<span class="jm-icon-image"> </span>
<span class="jm-icon-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</a>
</p>
The custom code you need to paste for the second color box:
<p style="margin: 0;">
<a class="jm-color-box2 text-center" href="#">
<span class="jm-icon-title">
ANALYTICS
</span>
<span class="jm-icon-image"> </span>
<span class="jm-icon-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</a>
</p>
The custom code you need to paste for the third color box:
<p style="margin: 0;">
<a class="jm-color-box3 text-center" href="#">
<span class="jm-icon-title">
WORLDWIDE SERVICE
</span>
<span class="jm-icon-image"> </span>
<span class="jm-icon-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</a>
</p>
Now go to the Advanced tab:
Worth to mention:
- Module Class Suffix - we used the following module suffix: "blank-ms".
Read more about module suffixes in this template. - Bootstrap Size - select "4" to display 3 modules in a row.
Read more about Bootstrap Size option.
Latest Projects - DJ-ImageSlider Module
In the "content-top" module position of "JM Services" live demo, we published DJ-ImageSlider module.Screenshots and description for this module you will find in the DJ-ImageSlider module settings section.
Just Few Words Module
On the "content-bottom" module position of "JM Services" 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 "content-bottom" 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.
The custom code you need to paste:
<div class="pull-left visible-desktop">
<img class="jm-image-margin" src="images/modules/custom1.jpg" alt="Custom" />
</div>
<div class="jm-table">
<h3 class="jm-title" style="margin-bottom: 20px;">JUST FEW WORDS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
<ul class="jm-custom-list">
<li>Ut enim ad minim veniam, quis nostrud</li>
<li>Exercitation ullamco laboris nisi</li>
<li>Ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit</li>
</ul>
<p class="readmore text-right"><a class="btn" href="#">read more</a></p>
</div>
Now go to the Advanced tab:
Worth to mention:
- Module Class Suffix - we used the following module suffix: "title-ms".
Read more about module suffixes in this template. - Bootstrap Size - select "8" to display module on the same width as on our live demo.
Read more about Bootstrap Size option.
Testimonials - DJ-ImageSlider Module
In the "content-bottom" module position of "JM Services" live demo, we published DJ-ImageSlider module.Screenshots and description for this module you will find in the DJ-ImageSlider module settings section.
Copyrights Module
- This is a custom HTML module published on the "copyrights" module position.
- This is Joomla-Monster.com footer link. Read more on how to remove the footer link.
O. Other Pages
On "JM Services" live demo, we also displayed some Joomla component views.
Let's take a look on the most interesting ones.
Contact Page
On the "Contact" page you can display some information about your company as well as the contact form.
Read more on how to configure single contact.
Google Map Module
It is custom HTML module published on "content-top" module position.
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 "content-top" module position.
- Source code - if you click on this icon, a popup window will show up where you need embed the Google Maps code. More details on how to embed a map
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 Services" live demo:
This is how sliders (accordion) look on "JM Services" live demo:
Culinary Theme
Logo Image
Logo image you can add in the "Basic Settings" of template parameters. Read more on how to add a logo image. The path of logo image for culinary theme is: images/culinary/logo.png
Top Menu Icons
How to change the icons in DJ-Menu, you can read in the DJ-Menu Icons section. The path for top menu icons is: images/culinary/djmenu/
Color Boxes
The culinary theme is using the same module settings for the color boxes modules as JM Services main theme. The only thing you may need to do is to replace the icons. The icons for Culinary theme you will find in the following location: images/culinary/modules/colorboxes/. To use them, you need to copy them and paste to the following location: templates/jm-services/images/.
Component
Under the Latest Recipes module we have displayed a blog view of Joomla with 3 columns and 6 articles.
Footer Modules
Only "Our Cookes" module is new one comparing to the main theme of JM Services. It is a custom HTML module with the following code:
<div class="media"><a class="pull-left" href="#"> <img src="images/culinary/modules/cooks/cook1.png" alt="" /> </a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Greg Amaro</a></h5>
<p>Consectetur adipisicing elit sed do eimod tempor.</p>
</div>
</div>
<div class="media"><a class="pull-left" href="#"> <img src="images/culinary/modules/cooks/cook2.png" alt="" /> </a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Jimmy Gessler</a></h5>
<p>Consectetur adipisicing elit sed do eimod tempor.</p>
</div>
</div>
Template Parameters
Culinary theme is using the following template parameters:
Google Web Font URL – all Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: http://fonts.googleapis.com/css?family=Bitter:400,700,400italic&subset=latin,latin-ext
Google Web Font Family – default value is: 'Bitter', serif
Dental Theme
Logo Image
Logo image you can add in the "Basic Settings" of template parameters. Read more on how to add a logo image. The path of logo image for dental theme is: images/dental/logo.png
Color Boxes
The dental theme is using the same module settings for the color boxes modules as JM Services main theme. The only thing you may need to do is to replace the icons. The icons for dental theme you will find in the following location: images/dental/modules/colorboxes/. To use them, you need to copy them and paste to the following location: templates/jm-services/images/.
Template Parameters
Dental theme is using the following template parameters:
Google Web Font URL – all Google Web Font you can browse here: http://www.google.com/webfonts
Default value is: http://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext
Google Web Font Family – default value is: 'Oswald', sans-serif
P. Responsive Layout
The "JM Services" 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.
Hide Modules on Small Screens
Read more on how to hide modules on small screens.
Q. 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.
Read more on 11 tips to speed-up your Joomla website.
R. Using the Template for the RTL Languages
On "JM Services" 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.
S. PSD Slices
The "JM Services" template is provided with PSD slices.
Read more on how to modify PSD slices.
T. 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-ImageSlider Documentation:
http://dj-extensions.com/documentation/dj-imageslider/
DJ-Menu Documentation: