JA Ores

1. Get to Know Your Template

  • Everyone should read the Template's Overview Article! This is a quick and complete overview of the template, from the colors included, to all of the powerful Joomlart complimentary extensions that come with it. You'll also find links to the LIVE Demo Site, the Download area, as well as the Forum where you can ask questions.
  • Need Help Getting Around Joomlart.com? We've created a QUICK ACCESS GUIDE to help you become a Joomlart Power User. This is a wonderful reference, full of tips on how to quickly find the template info, demo sites, module position guides and more. We don't want you to miss a thing!

2. Download Template and Extensions

Check download folder for the Quickstart, Template zip and other complimentary extensions zip files.

Plan your website Development

  • Making a New Site? - If you are planning to make a new site, use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
  • Installing on your live site? - If you are planning to use this template on your already live site, you should follow How to make your site look like demo site guide first to learn about the steps involved. Then you can follow the userguide below.

The user guide covers the following aspects:

  • Installing Template on your Joomla system
  • Installing T3 Framework 2 Plugin
  • Installing complimentary / included extensions
  • Custom HTML Modules
  • Using Template Typography
  • Mega Menu configs

4. Installing the Template

  • Browse and Download: Go to the Download folder of JA Orisite and download the Template zip file. Refer to this screenshot for the overview of the download folder.
  • Install the Template: Now install the Template on your Joomla 2.5 system. Follow This Guide if you are not familiar with the installation procedure.

If you are new to Joomla, check out our detail documentatation of How to Install Joomla Template

View Detail Documentation

Template Configuration

JA Lime template will install with Settings used on the demo website, so you can postpone the configuration until you complete the setup (install other modules / plugins used on the demo website).

Once you have completed the setup, you can come back to the template back-end and check the various options for customizing your template. Refer to this Universal T3 V2 Back-end Config Guide for options on how to customize your installed template.

Please Note: T3 V2 template configurations are the same in Joomla 1.5, 1.7 and 2.5, so the above guide link is valid for all.

Links to resources on T3 V2 Framework templates and advanced configurations:

Error? - I see “Missing T3” error on the website front-end?

T3 framework 2 based templates need the T3 Framework Plugin to be installed and enabled.

5. Installing T3 Framework 2 Plugin

(T3 system plugin)

Download and install T3 Framework 2 Plugin (aka T3 System plugin). Follow this guide if you are not familiar with the installation procedure. After the plugin is installed, enable it as described in the same guide.

6. Installing complimentary

  • Free Extensions: (aka complimentary / included extensions). We use many extensions on our demo site to provide greater flexibility and features. These are provided for free to our members.
  • Custom HTML Module: To match the design of the template, we also style (CSS) for Custom HTML modules using different div classes. You need to check the HTML codes and make sure to use the recommended HTML markup to get the correct display. We provide the HTML code in this userguide.
  • 3rd Party Extensions : JA Comment Component and JA Comment plugin are also used for JA Lime Joomla J25. You need to download JA Comment package. It is available to Developer members and JAEC members only.

Know your Module Positions

Installing and Configuring Included Extensions:

If you are new to Joomla, check out our detail documentatation of How to Install Joomla Extension

View Detail Documentation

List of modules / plugins used in JA Lime Template Demo

  • JA SlideShow Module
  • JA Bulletin Module
  • JA Twitter module
  • JA Sidenews Module
  • JA Comment Extension
  • JA Top Panel Module
  • JA T3 Framework Plugin
  • JA Thumbnail Plugin
  • JA Popup Plugin

JA Top Panel module is used for JA Lime for Joomla 2.5 and Joomla 3 to replace JA Cpanel module which was used for JA Lime for Joomla 1.5 because they have the same functions and JA Top Panel module is more compatible with J25 than Cpanel module.

IMPORTANT: We provide the screenshot of the settings used on our demo website. Make sure you configure your modules / plugins in the same manner to achieve demo site alike style / functions.

1. JA Slideshow Module

This one is a bit tricky. Please read the following instructions carefully. Use the settings recommended here for best results.

General Settings

Code

Module position: slideshow
Module class suffix: slideshow01

Parameter Settings

