JA Orisite - Joomla template documentation

JA Orisite is compatible with Joomla 3 and Joomla 2.5. Please make sure your system meets the following requirements:

Joomla 3 System requirement

Software

PHP (Magic Quotes GPC off): 5.3.1 + (5.4+ recommended)

Databases

MySQL(InnoDB support required): 5.1+
MSSQL 10.50.1600.1+
PostgreSQL 8.3.18+

Web Severs

Apache 2.x+
Microsoft IIS 7
Nginx 1.0 (1.1 recommended)

Joomla 2.5+ system requirement

Software

PHP 5.2.4+ (5.4+ recommended)
MySQL: 5.0.4+

Web Sever

Apache: 2.x+
Microsoft: IIS 7
Nginx: 1.0 (1.1 recommended)

Browser requirement

The requirements are the same with both Joomla 2.5 and Joomla 3

Firefox 4+
IE (Internet Explorer) 8+
Google Chrome 10+
Opera 10+
Safari 5+

Development Environment

The requirements are the same with both Joomla 2.5 and Joomla 3

During development process, Localhost is preferred. You can use the following servers on your PC to develop your site.

Windows

WAMPSEVER
XAMPP for Windows

Linux

LAMP Bubdle
XAMPP for Linux

Mac OS

MAMP & MAMP Pro
XAMPP for Mac OS

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 for helping you to 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.

Making a New Website? - If you are planning to make a new website, 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 website? - If you are planning to use this template on your already live website, readHow 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 T3v2 Framework Plugin
Installing complimentary / included extensions
Custom HTML Modules
Using Template Typography
Third Party Configuration
Mega Menu configs

4. Install the Template

Browse and Download: Go to the Download page 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.

Template Configuration

JA Orisite 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 in the demo website).

Once 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: T3v2 template configurations are same in Joomla 1.5, 1.7 and 2.5, so the above guide link is valid for all.

Links to resources on T3v2 Framework templates and advanced configurations :

Overview
Developer Guides
Customization FAQs
Mega Menu - A missing menu system for Joomla
Video Tutorials (valid for Joomla 1.5, 1.7 and 2.5)

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

T3v2 Frameworkbased templates need the T3 Framework Plugin to be installed and enabled.

5. Install T3v2 Framework Plugin

Download and install T3v2 Framework 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. Install 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 will need to check the HTML codes and make sure to use the recommended HTML markup to get correct display. We provide the HTML code in this userguide.
3rd Party Extensions : This template uses JA Comment Component (with its plugins) that is also used for JA Nex Joomla J17. You will need to download JA Comment package, it is available to Developer members and JAEC members only.

Module Positions

View Module Position Image (used positions only).
Use Module Position Overlay in Template (used & empty module positions).

TIP: Read more about Checking and Finding Module Positions in T3 Templates.

Install and Configure Included Extensions

List of modules / plugins used in JA Orisite Template Demo

JA Slideshow
JA Contentslider
JA Accordion
JA Newsticker
JA Sidenews
JA Commentoff plugin (Available to JAEC and JA Developer members only)
JA Commenton plugin (Available to JAEC and JA Developer members only)
JA Comment plugin (Available to JAEC and JA Developer members only)
JA Comment component (Available to JAEC and JA Developer members only)
JA Latest Comment module (Available to JAEC and JA Developer members only)
JA System Tabs plugin
JA Popup plugin
JA System Typo plugin
JA Typo Button plugin
JA Extensions Manager component

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 Accordion Module

Code

Module Position : right
Module Suffix : no-padding

Back-end Settings for this module as in Demo

Front-end appearance

2. JA Content Slider Module

2.1 Must Read

Code

Module Position : user6
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

2.2 Let Write

Code

Module Position : user7
Module Suffix : badge-hot

Back-end Settings for this module as in Demo

Front-end appearance

2.3 Think Different

Code

Module Position : user8
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

2.4 Most Wanted

Code

Module Position : user9
Module Suffix : badge-pick

Back-end Settings for this module as in Demo

Front-end appearance

2.5 In the Mix

Code

Module Position : content-mass-top 
Module Suffix : no-border no-padding

Back-end Settings for this module as in Demo

Front-end appearance

2.6 Sport Today

Code

Module Position : ja-tabs 
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

2.7 Most Read

Code

Module Position : ja-tabs 
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

2.8 Popular

Code

Module Position : ja-tabs 
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

3. JA Newsticker Module

Code

Module Position : topbar
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

4. JA Typo Plugin

4.1 JA System Typo Plugin

