Joomla 3.x
Template Documentation

Thank you for purchasing Joomla template. This documentation consist of several parts and shows you the entire process of setting up Joomla Web site from scratch. We did our best to make this manual as clear and easy to follow as possible.

What is Joomla CMS?

Joomla CMS is an open source solution for building rich content Web sites. It enables you to build Web sites and powerful on-line applications and it requires almost no technical skill or knowledge to manage. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available.

What is Joomla template

Joomla template is a skin for your Joomla CMS based Web site. In other words you can easily change your Joomla Web site appearance installing new template in a few easy steps. With all it's simplicity Joomla template is provided with all necessary source files and you are free to edit or extend it the way you need.

Files structure

The template package you downloaded contains several folders. Let's see what each folder contains:

  • Documentation - contains documentation files
    • Documentation (Installation and Editing).html - main documentation file. You are right here :)
  • Joomla - contains Joomla theme files
    • theme###.zip - main theme archive. Contains all theme files. Should be installed through Joomla extension manager
    • fullpackage.zip - contains complete Joomla installation with engine files, theme and sample content
    • unzip.php - file used to extract files from the fullpackage.zip when uploaded to the hosting server
  • Screenshots - contains template screenshots. Not for production
  • Sources - contains template source files
    • psd - template Adobe Photoshop source files (.psd)
    • to_the_root_folder - contains files and directories that should be uploaded to the root directory of your Joomla installation
    • dump.sql - database backup file. Contains theme sample content.
    • pkg_bundle.zip - contains additional extensions provided with the theme
  • fonts_info.txt - contains links where the template custom fonts can be downloaded
  • info.txt - contains instructions on how to extract source files
Before you proceed to setting up your Joomla Web site please make sure you are fully prepared. Please complete the following preparation steps:

Editing software

To feel comfortable working with Joomla template we recommend you to download all applications required. You can see the list of required software at the template preview page. The requirements may vary for different templates so we'll tell you here what is needed in general:

  1. First of all you need the right applications to extract the password protected sources_#########.zip archive. You can use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac).
  2. You may also need Adobe Photoshop application. It is used to edit .PSD source files and it necessary if you want to edit template design graphics and images.
  3. To edit template source code files you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text etc.
  4. To upload files to the hosting server you may need an FTP Manager like Total Commander, FileZilla, CuteFTP etc.

Hosting

As Joomla CMS is a PHP/MySQL based application you need to prepare a hosting environment to run Joomla.

If you have a live hosting please make sure it matches Joomla software requirements and is ready to be used for Joomla websites.

Otherwise you can run Joomla locally on your computer using the local server. To create a local hosting server please use the localhost applications as WAMP, AppServ, MAMP etc. Any of those can be easily installed as any other program and used to run Joomla.

Please check the tutorials below on how to configure local development environment:

To avoid unnecessary actions and save your time please choose the installation method you prefer:

  1. I don't have a Joomla website and I want to install it from scratch. (Complete Installation)
  2. I already have a Joomla based Web site and just want to change it's appearance installing new template.(Template Installation)

Complete Installation

Complete installation method can be used if you want to setup Joomla website from scratch. We assume that you have completed all preparation steps and have all necessary stuff.

Step 1. Uploading and unzipping

