Arashtad Ltd.
Hight Quality Web and Graphic Solutions

iDemo; Demo Site for Joomla 3 - 5.0 out of 5 based on 1 vote

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

iDemo v1.2 Documentation

Free Live Demo Frame for Joomla! 3

 

Author Information

Author: Amin Shahrokhi
Author Email: support [at] arashtad.com
Author URL: https://arashtad.com
Creation Date: March 27, 2014
Copyright: © 2011 - 2016 Arashtad Ltd. All Rights Reserved.
Last Update: Apr 8, 2014

Instruction

iDemo, is a Joomla! 3.x component. This extension makes you able to have a full functional demo frame on your website. There are various information which can be presented by iDemo in your website's front-end such as demo name, image, description, demo link, purchase link, version and creation date. Using iDemo is too easy and does not need any coding knowledge. This documentation assists you in using and customizing this component as simple as possible. Some of the iDemo features go following in order to inform you about its facilities:

  • Fully responsive
  • BootStrap Compatible
  • FontAwesome Support
  • Easy to Use and Costomization
  • Dedicated Joomla! Template+
  • Ongoing Support
  • And More…

Package Contents

iDemo - Joomla! 3.x Component to Display Live Demos


There are 2 archive files included in the package you have. The "com_idemo.zip" is the component which you will use for creating your demo website and the "tmpl_idemo.zip" file is a simple Joomla! template which must be used as the default template of the iDemo menu item. You will find out the usage of these files by reading the next paragraphs.

Installation

For installing iDemo log into your Joomla! administrator panel by calling [ your-domain.com ]/administrator and giving your username and password. Then follow the steps below to have iDemo installed and ready to use:
1. From the Joomla! top menu go to: Extensions > Extension Manager

iDemo - Joomla! 3.x Component to Display Live Demos


2. Click on the "Upload Package File" tab

iDemo - Joomla! 3.x Component to Display Live Demos


3. Click on the "Choose File" button, browse your computer to find the iDemo package and double click on "com_idemo.zip" file
4. Hit the "Upload & Install" button and wait for the component to be installed
5. Click on the "Choose File" button again
6. Browse your computer and this time double click on "tmpl_idemo.zip" file
7. Click on the "Upload & Install" button again in order to install the iDemo default template
8. From the Joomla! top menu, go to: Menus > Main Menu > Add New Menu Item

iDemo - Joomla! 3.x Component to Display Live Demos


9. Name the new menu item as "iDemo" and then hit the "Select" button
10. In the popup window, scroll down and click on the "idemo" item
11. In the opened tab click on the "iDemo" link

iDemo - Joomla! 3.x Component to Display Live Demos


12. Now click on the "Save & Close" button
13. From the Joomla! top menu go to: Extensions > Template Manager

iDemo - Joomla! 3.x Component to Display Live Demos


14. Click on "iDemo - Default" link to go to its management area

iDemo - Joomla! 3.x Component to Display Live Demos


15. Click on the "Menu assignment" tab
16. Find the "iDemo" menu item and check the checkbox next to it

iDemo - Joomla! 3.x Component to Display Live Demos


17. Hit the "Save & Close" button

Now, you have followed the correct way and have made it! Now, you can take a look at your website front-end and click on the "iDemo" menu from the main menu of your website to see the iDemo working there.

Make it use

Using iDemo, you can run three types of maintenance on your live demos.

  1. Create a Demo
  2. Edit a Demo
  3. Delete a Demo

Now, we go through this subject and review all of the works you can do by the component, one by one.

Creating a Demo

To create a new demo, from the Joomla! top menu, follow the steps below:
  • Go to: Components > idemo
  • Click on the "New" button, on the top left side of the page
  • In the first enable input (Name), type the name of the demo
  • In the textarea below, write a short description for your demo (the ideal length is 100 characters).
  • Make the media manager use to select a thumbnail for the demo. The correct dimension for the thumbnail is 178 x 130px.
  • Type the demo link of the item, in the "Demo Link" input.
  • Type the purchase link (the product shopping page) of the demo, in the "Purchase Link" input.
  • Next input holds the version of the demo/product
  • The last field is for assigning the creation date of the item
  • Now, you can click on the "Save & Close" button, go to fron-end and see the demo is created successfully.