This plugin is to embed typo styles to your system. Just install and enable the plugin, configuration is not required.

After installing and enabling the plugin, open the article you want to add typo. In the article edit form, select Typo button >> select typo type >> add it to your article >> customize it.

5. JA Comment Extensions

5.1 JA Comment Plugin

Back-end Settings for this module as in Demo

Front-end appearance

5.2 JA CommentOn plugin

This plugin i to enable comment form on a specific article. Once enabled, open the article you want and put the tag: {comment on} in any place in the article content field or click on the JAComment ON button under the content field of the article.

5.3 JA CommentOff plugin

This plugin is to disable comment form on a specific article. Once enabled, open the article you want and put the tag: {comment off} in any place in the article content field or click on the JAComment ON button under the content field of the article.

5.4 JA Latest Comment Module

Code:

Module Position : right
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

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

View Detail Documentation

6. JA Slideshow Module

6.1 Slideshow in Home page

Code

Module Position : slideshow
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

6.2 Slideshow in Virtual mart

Code

Module Position : slideshow
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

7. JA SideNews Module

7.1 Most Popular

Code

Module Position : accordion 
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

7.2 Upcoming releases

Code

Module Position : accordion 
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

7.3 Top Trends

Code

Module Position : accordion 
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

If you are not sure how to use Custom HTML Modules or accessing HTML Editor view. Read this Guide.

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

1. User1

Code:

Module Position : user1
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer Vestibulum Vestibulum interdum Curabitur condimentum. Justo nunc magnis justo pretium nunc mauris sodales pede urna nunc.</p>

Back-end Settings for this module as in Demo

Front-end appearance

2. User2

Code

Module Position : user2
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer Vestibulum Vestibulum interdum Curabitur condimentum. Justo nunc magnis justo pretium nunc mauris sodales pede urna nunc.</p>

Back-end Settings for this module as in Demo

Front-end appearance

3. User3

Code

Module Position : user3
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer Vestibulum Vestibulum interdum Curabitur condimentum. Justo nunc magnis justo pretium nunc mauris sodales pede urna nunc.</p>

Back-end Settings for this module as in Demo

Front-end appearance

4. User4

Code

Module Position : user4
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer Vestibulum Vestibulum interdum Curabitur condimentum. Justo nunc magnis justo pretium nunc mauris sodales pede urna nunc.</p>

Back-end Settings for this module as in Demo

Front-end appearance

5. User6

Code

Module Position : user6
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus.</p>

Back-end Settings for this module as in Demo

Front-end appearance

6. User7

Code

Module Position : user7
Module Suffix : badge-hot

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus.</p>

Back-end Settings for this module as in Demo

Front-end appearance

7. User8

Code

Module Position : user8
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus.</p>

Back-end Settings for this module as in Demo

Front-end appearance

8. User9

Code

Module Position : user9
Module Suffix : badge-pick

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus.</p>

Back-end Settings for this module as in Demo

Front-end appearance

9. User10

Code

Module Position : user10
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus.</p>

Back-end Settings for this module as in Demo

Front-end appearance

10. Template Joomla 2.5

Code

Module Position : user10
Module Suffix : NOT USED

HTML Code

<p>Proin magna mi, porttitor eget loboris sit amet, bibendum id orci. Nam arius mollis metus. Class aptent sodales velit. Proin pellenesque.</p>

<p class="readmore"><a href="#">Read more</a></p>

Back-end Settings for this module as in Demo

Front-end appearance

11. Get in touch

Code

Module Position : user10
Module Suffix : NOT USED

HTML Code

<p>Give us a call at<strong class="extra">+1 801 111 6543</strong></p>

<p>Email us at <strong class="extra">hello @orisite.com</strong></p>

Back-end Settings for this module as in Demo

Front-end appearance

12. User11

Code

Module Position : user11
Module Suffix : NOT USEDe

HTML Code

<p>Ut lacinia tempus id lacus convallis sem ipsum eu quam urna. Ultrices dis tellus Phasellus Cras at elit Vivamus ante et nisl.</p>

Back-end Settings for this module as in Demo

Front-end appearance

13. Useful Link

Code

Module Position : user11
Module Suffix : NOT USED

Back-end Settings for this module as in Demo F

Front-end appearance

14. Template Features

Code

Module Position : user11
Module Suffix : last-child

Back-end Settings for this module as in Demo

Front-end appearance

15. User12

Code

Module Position : user12
Module Suffix : last-child

HTML Code