To start working with Joomla you need to upload files to your hosting server. This can be done using your hosting file manager or some third party FTP manager.

  1. Open your template package directory and go to the 'Joomla' folder
  2. Select 'unzip.php' and 'fullpackage.zip' files and upload them to your server( How to upload files to server. )
  3. In your browser type path to the 'unzip.php' file on your server (http://your_domain_name/unzip.php)
  4. You should see the following screen:
Unzip.php initial screen.

Img 1. Unzip.php initial screen.

  1. In the 'Choose your zip file' select box please select uploaded fullpackage.zip file.
  2. In the 'Unzip to' filed specify the directory where you want to extract files.
  3. Click 'Unzip' button to proceed.
Please make sure to set correct permissions for the directory where you are planning to extract files. Permissions should be CHMOD 755 or 777 depending on your server configuration.

Step 2. Creating Database

When you are done uploading files to the hosting server you can prepare new database for your Joomla website. You can create new database using database management tool from your hosting control panel (usually PhpMyAdmin).

Feel free to check detailed video tutorial on How to create a database

Step 3. Joomla CMS installation

Tip: You can check the instructions below or view the video tutorial on How to install Joomla 3 engine

Open your browser and in the address bar type root to your Joomla directory(e.g. http://your_domain_name/joomla). You should see the initial Joomla CMS installation screen:

1 Configuration

Img 2. Joomla CMS installation. Step 1. Configuration

Using the "Select Language" box choose the Joomla installation language.

Please note: "Select Language" box allows you to choose only the language of the Joomla installation process. It won't affect your Web site language.

In the "Main Configuration" area you need to fill all form fields. Required fields are marked with asterisk * symbol.

Fill "Admin Email", "Admin Username" and "Admin Password" fields in the right column to create new Joomla website user with administrative rights.

"Admin Email", "Admin Username" and "Admin Password" are required to access your Joomla Web site backend. Keep them safe.

When you are done click button in the top-right corner to proceed.

2 Database

Img 3. Joomla CMS installation. Step 2. Database

At the second step of the Joomla CMS installation you need to input your database details. If you are not sure please contact your hosting provider to get the correct details.

As you are installing Joomla from scratch you only need to input "Host Name", "Username", "Database Name" and "Password". You can usually leave other options default. Though there can be some differences depending on your hosting provider.

When you are done click button in the top-right corner to proceed.

3 Overview

Img 4. Joomla CMS installation. Step 3. Overview

You are almost done installing Joomla CMS. At the Overview step you need to select if you want to install Joomla Sample data.

Please note: Sample Data is required if you want to make your Joomla Web site appear as the template preview preview with all images, sample text and modules configured.

Select the Sample data package you want to install or select "None" of you want to setup pure Joomla website without any content.

In the Overview section you can check your installation settings and see if your hosting server matches Joomla requirements. If you have any red notification boxes in the "Recommended settings" section please contact your hosting provider for further assistance.

When you are done click button in the top-right corner to proceed.

4 Installation Complete

Congratulations! You have successfully installed Joomla CMS.

Img 5. Joomla CMS installation. Step 4. Installation Complete

For security reasons please delete the "Installation" directory from your Joomla root.

Now you are ready to proceed to configuring your Joomla CMS based Web site. Click "Site" button to view your Web site or "Administrator" to view Joomla backend.

Template Installation

This installation method can be used if you already have a Joomla website and just want to change the website appearance installing Joomla template.

1 Open Joomla administration panel and using the top menu go to "Extensions > Extensions Manager" screen.

Img 6. Joomla template installation. Step 1. Extensions Manager

2 Using the Package File field select the "theme###.zip" file from the "joomla" directory of your template package

Img 7. Joomla template installation. Step 2. Theme archive upload

Click button to install Joomla template.

3 When uploading is complete you need to activate installed template. From the top menu select "Extensions > Template Manager"

Img 8. Joomla template installation. Step 3. Template activation

Select your newly installed template and click "Make Default" button in the top left corner. Now you can view your website to see the changes.

Sample Data Installation

Sample data is used to make your Joomla website appear as the template preview page. It contains sample articles, images, modules and website settings etc. If you are not planning to install sample images or any other sample content please skip this step.

To install sample data you need to complete two simple steps.

1 Upload sample images.

To upload sample images please open your template package directory and go to the "sources" folder. There you should see the "to_the_root_directory" directory. It contains files that should be placed to your Joomla installation root. Please use the file manager to upload files to your server.

2 Import SQL file.

The final and most important step of the sample data installation is the import of the SQL file. SQL file is a backup of the sample database, all Joomla website data is stored there. SQL file can be imported using your database management tool (phpMyAdmin). The template SQL file - "dump.sql" is located in the "sources" directory of the template package.

Please DO NOT import SQL file if you have a live website as it will totally replace your website database and all your data will be lost.

Beware: before importing SQL file please make sure your database table prefix matches the table prefix in the SQL file.

You can check the table prefix directly in the database through the database management tool. Check for the tables names. The prefix is a set of symbols before the table name. (e.g. table "jos_assets" prefix is "jos_"). You can also find the database prefix in the "configuration.php" file in your Joomla root directory. Search for the line 19: public $dbprefix = 'jos_'; (where prefix is "jos_")

If the table prefixes don't match open "dump.sql" file with your code editor and using the Search & Replace tool (CTRL+F or CTRL+H hotkeys) replace "jos_" table prefix (used in the SQL file) with the one that matches your database.

Now you can import that SQL file to your database. Please check the detailed tutorial on how to import SQL file using phpMyAdmin tool

Extensions Installation

To extend Joomla CMS functionality we use some additional extensions: plugins, modules, components. All Extensions used in the template are located in the "sources" directory and for your comfort are packed to the single archive bundle "pkg_bundle.zip". The bundle can be easily installed as any other extensions using Joomla Extensions Manager(check Img6 and Img7).

Configuring Modules

Modules in Joomla are used to output content in some prepared positions. Available positions may vary in any particular template but general positions map can be seen below:

Img9. Joomla Template module positions map

As you can see the content area is marked with different color. It has been done as the content area can't handle any modules by default. It displays only main page content.

All positions are turned off if no modules assigned so they won't hamper you.

Please note: If you installed template sample data or used Complete installation method you can skip the following step as it is related to the manual modules configuration.

The table below lists all modules used in this template and shows how to configure them correctly. All modules can be accessed through Joomla Administration panel from the Extensions > Module Manager screen.

Img10. Joomla Modules manager

Modules Configuration Table

# Name Type Position Class Suffix Show Title Order Pages Additional info
1 Copyright mod_footer copyright no 1 All  
2 Archives mod_articles_archive aside-right yes 6 Blog
Blog Sub1
Blog Sub2
Blog Sub3
Blog Sub4
Blog Sub5
Blog Sub6
 
3 Superfish Menu mod_superfish_menu navigation navigation no 1 All  
4 Camera Slideshow mod_camera_slideshow showcase no 1 Home  
5 Social Media mod_menu copyright no 1 All  
6 Login Form mod_login aside-right yes 1 Testimonials
FAQs
 
7 Search mod_finder header offset3 finder yes 1 All  
8 Who We Are mod_articles_single maintop yes 2 About Us  
9 Job Opportunities mod_articles_single maintop yes 4 About Us  
10 History mod_articles_news maintop yes 3 About Us  
11 The Best of Professionals mod_articles_news mainbottom yes 4 About Us  
12 Services Overview mod_articles_news feature services-overview yes 1 Services  
13 Method mod_articles_single maintop yes 1 Services  
14 How it works mod_articles_single mainbottom yes 2 Services  
15 Additional Services mod_articles_single mainbottom yes 3 Services  
16 Offers mod_articles_single aside-left yes 1 Offers  
17 Useful Links mod_articles_single aside-left yes 1 Offers  
18 Selling mod_articles_single aside-left yes 1 Offers  
19 Increase Productivity mod_articles_single content-bottom yes 1 Offers  
20 Employment mod_articles_single content-bottom pull-right yes 1 Offers  
21 Categories mod_articles_categories aside-right yes 5 Blog
Blog Sub1
Blog Sub2
Blog Sub3
Blog Sub4
Blog Sub5
Blog Sub6
 

Custom HTML module configuration

For the custom HTML modules (type: mod_custom) there are sources .html files included. You may find them in the template package "sources" directory. Open .html file with your code editor and copy the code to the module Custom Output area in the Joomla admin panel.

Img11. Custom HTML module

When you are done click button to keep your changes.

Camera Slideshow module configuration

Camera Slideshow module is developed as a combination of default Joomla Articles - Newsflash module and Camera Slideshow jQuery plugin. By default Camera Slideshow module renders articles from "Slider" category (category can be changed). Each slide is a single article. To display slide image you need to load "Intro Image" to the appropriate article.

Img12. Article Intro image

To add Caption to the slides put some text to the Article body.

Tip: If you add Read More to the article body, slider will display only intro text - text before Read More.

All Camera Slideshow settings are available through Joomla Administration panel. Locate Camera Slideshow module in "Extensions > Module Manager" and click Camera Settings tab to configure slideshow.

You can check detailed video tutorials on how to configure Camera Slideshow module:

Elastislide module configuration

Elastislide module is a combination of default Joomla Articles Newsflash module and Elastislide jQuery plugin. By default Elastislide module renders articles from "Carousel" category (category can be changed). Each carousel item is a single article. To add image to the carousel you need to load intro image to the article as described at the Img12 illustration.

Same as images Elastislide carousel module can render article titles and text.

All Elastislide settings are available through Joomla Administration panel. Locate Elastislide module in "Extensions > Modules Manager" and click "Elastislide Settings" tab to configure carousel.

Configuring Pages

Contacts Page

Contacts page displays the contact form, address and Google Map. To change the contact details (contact email, address etc) go to the Components > Contacts > Contacts > Website Owner. Using the tabs at the top you can get access to various contact options.

To configure what should be rendered at the contacts page go to the System > Global Configuration > Contacts section

Google Map
To configure Google Map please edit the templates\theme###\html\com_contact\contact\google_map.php file. It contains the embedded iframe code from the Google Map website. You can replace it with your own one.

We did our best to make this documentation as clear as possible. However if you have any difficulties with Joomla template or any suggestions on improving template or documentation - feel free to contact our support team through the:

Additional Links