Template Documentation

Thanks for taking the time to read over the content of this (non-exhaustive) documentation before posting to the forum or writing for support.

In these notes, we'll cover the basic usage and customization of this template, and are assuming a basic level of familiarity with Joomla on the part of the reader.



Over the years, we've used many different tools and resources for designing our templates. We've found the following tools to be very helpful and recommend them highly.

Uniform Server (FREE)

When developing for Joomla, we've found the Uniform Server to provide a great local development environment. When compared to its peers, we find it to be the easiest to use. Get it Here

Notepad++ (FREE)

This is not your average notepad. It's lightning-fast, expandable, and powerful. We've found this editor to be the easiest and most straight-forward code editing software around. It's absolutely free, so give it a try! Get it Here

Adobe Fireworks (Try for free)

This is the graphics program we use for creating the elements used in our templates. Get it Here




There are basically two options when it comes to installation of this template: 1) PJ Package (Demo Installer) or 2) Conventional Joomla! Template Installation.

PJ Package Installation

This allows you to install a clone of this demo with all of its functionality on your hosting environment. You can then edit its content and graphics to achieve your personalized Joomla site. We have packaged the installation using the Akeeba backup component.

Installation Steps:

1) Download the file. Upload and unzip to your website's root directory.

2) Create a new database for the installation to use.

3) Navigate to your website and follow the installer directions. Installation typically takes about 5 minutes. It is important that during the installation, you create your Super Administrator password.

Conventional Joomla! Template Installation

If you prefer installing this template onto an existing Joomla site, follow these steps:

1) Install the template as you would any other Joomla! Template, by navigating to the Extensions >> Extension Manager >> Installer and browsing to the template file (e.g.

2) Be sure to publish the main menu module to the "topMenu" position.


Width Configuration(s)

WidthsThe overall width of this template can be set to display as either a fixed number of pixels, or a fluid, percentage-based width.

Within the confines of this overall width, it is possible to have up to 5 columns displaying, dictated by the publication of the following modules: Outer-Left, Left, Right, Outer-Right. Each of these 4 modules' widths are set as a number of pixels via the template manager.

Whenever these modules are published on a page, the central "content" column will adjust automatically to accommodate them.






Module Positions

This template incorporates two methods for placing your modules into its layouts.

Classic Module Positions

Using the traditional module positioning scheme, you can publish your module to any of the following:

  • Header
  • Top
  • Top2
  • Top3
  • Outer-Left
  • Outer-Right
  • Left
  • Right
  • Footer
  • Banner
  • User1
  • User2
  • User3
  • User4
  • User5
  • User6
  • User7
  • User8
  • User9
  • User10
  • User11
  • User12
  • User13
  • User14
  • User15
  • User16
  • User17
  • Bottom-Fixed

Since the module positions are contractible, if you choose not to publish a certain module on a page, then the template's layout will auto-adjust to accommodate that space. This allows you a great deal of flexibility in choosing where to publish your modules, without having to make any changes to the css of the template. Certain module groupings, like User1-User3, will adjust to equally* share the space attributed to the group by width. The same is true for the groupings: User4 & User5, User6-User9, User10-User13 and User14-User17.




*Module Width Distribution

Width DistributionIn the template parameters, you will note a setting called "Module Width Distribution". With this set to "Equal", if only two modules from the group are published on a page, then they will equally share the space for that group. If set to "Offset", then the first module will occupy approx 70% of the group width, and the second module with be allotted 30% of the width.



Self-Columnizing Module Zones

This template also has self-columnizing module "zones", which allow you to achieve an unlimited number of columns across for your modules' layout. This is achieved by using a jQuery-based columnizer plugin to handle the splitting and positioning of any modules published to the same position. The module zones are mapped as follows:

  • TopZone1 (Beneath Group User1-User3)
  • TopZone2 (Above Left, Right and Main Content)
  • TopZone3 (Between Left and Right but Above Main Content)
  • MidZone1 (Beneath Group User4-User5)
  • BotZone1 (Beneath Group User6-User9)
  • BotZone2 (Beneath Group User10-User13)
  • FooterZone1 (Beneath Group User14-User17)