iDemo - Joomla! 3.x Component to Display Live Demos


Editing a Demo

To edit an item, follow the steps below:
  • From the Joomla! top menu, go to: Components > idemo.
  • In the table you see, find the item you would like to edit and click on its name.
  • Modify the information as you wish and hit the "Save & Close" button.

iDemo - Joomla! 3.x Component to Display Live Demos

Deleting a Demo

To delete a demo from the database, follow the steps below:
  • From the Joomla! top menu, go to: Components > idemo.
  • Check the checkbox next to the item that you would like to delete.
  • Click on the "Delete" button on the top left side of the page.

iDemo - Joomla! 3.x Component to Display Live Demos

Uninstallation

For uninstalling iDemo, go to Extensions > Extension Manager and from the left side menu, click on the "Manage" link. Now, you can fill in the search box and look for idemo. After clicking on the search button, you will find 2 items. Check both of them and click on the "Uninstall" button under the Joomla! top menu. As you can see in the message box, iDemo is completely uninstalled from your website now.

Customization

Although iDemo is designed absolutely clean and according to the latest mode of design, starndards and technology, but you may would like to make some changes on its appearance or functionalities. Read this section to find the exact paths of the files and folders which you may need to find, in order to customize iDemo.

Stylesheet

All the CSS codes, effecting on the iDemo appearance is located in:
[installation-package] / site / views / idemo / tmpl / css / master.css

iDemo - Joomla! 3.x Component to Display Live Demos


Also, if you have installed iDemo and you would like to make changes on it after installation, you will find the mentioned file at:
[root] / components / com_idemo / views / idemo / tmpl / css / master.css

iDemo - Joomla! 3.x Component to Display Live Demos


Client-Side Scripts

iDemo uses JQuery as the client-side scripting language. You can find the main script functions on the following path:
[installation-package] / site / views / idemo / tmpl / js / master.js

iDemo - Joomla! 3.x Component to Display Live Demos


Also, if you have installed iDemo and you would like to make changes on it after installation, you will find the mentioned file at:
[root] / components / com_idemo / views / idemo / tmpl / js / master.js

iDemo - Joomla! 3.x Component to Display Live Demos


Logos and Images

iDemo has two logos. the "logo-desktop.png" file for desktop screen and the "logo-mobile.png" file for smaller screens. You can find both at :
[installation-package] / site / views / idemo / tmpl / images / logo-desktop.png
and
[installation-package] / site / views / idemo / tmpl / images / logo-mobile

iDemo - Joomla! 3.x Component to Display Live Demos


Also, if you have installed iDemo and you would like to change images after installation, you will find the mentioned files at:
[root] / components / com_idemo / views / idemo / tmpl / images / logo-desktop.png
and
[root] / components / com_idemo / views / idemo / tmpl / images / logo-mobile.png

iDemo - Joomla! 3.x Component to Display Live Demos

Sources & Credits

Special thanks to brilliant brains of the world. People/Companies who have really shaked the world by their superb jobs. Some of these stars have helped iDemo project to be handled since they have helped millions of projects before:

  • JQuery
  • Twitter BootStrap
  • FontAwesome
  • PHP .net
  • www.Joomla.org

Changedlog

Version 1.1

Apr 8, 2014

  • Fixing the problem with height of the frame which was cause of not showing the entire demo page.

Version 1.2

May 11, 2014

  • The ability recognizing the query strings added to the application to show a specific demo istead of the latest one which is shown as default. With iDemo v1.2 you can use query strings to show a specific demo instead of the latest demo which is shown as default. The query is "siteid" and the value will be an integer pointing to the demo ID. You can find the demo ID at this path: Components > idemo. The way you can deal with this feature is adding a query string to the end of the demo site URL e.g. if your demo site is www.your-site.com/demo and you have 5 demos on it, one can see the latest demo added, by default but by calling www.your-site.com/demo?siteid=2, users can see the second demo of iDemo instead of the latest one. This feature is added to iDemo by Michael Pignataro (www.corephp.com). Special thanks to him for this great job.

  Download this Documentation in PDF format