Introduction What can be found in this package and what it can be used for
Thank you for purchasing a Joomla template. This documentation consists of several parts and shows you the entire process of how to set up and administer a 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 requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made Joomla the most popular Web site software available. Learn More
What is a Joomla template?
A Joomla template is a skin for your Joomla CMS platform. In other words, you can easily change your Joomla Web site appearance installing a new template in a few easy steps. With all its simplicity a Joomla template is provided with all the necessary source files and you are free to edit or extend it the way you need.
What is VirtueMart 3.0?
VirtueMart is an Open Source E-Commerce solution (a component or a plug-in) for the Joomla! Content Management System.
It can be run as a Shopping Cart or in a Catalog mode. You need to install Joomla! first (as the "Framework") and then install & configure VirtueMart.Learn More
The template package you have downloaded consists of several folders. Let's see what each folder contains:
- Documentation - contains documentation files.
- documentation.html - the main documentation file. You are right here :)
- Joomla - contains the Joomla theme archive, quick install package and unzip script file.
- theme###.zip - the theme archive. Contains all the theme files. Should be installed through Joomla extension manager.
- fullpackage.zip - contains the complete Joomla installation package with engine files, theme and sample content (database dump, sample images).
- unzip.php - the file used to extract files from the fullpackage.zip when uploaded to the hosting server.
- Screenshots - contains the template screenshots.
- Sources - contains the template source files.
- psd - the template Adobe Photoshop source files (.psd).
- to_the_root_folder - contains the sample content files used to make your website appear as the template live demo. This folder content should be uploaded to your Joomla root directory.
- dump.sql - the database dump file. Contains the 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.
Prepare What do you need to make this work
Before you proceed to setting up your Joomla Web site please make sure you are fully prepared. Please complete the following preparation steps:
To feel comfortable working with the Joomla template we recommend downloading all the applications required. You can see the list of required software at the template live demo page.
The requirements may vary for different templates, so we'll tell you here what is needed in general:
- 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).
- You may also need the Adobe Photoshop application. It is used to edit .PSD source files and it is necessary if you want to edit template design graphics and images.
- To edit template source code files you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text etc.
- To upload files to the hosting server you may need an FTP Manager like Total Commander, FileZilla, CuteFTP etc.
As Joomla CMS is a PHP/MySQL based application, you need to prepare a hosting environment to run Joomla.
If you have 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 such 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 the local development environment:
Getting Started What to click to make this work
"I don't have a Joomla website and I want to install it from scratch."
Using this method you'll have the Joomla CMS engine, Joomla template, sample content, and all the required extensions installed.
"I already have a Joomla based Web site and just want to change its appearance by installing the new template."
Using this method you'll have the Joomla template and all the required extensions installed.
The complete installation method can be used if you want to set up a Joomla website from scratch. We assume that you have completed all the preparation steps and have all the necessary stuff.
Creating a Database
When you are done uploading files to the hosting server you can prepare a new database for your Joomla website. You can create the new database using the database management tool from your hosting control panel (usually PhpMyAdmin).
With the phpMyAdmin tool you will be able to create a new database in 3 simple steps: (check the slides below)
- Click the Database button from the top navigation menu to access the database listing.
- Input the database name into the "Create new database" field.
- Click the Create button on the right side.
Your database can be seen in the database listing now. Click on its name to get access to the database.
You can also check the detailed video tutorial on How to create a database
If you have any issues with creating a database, please contact your hosting provider for help and assistance.
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.
- Open your template package directory and go to the 'joomla' directory.
- Select 'unzip.php' and 'fullpackage.zip' files and upload them to your server (How to upload files to server).
- Type the path to the 'unzip.php' file on your server (http://your_domain_name/unzip.php) in your browser.
- You should see the following screen:
Img 1. Unzip.php initial screen.
- In the 'Choose your zip file' select box please select the uploaded fullpackage.zip file.
- In the 'Unzip to' field specify the directory where you want to extract the files.
- Click the 'Unzip' button to proceed.
Please make sure to set the correct permissions for the directory where you are planning to extract the files. Permissions should be CHMOD 755 or 777 depending on your server configuration.
Joomla CMS installation
Please make sure you have completed all the preparation steps and have all the necessary stuff.
Open your browser and type the path to your Joomla directory in the address bar (e.g. http://your_domain_name/joomla). You should see the initial Joomla CMS installation screen:
Step 1 Configuration
Using the "Select Language" box choose the Joomla installation language.
Please note: The "Select Language" box allows you to choose the language of the Joomla installation process only. It won't affect your Web site language.
You need to fill in all form fields in the "Main Configuration" area. Required fields are marked with the asterisk * symbol.
Fill the "Admin Email", "Admin Username" and "Admin Password" fields in the right column to create a 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.
Img 2. Joomla CMS installation. Step 1. Configuration
When you are done click the button in the top-right corner to proceed.
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. However, there can be some differences depending on your hosting provider.
Img 3. Joomla CMS installation. Step 2. Database
When you are done click the button in the top-right corner to proceed.
Step 3 Overview
You are almost done installing Joomla CMS. At the Overview step you need to select whether 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 live demo with all the images, sample text and modules configured. To make your template appear as in the live demo page select the sample data package named "sample_theme###" where ### is the number of your theme.
Select the Sample data package you want to install or select "None" if you want to set up a pure Joomla website without any content.
Img 4-1. Joomla CMS installation. Step 3. Overview. Sample data import
Below you can check if the database configuration and administration panel access details are valid and send them to your email address if necessary.
Img 4-1. Joomla CMS installation. Step 3. Overview. Configuration
You can also check your installation settings and see if your hosting server matches the Joomla requirements. If you have any red notification boxes in the "Recommended settings" section, please contact your hosting provider for further assistance.
Img 4. Joomla CMS installation. Step 3. Server settings
When you are done click the button in the top-right corner to proceed.
Step 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 directory.
Tip: You can view the video tutorial on How to install Joomla 3 engine.
Please note: if you finished the "Complete Installation" section, you can skip the next "Template Installation", "Sample Data Installation" and "Extensions Installation" sections as you have all these elements already installed.
Now you are ready to proceed to configuring your Joomla CMS based Web site. Click the "Site" button to view your Web site or "Administrator" to view Joomla backend.
The last but not least important step is to update the database:
- Go to Components->VirtueMart->Configuration->Configuration->, scroll down to the "Advanced Settings" section - mark the "Enable database Update tools" option and click "Save & Close" button in the top right corner.
- Now go to Tools->Tools & Migration menu - click the "Install tables or if necessary update them" button.
This was the "quick start" installation. After installing the fullpackage and activating the sample data in its configuration, you will get a completely installed VirtueMart2 template you purchased.
Even if you wish to perform the manual installation of Joomla!, the steps needed for this are identical to the ones required for the fullpackage installation. After that the next step will be installing and activating the Joomla! template you purchased.
This installation method can be used if you already have a Joomla website and just want to change the website appearance by installing a Joomla template.
Step 1. Open Joomla administration panel and go to the "Extensions > Extensions Manager" screen using the top menu.
Img 6. Joomla template installation. Step 1. Extensions Manager
Step 2. Using the Package File "Choose File" button browse for the "theme###.zip" file in the "joomla" directory of your template package.
Img 7. Joomla template installation. Step 2. Theme archive upload
Click the button to install the Joomla template.
Step 3. When uploading is complete you need to activate the 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 the "Make Default" button in the top left corner. Now you can view your website to see the changes.
Virtuemart3 installation (last version)
It is an assumption that you have already installed Joomla 2.5.14 Feel free to check our detailed video and text instructions on how to install Joomla content management system
1. First you need to download the latest package of Virtuemart 2.x.x here. You will need to download the file called com_virtuemart.2.0.xx_extract_first.zip.(last version)
2. Once the file is downloaded, unzip it into a desired folder or just place them on your Desktop for quick access. Inside the zip file there will be two files:
- com_virtuemart.2.0.xx.zip(last version)
- com_virtuemart_ext_aio.2.0.xx.zip(last version)
3. Now log into the Joomla admin panel with your username and password.
4.Go to Extensions > Extension Manager.
5. Click the Browse button and select the com_virtuemart.3.0.xx.zip(last version) file. Then click the Upload & Install button.
You should see the message "The installation was successful".
6. Install the other file called com_virtuemart_ext_aio.3.0.xx.zip(last version). Click the Browse button and select the com_virtuemart_ext_aio.3.0.xx.zip(last version) file. Then click the Upload & Install button. Once the installation is complete, you should see the Virtuemart link under the Components menu.
7. Check if the following plugins and modules have been installed. Go to the top menu Extensions > Module Manager. In the filter box type in vm and click Search. You should see the following Virtuemart modules:
Do the same for the plugin. Go to the top menu Extensions > Plug-in Manager. In the filter box type in vm and click Search. You should then see the following Virtuemart plugins:
8. Go back to the Module manager and enable the modules you would like to use on your website frontend. Here you can also set their positions on your webpages. Then go to your site frontend and check out the new VirtueMart module.
9. Next you will need to create a new menu link so the site users could navigate to your shop. To do so, click on Menus and select the desired menu you would like to point to the Store page. For example, you can add a link to the top menu, side menu and etc.
In this example we will use the top menu. Go to Menus > Top.
10. Click the New button in the top navigation panel.
11. Under Details, click the Select button next to the field Menu Item Type *.
Then you will have options to create your menu. In this tutorial we will select VirtueMart Categories Layout.
12. Give your link a Menu Title, and click the Save and Close button at the top.
Sample Data Installation
Sample data is used to make your Joomla website appear as the template live demo page. It contains sample articles, images, modules settings, website settings etc. If you are not planning to use sample images or any other sample content, please skip this step.
To install sample data you need to complete two simple steps.
Step 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.
Step 2. Import SQL file.
The final and most important step of the sample data installation is the import of the SQL file. The SQL file is a dump of the sample database, all Joomla website data is stored there. The 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 the 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 the 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 line 19:
public $dbprefix = 'jos_'; (where the prefix is "jos_").
If the table prefixes don't match, open the "dump.sql" file with your code editor and using the Search & Replace tool (CTRL+F or CTRL+H hotkeys) replace the "jos_" table prefix (used in the SQL file) with the one that matches your database. You can check the detailed video tutorial on how to change database prefix in SQL file.
Now you can import that SQL file to your database.
To import sample data to your database please perform these simple steps (check the slides below):
- Select your database from the database list in the left column in the phpMyAdmin tool.
- Click the "Import" button from the top navigation menu.
- Click "Choose file" and browse for the dump.sql file in the template package "sources" directory.
- Click the "Go" button to start importing the sample data.
You can also check the detailed tutorial on how to import SQL file using phpMyAdmin tool.
Joomla themes are provided with additional extensions: modules, plugins and components that are used to implement various functionality and features. All the additional extensions can be installed in a couple of clicks using the bundle package provided.
The bundle archive is located in the 'sources' directory of your template package and called 'pkg_bundle.zip'. It can be easily installed, as any other extension or theme, through Joomla admin panel > Extensions manager.
- Open the Joomla administration panel. From the top menu select 'Extensions'. From the dropdown select 'Extensions Manager'.
- Make sure the 'Install' section is selected in the left column.
- Click the 'Browse/Choose file' button and select the 'sources/pkg_bundle.zip' archive.
- Click the 'Upload and install' button to install all the modules.
In case your theme contains some extensions which have not been included into 'pkg_bundle.zip', you need to install each one separately. This can be done exactly as the 'sources/pkg_bundle.zip' installation through the 'Extensions Manager' interface.
The file names of extensions archives usually start with 'mod_', 'com_' or 'plg_,' so you will recognize them easily.
The template may have some modules that are not included to the default VirtueMart/Joomla! installation and should be installed manually. The procedure is the same as described in step 1 of this document.
- In your Joomla! administration panel select "Extensions > Extensions Manager".
- Click the Browse button and select the extension package from the template "sources" folder.
- Click the "Upload & Install" button.
- Go to "Extensions -> Module manager". The newly installed module should appear in the modules list.
Open the module and set the configuration options according to the Modules Configuration table.
After all the necessary changes are applied, save the values of each module by clicking the "Save & Close" button in the upper right corner.
You also need to upload the following folders to the root of your Joomla! installation:
Joomla website functionality can be enhanced using various Joomla extensions. Some of them are often used in our templates. This section will teach you how to work with custom extensions.
Img 11. Articles Newsflash (Advanced) module
The Articles Newsflash (Advanced) module is an enhanced version of the default Joomla Articles Newsflash module. In addition to the default module features, it offers extra configuration options and Bootstrap based module templates.
Number of columns - allows displaying articles in multiple columns.
Custom Link - allows you to display a custom link under the module content. It can be linked to the external URL or to some Joomla menu item.
Img 12. Custom Link
Pretext - allows displaying custom text before the module content.
Published Date - displays article published date.
Created by - displays article author.
Show intro images - allows displaying article intro image.
Intro image align - allows to align intro images.
Img 13. Image Swoop Module
The "Image Swoop" module is an outstanding responsive slider developed as a combination of the default Joomla “Articles Newsflash” module and the free open source jQuery plugin “Camera Slideshow”. It works perfectly on desktop and iOs or Android mobile devices. Compatible with all modern browsers starting from IE8.
The "Image Swoop" module has various configuration options, you can access them by opening the Image Swoop module in the Extensions > Module Manager section of your Joomla administration panel. All the main "Camera Slideshow" jQuery plugin options can be configured in the module settings area.
Img 14. Image Swoop settings
Hover the mouse cursor over the option title to see its description. You can also learn more about Camera Slideshow jQuery plugin options on the official website
TM Olark live chat module
Image 25. TM Olark live chat module
TM Olark is a live chat module for Joomla.
Image 25-1. TM Olark live chat module settings
In general settings you should add the website identifier which will show up after registration and filling in all the details at https://www.olark.com/install
Image 25-2. Website identifier in Olark control panel.
You can also get a 180 day free trial of the 6 Month Olark Monster Deal! plan. Just follow this link and fill in your personal data.
Рис. 31. Acymailing component
Acymailing is a newsletter component for Joomla!
Рис. 31-1. Acymailing component settings
The main Acymailing components page in the admin panel you can see on the screenshot above. More information you will find on the official site.
Рис. 31-2. Acymailing module settings
The Acymailing module settings page you can see on the screenshot above. More information you will find on the official site.
The Acymailing component package also installs some system plugins:
SW Facebook Display
Рис. 26. SW Facebook Display module
SW Facebook Display module displays the "Facebook Like Box".
Рис. 26-1. SW Facebook Display module settings
The main SW Facebook Display module settings page you can see on the screenshot above. More information you will find on the official site.
SW Pinterest Display
Рис. 27. SW Pinterest Display module
SW Pinterest Display module displays the "Pinterest Board Widget".
Рис. 27-1. SW Pinterest Display module settings
The main SW Pinterest Display module settings page you can see on the screenshot above. More information you will find on the official site.
SW Twitter Display
Рис. 28. SW Twitter Display module
SW Twitter Display module displays the "Twitter Widget".
Рис. 28-1. SW Twitter Display module settings
The main SW Twitter Display module settings page you can see on the screenshot above. More information you can find on the official site.
Рис. 29. TM Instagram module
TM Instagram displays the "Instagram Widget"
Рис. 29-1. TM Instagram module settings
The main TM Instagram module settings page you can see on the screenshot above. In the "Instagram username" field you should specify the Instagram profile name, in the "Number of photos" field specify the number of images to display in the widget, in the "Your Instagram CLIENT ID" insert your Instagram application ID. To get the Instagram ID, follow this link https://instagram.com/accounts/login/?next=%2Fdeveloper%2F and register a new account. Then open this link http://instagram.com/developer/clients/manage/ and create an application there. Then you will get your application data that includes the application ID (CLIENT ID).
Addendum Where to get help, support and additional information
We did our best to make this documentation as clear as possible. However, if you have any difficulties with the VirtueMart template or suggestions on improving the template or its documentation, feel free to contact our support team through:
Loading data from Google servers
Some countries have issues connecting to Google servers. This can cause issues loading Google Fonts and Java Script libraries from Google CDN. To resolve these issues please do the following:
Can't load Google Fonts:
- Open \templates\theme****\index.php file
- Locate the line:
- Replace it with the following:
At www.extensions.joomla.org you can download more than 6 thousands of modules, plugins and components to add various features to your Joomla website.
Both HTML markup and CSS styles used in our templates are semantically correct and valid. However some W3C errors still can take place. Making code 100% W3C valid eliminates the usage of modern website technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.