Back-end Settings for Slideshow as in Demo

Note: As you can see in the image above, the slideshow's source is From Image Folder, images are retrieved from the image folder whereas images are taken from the images/stories/slideshow folder. How to make slideshow run like our demo? Hereafter is the step-by-step instructions.

Step 1: Create slideshow image directory

Go to: yoursite\images\stories\, create the slideshow directory - place 3 slideshow images here.

Slideshow images should be in 450x210 pixels.

Step 2: Enter descriptions for each image

You enter descriptions for each image with format as below:

HTML Code:

[I][COLOR="red"][desc img= "image name" " url= "your url"]your desc[/desc][/COLOR][/I]

HTML Code

[desc img="sl-1.jpg" url="#"]
<h3>Welcome to JA Lime</h3>
<p>JA Lime comes with Demo Installation of <a href="#" title="Coming Soon">JA Comment Component</a>, check any article bottom for the comments link...</p>

<p>JA Comment is coming out soon as Enterprise Extension. This component is way ahead of its competitor and is fully loaded with all the features expected out of enterprise level extension....</p>
[/desc]

[desc img="sl-2.jpg" url="#"]
<h3>Super Cute Illustrations by Ariel Fajtlowicz</h3>
<p>At et id justo accumsan Donec a odio nibh id et. Quisque nunc nibh sit pretium turpis eget sed non Proin non. Justo id pede Vestibulum ornare Phasellus egestas.</p>

<p>Nullam nec In metus turpis eget convallis tempus Donec hac Donec. Orci wisi Fusce consectetuer quis sem et est dui...</p>
[/desc]

[desc img="sl-3.jpg" url="#"]
<h3>Amazing bedroom interior design</h3>
<p>At et id justo accumsan Donec a odio nibh id et. Quisque nunc nibh sit pretium turpis eget sed non Proin non. Justo id pede Vestibulum ornare Phasellus egestas.</p>

<p>Nullam nec In metus turpis eget convallis tempus Donec hac Donec. Orci wisi Fusce consectetuer quis sem et est dui...</p>
[/desc]

See our demo:

IMPORTANT : Please note, we use JA Slideshow module in over 25+ templates with different back-end settings. It is not possible to optimize all the back-end options for each template. So if some of the back-end settings do not work in JA Lime, it's not a bug.

2. JA Bulletin Module

This module is used at three different places with different settings.

Code

Module Position : right
Module Suffix : _nopadding

Back-end Settings for JA Bulletin Module with name: Popular posts

Front-end appearance

2. JA Quick Contact Module

2.1 Popular posts

Code

Module Position: page6
Module Suffix: NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

2.2 Latest News

Create new JA Bulletin module named: Latest News

Code

Module Position : user6
Module Suffix : NOT USED

Back-end Settings for JA Bulletin Module with name: Latest News

Front-end appearance

2.3 Popular News

Code

Module Position : user7
Module Suffix : NOT USED

Back-end Settings for JA Bulletin Module with name: Popular News

Front-end appearance

Create new JA Bulletin module named: Latest News

3. JA Sidenews Module

Code

Module Position : left
Module Suffix : _badge badge-top

Back-end Settings for this module as in Demo

Front-end appearance

4. JA Twitter Module

Code

Module Position : left
Module Suffix : _twitter

Back-end Settings of JA Twitter Module in Demo.

5. JA Top Panel Module

Code

Module Position : top-panel
Module Suffix : _toppanel

Back-end Settings for JA Top Panel Module

Note: As you can see in the parameter image above, our Top Panel module retrieves content from ja-toppanel position. You need to position your modules to "top-panel-module" position so that they can be shown in the dropdown toppanel.

6. JA Thumbnail Plugin

Back-end Settings for JA Thumbnail Plugin.

Note: we use thumbnail only for category blog layout, so thumbnail mode is Off for single article layout.

7. JA Popup Plugin

Back-end Settings for JA Popup Plugin.

8. JA Comment Component and JA Comment Plugin

JA Comment Component can be easily integrated into the articles and allows anyone to participate and leave their opinions on your website. Make sure that you install comment component and plugin first.

We have wiki for JA Comment component for more information and how to use JA Comment.

JA System Comment plugin is included to work with JA Comment component, so it must be enabled and here is the Back-end settingsfor it

9. JA Comment On Plugin

This plugin is to enable comment form in specific articles. To use this plugin, after you install and enable it, open the article (in back-end) you want to enable the plugin then click on the JAComment On button or input the tag:{jacomment on} in the content field of the article.

10. JA Comment Off Plugin

This plugin is to disable comment form in specific articles. To use this plugin, after you install and enable it, open the article (in back-end) you want to enable the plugin then click on the JAComment Off button or input the tag: {jacomment off} in the content field of the article.

We use a total of 8 Custom HTML Modules in JA Lime Template.

If you are not sure how to use Custom HTML Modules or how to access HTML Editor view, read this Guide.

We will provide you with the HTML Code (markup) for reference below, you need to replicate exactly and then change your content. Remember HTML code has special div classes, which are required for demo alike display.

1. Top description

Code:

Module Position : ja-top
Module Suffix : NOT USED

HTML Code

<p><img src="/images/stories/demo/sam-1.jpg" border="0" alt="Sample Image" width="35" height="35" style="float: right; margin-top: 3px; margin-bottom: 3px;" /> <a>Eros magna erat ut</a> d libero pede in a. Quam dolor in nisl eleifend, vestibulum frin lorem isphum...</p>

Back-end Settings for this module as in Demo.

Front-end appearance

2. About author

Code

Module Position : right
Module Suffix : _hilite
HTML Code
<p><img class="img-border left" src="/images/stories/demo/sam-7.jpg" border="0" alt="Image form: Corbis" /> <a href="http://joomla.org/" target="_blank" title="Joomla! Events">Eros magna erat ut</a>,  id libero pede in a. Quam dolor in nisl eleifend, vestibulum frin lorem  isphum dol pellentesque suscipit vivamus. Amet turpis vestibulum dolor  mus...</p>
Back-end Settings for this module as in Demo

Front-end appearance

3. Find me elsewhere...

Code
Module Position : right
Module Suffix : _nopadding
HTML Code
<ul class="social clearfix">
<li class="flickr"> <a href="http://www.flickr.com/dzuc">Flickr</a>
<div class="web-address">Flickr.com/dzuc</div>
</li>
<li class="digg"> <a href="http://www.digg.com/dzuc">Digg</a>
<div class="web-address">Digg.com/dzuc</div>
</li>
<li class="youtube"> <a href="http://www.youtube.com/dzuc">Youtube</a>
<div class="web-address">Youtube.com/dzuc</div>
</li>
</ul>
Back-end Settings for this module as in Demo

Front-end appearance

4. My Photos

Code
Module Position : right
Module Suffix : _blank
HTML Code
<p class="ja-gallery clearfix"><span class="ja-thumb first">{japopup type="image" content="images/stories/demo/gallery/sam-1.jpg" width="700" height="380" title="Sample image" }<img src="/images/stories/demo/gallery/thumb-1.jpg" border="0" alt="Sample image" />{/japopup}</span> <span class="ja-thumb">{japopup type="image" content="images/stories/demo/gallery/sam-2.jpg" width="700" height="380" title="Sample image" }<img src="/images/stories/demo/gallery/thumb-2.jpg" border="0" alt="Sample image" />{/japopup}</span> <span class="ja-thumb last">{japopup type="image" content="images/stories/demo/gallery/sam-3.jpg" width="700" height="380" title="Sample image"}<img class="last-image" src="/images/stories/demo/gallery/thumb-3.jpg" border="0" alt="Sample image" />{/japopup}</span> <span class="ja-thumb">{japopup type="image" content="images/stories/demo/gallery/sam-4.jpg" width="700" height="380" title="Sample image" }<img src="/images/stories/demo/gallery/thumb-4.jpg" border="0" alt="Sample image" />{/japopup}</span> <span class="ja-thumb">{japopup type="image" content="images/stories/demo/gallery/sam-5.jpg" width="700" height="380" title="Sample image"}<img src="/images/stories/demo/gallery/thumb-5.jpg" border="0" alt="Sample image" />{/japopup}</span> <span class="ja-thumb last">{japopup type="image" content="images/stories/demo/gallery/sam-6.jpg" width="700" height="380" title="Sample image"}<img class="last-image" src="/images/stories/demo/gallery/thumb-6.jpg" border="0" alt="Sample image" />{/japopup}</span></p>
Back-end Settings for this module as in Demo

Front-end appearance

5. Sample Module

Code
Module Position : user11
Module Suffix : NOT USED
HTML Code
<p style="margin-bottom: -15px;"><img class="img-border" src="/images/stories/demo/sam-6.jpg" border="0" alt="Sample image" width="179" height="80" /></p>
<p><a href="/../jatc_lime/" target="_blank">Super Cute Illustrations by Ariel Fajtlowicz</a> There are some illustration style that are pretty handy, like this one. I really find this style...</p>
Back-end Settings for this module as in Demo

Front-end appearance

6. Testimonial

Code
Module Position : user13
Module Suffix : testimonialModule
HTML Code
<p><a class="name_acticle" href="/../jatc_lime/" target="_blank">Binhcx</a> Estibulum dolor sit, integer mauris. Gravida et velit, erat sociis, eros  magna erat ut, id libero pede in a. Quam dolor in nisl eleifend,  vestibulum frin lorem isphum dol pellentesque suscipit vivamus. Amet  adiscing iditcarb...</p>
Back-end Settings for this module as in Demo

Front-end appearance

7. Recent comments

Code
Module Position : user8
Module Suffix : NOT USED
HTML Code
<ul class="recent-comments clearfix">
<li> <span class="user_comment">Dzuc on </span> <a class="item-comment" href="#">Id iaculis id, pulvinar ut imperdiet</a> </li>
<li> <span class="user_comment">Sasuka on </span> <a class="item-comment" href="#">Lorem ispum dolo siamet</a> </li>
<li> <span class="user_comment">Mihiro on </span> <a class="item-comment" href="#">Gravida scelerisque, ispum</a> </li>
<li> <span class="user_comment">Mihiro on </span> <a class="item-comment" href="#">Cras ante eros</a> </li>
</ul>
Back-end Settings for this module as in Demo

Front-end appearance

8. License and Copyright

Code
Module Position : user9
Module Suffix :  licenseModule
HTML Code
<p style="padding-top: 10px;">Condimentum dolor eu magna egestas neque vitae laoreet sed Sed purus. Phasellus Vestibulum velit elit nulla Lorem scelerisque vestibulum. Turpis lobortis Nam velit ac Integer pretium enim natoque tempus mauris. Ut nulla nec sollicitudin est tortor <a href="#" title="Sample link">Aenean vel est netus phasellus.</a></p>
<p>Tincidunt tellus urna id porttitor dolor ac facilisi In id nunc.</p>
Back-end Settings for this module as in Demo

Front-end appearance

1. Search

Code
Module Position : right
Module Suffix :  _search
HTML Code Back-end Settings for this module as in Demo

Front-end appearance

2. Login Form

Code
Module Position : top-panel-module
Module Suffix :  NOT USED
Back-end Settings for this module as in Demo

Front-end appearance

3. Top Menu

Code
Module Position : footnav
Module Suffix :  NOT USED
Back-end Settings for this module as in Demo

Front-end appearance

4. Footer

Code
Module Position : footer
Module Suffix :  NOT USED
Back-end Settings for this module as in Demo

Front-end appearance

JA Lime comes with multiple typography styles for headings, content, tables, buttons, quotes, lists and so on...

You can view the Typography Pages on the Demo site: Typography Page

And here is HTML code: Typography_Page_HTML_Code.txt

You can use the above HTML code for making similar page on your site and refer to the codes for using Typography.

IMPORTANT : These typography styles are specific to JA Lime template and if you use them in your content and later decide to change the template, the styles will be broken, because these styles depend upon the template based css files (typo.css). We recommend using minimum typography, if you plan to change your template in the future.

If you are new or confused, we recommend installing Quickstart on your localhost and use it as reference for configuration. This is the best way to work with any template.

Links to all the resources are provided above, you should read them carefully to take the maximum advantage of our products.