<p>Ut lacinia tempus id lacus convallis sem ipsum eu quam urna. Ultrices dis tellus Phasellus Cras at elit Vivamus ante et nisl.</p>

Back-end Settings for this module as in Demo

Front-end appearance

16. Top Collections

Code

Module Position : user12
Module Suffix : last-child

HTML Code

<ul>

<li><a href="#">Customize Men's ZigSlash</a></li>

<li><a href="#">Customize Women's ZigFly</a></li>

<li><a href="#">Men's ZigActivate</a></li>

<li><a href="#">EWomen's ZigActivate</a></li>

</ul>

Back-end Settings for this module as in Demo

Front-end appearance

17. Top Trend

Code

Module Position : user12
Module Suffix : NOT USED

HTML Code

<ul>

<li><a href="#">Men's ZigActivate</a></li>

<li><a href="#">Women's ZigActivate</a></li>

<li><a href="#">GWomen's ZigActivate</a></li>

<li><a href="#">Customize Women's ZigFly</a></li>

</ul>

Back-end Settings for this module as in Demo

Front-end appearance

18. Right Position

Code

Module Position : right
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus. Suspendisse eu id lobortis Phasellus eget tellus porta Mauris quis libero. Cursus quis orci vestibulum leo nunc Sed interdum wisi fames ut. Curabitur felis Nulla lacinia nulla Nulla Aliquam enim Nulla penatibus diam. Pulvinar Curabitur justo id mollis congue ac facilisi egestas euismod.</p>

Back-end Settings for this module as in Demo

Front-end appearance

19. Sport History

Code

Module Position : inset2
Module Suffix : highlight-title

HTML Code

<div class="sport-history clearfix">

<div class="sport-team">

<div class="sport-team-avatar"><img src="/images/demo/stories/avatar-cab.jpg" border="0" alt="" /></div>

<div class="sport-team-name">CAB</div>

</div>

<div class="sport-team">

<div class="sport-team-avatar"><img src="/images/demo/stories/avatar-cla.jpg" border="0" alt="" /></div>

<div class="sport-team-name">CLA</div>

</div>

</div>

<p class="mission-time">Tuesday 8:00PM</p>

Back-end Settings for this module as in Demo

Front-end appearance

20. Top score

Code

Module Position : inset2
Module Suffix : dark-title no-padding

HTML Code

<table class="topscore-list">

<tbody>

<tr class="first odd">

<td class="first">1</td>

<td>Atlanta</td>

<td class="last">125</td>

</tr>

<tr class="even">

<td class="first">2</td>

<td>Memphis</td>

<td class="last">121</td>

</tr>

<tr class="odd">

<td class="first">3</td>

<td>Toronto</td>

<td class="last">117</td>

</tr>

<tr class="even">

<td class="first">4</td>

<td>Rebounds</td>

<td class="last">113</td>

</tr>

<tr class="last odd">

<td class="first">5</td>

<td>Boston</td>

<td class="last">108</td>

</tr>

</tbody>

</table>

<p class="viewmore"><a href="#">View more</a></p>

Back-end Settings for this module as in Demo

Front-end appearance

21. Photo

Code

Module Position : ja-tabs1
Module Suffix : NOT USED

HTML Code

<div class="img-photo clearfix"><span class="highslide-img"> {japopup type="image" title="Sample Images" content="images/demo/gallery/gl-1.jpg" width="594" height="386"} <img src="/images/demo/gallery/thumb-1.jpg" border="0" alt="Sample Image" /> {/japopup} </span> <span class="highslide-img"> {japopup type="image" title="Sample Images" content="images/demo/gallery/gl-2.jpg" width="594" height="386"} <img src="/images/demo/gallery/thumb-2.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img"> {japopup type="image" title="Sample Images" content="images/demo/gallery/gl-3.jpg" width="594" height="386"} <img src="/images/demo/gallery/thumb-3.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img"> {japopup type="image" title="Sample Images" content="images/demo/gallery/gl-4.jpg" width="594" height="386"} <img src="/images/demo/gallery/thumb-4.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img"> {japopup type="image" title="Sample Images" content="images/demo/gallery/gl-5.jpg" width="594" height="386"} <img src="/images/demo/gallery/thumb-5.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img"> {japopup type="image" title="Sample Images" content="images/demo/gallery/gl-6.jpg" width="594" height="386"} <img src="/images/demo/gallery/thumb-6.jpg" border="0" alt="Sample Images" /> {/japopup} </span></div>

Back-end Settings for this module as in Demo

Front-end appearance

22. Video

Code

Module Position : ja-tabs1
Module Suffix : NOT USED