While each of these Zones arranges modules published to them ordered from left to right, you can also stack up to three rows per zone by denoting A, B, or C to the position.

Here's an example: You have four modules, each is published to position TopZone1A. They will equally split that zone space and arrange from left to right according to their ordering as modules.

You also publish 5 modules to TopZone1B. These create a new row beneat the "A" row, and columnize according to their ordering as modules.

Click Here for a screenshot of this scenario.


Load a Module in Your Content

You can place a module inside of your content articles with ease. Here's how:

1) Choose the module you want to display in a content article, and instead of choosing the position from the dropdown, simply type in a unique position name, such as "contentmodule1" and publish that module to all pages.

2) Now open the article in which you want to place the new module, and insert the following - BUT REMOVE THE * (asterisk):

{*loadposition contentmodule1}

No_Component Module Position

Sometimes you will wish to display a module on the page without having the component area showing up. We've found this to be useful in many front-page layouts. To do this, simply create a new module and publish it to the "no_component" position. Any page to which you publish this module will not display the central area of the template, allowing, for example, the display of only a slideshow published to the header on that page.


JS-based Template Features

LazyLoad Images

LazyLoad is a jQuery plugin which keeps images on your page from loading until they enter the viewport of the browser. On pages which are long and incorporate a lot of images in the content, this plugin can decrease the page load time significantly. You can choose to enable or disable this feature. Also, you can specify images which should not use the feature specifically by adding the class "nolazy" to the <img> tag.


Zoombox (here's the dev site) is a fantastic jQuery-based plugin which allows you to create very nifty zooming lightbox-like effects for any link on your page. This plugin can also be disabled if you wish not to load the script. To use it in your content, simply employ the "zoombox" class.


This template includes our own jQuery-based tooltip script and allows you to customize the look and feel of the tips with css in the templates_css.css file (Search 'Tooltips' ). The script is triggered by adding the class "pjTips" to any element on your page. The title and main text of the tips is delineated by two colons ( i.e. - TooltipTitle :: Tooltip main text. ) This, too can be disabled if desired via the template manager. Here's an example: HOVER OVER ME


Other Template Settings

Show Pure Joomla Footer Logo?

The logo linked to our website can be disabled here.

Show IE6 Warning

This template includes a warning for users of IE6 which will present the following message, as well as links to modern browser downloads, in a lightbox on their screen:

"Did you know that your Internet Explorer is out of date?
Internet Explorer 6 is no longer supported by Microsoft and it has also proven to have significant security flaws. To get the best possible experience using our website we recommend that you upgrade to a newer version or other web browser. A list of the most popular web browsers can be found below."

Show Date/Format

The date can be shown or hidden and formatted in several possible formats.


Social Networking Icons

The social networking icons we've included in this template can individually be enabled or disabled and the message which appears when you hover over them can easily be customized in the template manager. If you wish to create another of your own, we have made the source graphic files available in our downloads section, and you only need to take a peek at the file scripts/pj_social_icons.php to see how to add another linked button. These buttons are styled via the template_css.css file (Search 'Social' )


Customizing Graphic Elements

We produce our graphics using Adobe Fireworks (natively produced as 32-bit .PNG format), but also publish each original as a layered PSD.


LogoEach of our templates has a main logo file (logo.png) which can be found in the images/ directory. To customize this file, you will only need to open the source graphic file we provide (usually named 'logo_SOURCE.png'), customize the graphics, and export a 32-bit transparent PNG called 'logo.png'. You then overwrite the existing logo.png with your new one. In some cases, it may be necessary to make a bigger or smaller image, and so the corresponding css will also need to be manipulated. The pertinent css can be found in template_css.css (Search 'logo')

The sample below shows (in bold) which parts of the css might need to be changed to match your new file's dimensions and any positional changes:


#logo_frame {position:relative;height:0px;width:100%;}

#logo { height:90px; width:240px; background: url(../images/logo.png) no-repeat;position:absolute; top:0px; right:-17px;}