Arashtad Ltd.
Web & Graphic Solutions

Arashtad Demo Builder 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

Arashtad Demo Builder, 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 Arashtad Demo Builder in your website's front-end such as demo name, image, description, demo link, purchase link, version and creation date. Using Arashtad Demo Builder 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 Arashtad Demo Builder 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

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


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

Installation

For installing Arashtad Demo Builder 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 Arashtad Demo Builder installed and ready to use:
1. From the Joomla! top menu go to: Extensions > Extension Manager

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


2. Click on the "Upload Package File" tab

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


3. Click on the "Choose File" button, browse your computer to find the Arashtad Demo Builder package and double click on "com_Arashtad Demo Builder.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_Arashtad Demo Builder.zip" file
7. Click on the "Upload & Install" button again in order to install the Arashtad Demo Builder default template
8. From the Joomla! top menu, go to: Menus > Main Menu > Add New Menu Item

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


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

Arashtad Demo Builder - 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

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


14. Click on "Arashtad Demo Builder - Default" link to go to its management area

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


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

Arashtad Demo Builder - 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 "Arashtad Demo Builder" menu from the main menu of your website to see the Arashtad Demo Builder working there.

Make it use

Using Arashtad Demo Builder, 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 > Arashtad Demo Builder
  • 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.

Arashtad Demo Builder - 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 > Arashtad Demo Builder.
  • 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.

Arashtad Demo Builder - 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 > Arashtad Demo Builder.
  • 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.

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos

Uninstallation

For uninstalling Arashtad Demo Builder, 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 Arashtad Demo Builder. 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, Arashtad Demo Builder is completely uninstalled from your website now.

Customization

Although Arashtad Demo Builder 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 Arashtad Demo Builder.

Stylesheet

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

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


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

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


Client-Side Scripts

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

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


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

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


Logos and Images

Arashtad Demo Builder 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 / Arashtad Demo Builder / tmpl / images / logo-desktop.png
and
[installation-package] / site / views / Arashtad Demo Builder / tmpl / images / logo-mobile

Arashtad Demo Builder - Joomla! 3.x Component to Display Live Demos


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

Arashtad Demo Builder - 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 Arashtad Demo Builder 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 Arashtad Demo Builder 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 > Arashtad Demo Builder. 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 Arashtad Demo Builder instead of the latest one. This feature is added to Arashtad Demo Builder by Michael Pignataro (www.corephp.com). Special thanks to him for this great job.

  Download this Documentation in PDF format

Follow us

We support our clients via social medias. Also, the latest products, services and content on Arashtad is immediately shared on our fans.