HTML Code

<div class="vimeo"> </div>

Back-end Settings for this module as in Demo

Front-end appearance

23. Module Adv

Code

Module Position : content-mass-top
Module Suffix : no-border no-padding

HTML Code

<div class="adv"><img src="/images/demo/stories/banner.jpg" border="0" alt="Sample photo" title="Sample photo" align="middle" /></div>

Back-end Settings for this module as in Demo

Front-end appearance

24. Content Mass Top

Code

Module Position : content-mass-top
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus.</p>

Back-end Settings for this module as in Demo

Front-end appearance

25. Content Mass Bottom

Code

Module Position : content-mass-bottom
Module Suffix : no-border no-padding

HTML Code

<p>Ut lacinia tempus id lacus convallis sem ipsum eu quam urna. Ultrices dis tellus Phasellus Cras at elit Vivamus ante et nisl. Cursus augue malesuada molestie cursus dolor malesuada Quisque quis cursus ac. Tincidunt nibh pellentesque Vestibulum enim Cum ac interdum risus semper vitae. Volutpat hendrerit Mauris at porta sit urna cursus faucibus pede sit. Orci Vestibulum quis.</p>

Back-end Settings for this module as in Demo

Front-end appearance

26. Inset 2 Positon

Code

Module Position : inset2
Module Suffix : NOT USED

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus. Suspendisse eu id lobortis Phasellus eget tellus porta Mauris quis libero. Cursus quis orci vestibulum leo nunc Sed interdum wisi fames ut. Curabitur felis Nulla lacinia nulla Nulla Aliquam enim Nulla penatibus diam. Pulvinar Curabitur justo id mollis congue ac facilisi egestas euismod.</p>

Back-end Settings for this module as in Demo

Front-end appearance

27. High Light Title

Code

Module Position : right
Module Suffix : highlight-title

HTML Code

<p>Lorem ipsum dolor sit amet consectetuer vitae Donec leo quis volutpat. Sit interdum nec nibh nibh nunc Cum eu sit porttitor cursus. Suspendisse eu id lobortis Phasellus eget tellus porta Mauris quis libero. <strong style="color: &#91;URL=http://www.joomlart.com/forums/usertag.php?do=list&action=hash&hash=ccc&#93;#ccc&#91;/URL&#93;">Module Class Suffix</strong> highlight-title</p>

Back-end Settings for this module as in Demo

Front-end appearance

28. JA Tabs Module

Code

Module Position : right
Module Suffix : no-padding

HTML Code

<div>{jatabs type="modules" module="ja-tabs1" position="top" mouseType="click" animType="animFade"} {/jatabs}</div>

Back-end Settings for this module as in Demo

29. JA Tabs

Code

Module Position : tabs
Module Suffix : NOT USED

HTML Code

<div>{jatabs type="modules" module="ja-tabs" position="top" mouseType="click" animType="animFade"} {/jatabs}</div>

Back-end Settings for this module as in Demo

30. Top Menu Module

To display as Demo site, please follow step by step as below:

Step 1: Create all top menu items

Go to Administrator >> Menus >> Top >> Add New Menu Item Type

Back-end Settings: Top Menu Items

Item 1 - Contact Us - Menu Back-end Settings
Item 2 - Web link - Menu Back-end Settings
Item 3 - NewsFeeds - Menu Back-end Settings

Step 2: Create new Menu module

Go to Administrator >> Module Manager >> Add new Menu Module

Code

Module Position : topmenu
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

31. Search Top Module

Code

Module Position : searchtop
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

32. Main Menu module

Code

Module Position : user14
Module Suffix : _menu

Back-end Settings for this module as in Demo

Front-end appearance

33. Footer Module

Code

Module Position : footer
Module Suffix : NOT USED

Back-end Settings for this module as in Demo

Front-end appearance

I. K2 Component

1. Install

If you are new to this Joomla component, please read this guide.

2. Configure K2 component

2.1 Global Configuration:

Click Parameter button on the right Back-end settings

2.2 Category Configuration

As you can see on our Demo, each parent category uses different template: Orisite Blog uses Orisite_blog template while All Categories use Orisite style.

To build your website like our demo, navigate to Administrator >> Component >> K2 >> Categories

Orisite Blog category

All Categories

3. Configurations for K2 Modules as on our Demo

This instruction is a reference for developers using manual installation, a guide on how to setup K2 Component like on the demo website and the quick-start package.

Please refer to the official documentation on how to install and setup K2.

There are 5 modules of K2 component being used in JA Orisite.