Monday, 31 December 2012 06:36

Module Chrome

This template comes with built in module style / chrome that can be used to implement core Bootstrap component functionality like tabbed layouts, sliders, modal windows and even the pop over display.


Granular control over module style

One of the key features of Joomla 3.0 is the ability to assign modules a specific module chrome.

Prior to Joomal 3.0 each module position was required to have the module style hard coded into the template. There were certain workarounds available for doing this in versions prior to Joomla 3.0 but workarounds to Joomla always come at a cost.


Assigning a new module chrome to a module.

Assigning a new module style to a module is as simple as selecting a style from the drop down list in the module manager.

1. In your module manager edit the moduel you want to assign the new chrome to.

2. Click on the Advanced options tab

3. Scroll down the page and select the module style from the select list.

4. Click apply.


Module style examples

The following module styles are available in this template.

  • zendefault - A default module chrome
  • zentabs - a tabbed interface
  • zenslider - use the module title to slide open or closed a module
Monday, 31 December 2012 02:16

Template Features



This template is built for Joomla 2.5 / Joomla 3.0 on the powerful T3 Joomla template framework.

It's a powerful scaffold to build your next Joomla website on and includes features such as:

  • Complete Bootstrap integration
  • Powerful templating layout tools
  • Easy colour customisation
  • Google font ready
  • Responsive layout and design
  • Multiple module chromes to display modules using the native bootstrap functions such as tabs, sliders, modals and more. 
  • A healthy array of typography and module classes using JB Type and built in styling.


Monday, 31 December 2012 00:19

Thememagic magically themes your site

thememagic1The T3 framework also offers an incredible visual tool for controlling the visible appearance of your site.

It's a LESS driven templating tool that allows you to create template styles on the fly. 

Need to change one of the preset styles but don't want to get your hand dirty? No problem ... just fire up Thememagic, change a colour setting, hit save an then you are done.

Monday, 31 December 2012 00:01

Responsive by design

This Joomla template offers is a responsive, mobile friendly, device agnostic template that offers complete control over the look and feel of your website . The template has been created so that it scales effortlessly regardless of the device the user is viewing the web site on. This means that whether your visitors are mobile or stuck to the desk you and your content look good.


Powerful visual tools for determining module layouts.

The new T3 framework offers an unprecedented control over responsive layouts. Giving you the ultimate control over the width and type of modules available on 5 different screen sizes - check out the screenshots below for more.

Control the number of modules to use on a single row at the click of a button.

Using the module position layout you can control the number of modules to display in a given row.



Granular module control

T3 now offers the ability to determine the name of the module you want to use in a particular position. Don't like what we have called an item? then no problem - just change it in the module position are in the template admin.



Control the width and visibility of those modules depending on the screensize.

T3 offers the ability to specify the width and number of modules assigned to a row across a pre-defined number of common screensizes. The screenshot below shows four modules published evenly in the first grid row of modules for wide screen sizes.



Desktop / Normal Screens

The screenshot below shows the same row with the grid2 module removed and the widths of each module adjusted to create a new layout - this will only be shown on normal / desktop screen sizes.



Phone sized screens

And finally on mobile screens the grid2 and grid3 positions have been removed and the modules that are left stretch to fill the full width of mobile screens.


Sunday, 30 December 2012 23:45

Solid template framework

Zen to the power of T3.

This template is built on the powerful T3 template framework.

T3 adds a new dimension to controlling and creating flexibile layouts for responsive Joomla templates and combined with the minimalism of our previous Zen Grid Framework templates, it's a combination that is hard to beat.

T3 offers an incredible amount of control and flexibility. With it's easy to use drag and drop interface, the way you control what goes where in your website just got a whole lot easier.


Key features of the T3 framework:

  • Drag and drop templating interface
  • Theme Magic interface for creating your own template style
  • Less compiled templating system which enables you to do more with less code.
  • High performance front and back end 
  • Built on Bootstrap to seamlessly work with other bootstrap based Joomla extensions
  • Complete control over module positions and module position names
  • Extended module chrome to leverage Bootstrap native functions such as sliders, tabs, modals and more.


Thursday, 20 December 2012 23:30

Module Positions

This template is built using the Zen Grid Framework and contains 52 module positions for you to use to create flexible page layouts. For a full understanding of how the module positions work in framework compatible templates please visit the Zen Grid Framework documentation.

The screenshot below highlights the modules available in this template. For a run down on how we created the demo site for this template please visit the setup menu item and review the documentation available there.

Thursday, 20 December 2012 23:27

Module classes

This template comes with a wide variety of module classes that can be used to change the appearance and structure of your module classes. 

The module classes are broken up into the three broad categories - strucure, function and appearance.

Structural module classes

Used to change the position of a module


  • top25 {margin-top: 25px}
  • top50 {margin-top: 50px}
  • top75 {margin-top: 75px}
  • top100 {margin-top: 100px}
  • top125 {margin-top: 125px}
  • top150 {margin-top: 150px}
  • top175 {margin-top: 175px}
  • top200 {margin-top: 200px}
  • top225 {margin-top: 225px}
  • top250 {margin-top: 250px}
  • top275 {margin-top: 275px}
  • top300 {margin-top: 300px}
  • top325 {margin-top: 325px}
  • top350 {margin-top: 350px}
  • top375 {margin-top: 375px}
  • top400 {margin-top: 400px}
  • top425 {margin-top: 425px} 
  • top450" {margin-top: 450px}
  • top475 {margin-top: 475px}
  • top500 {margin-top: 500px}

Functional module styles

Used to change the function of a module

All functional module classes are handled via the module chrome / style options in each module's module settings.

Functional module styling available includes:

  • zentabs - Bootstrap tab styling
  • zenmodal - Bootstrap modal style
  • zenslider - Bootstrap collapse style
  • zenpopover - Bootstrap Popover style

Appearance module classes

Used to change the appearance of a module

  • primary1
  • primary2
  • primary3
  • secondary1
  • secondary2
  • secondary3
  • inset
  • border
  • shadow
  • shadow2
  • hot - adds the word hot to the .moduletable h3 span:after
  • new - adds the word new to the .moduletable h3 span:after

The appearance module classes can be used in combination with each other to create more compel xmoduel styles. To use multiple styles together please ensure that each module class suffix is separated by a space as per the following example. Also please note that there needs to be a space before the start of the first class in order to render the class output properly:

 primary1 inset border


Font Icon Module classes

Add font awesome icons to your modules

Using a combination of module classes, it is possible to create a wide range of module styles using the font awesome font icons.

A typical module class suffix using the font icons looks like this:

icon icon-comments large bottom secondary1

  • icon - initiates the font icon display
  • icon-comments - selects the icon to display. You can see a full list of icons available on the typography page.
  • large - (optional) You can choose between tiny, medium or large which set the font-size of the icon as follows: 1em, 2em (default), 4em and 8em.
  • bottom - (optional) Displays the icon at the bottom of the module. By default the icon is set to display at the top.
  • secondary1 - as per the examples on this page this refers to the built in colour control in the template.

You can scroll down to the bottom of this page to see a very small selection of the styles in action.

Thursday, 20 December 2012 21:37

Reusable grid layouts for your content


The blocks of text below are controlled via width classes that are built into the Zen Grid Framework. The classes scale according to your browser width and are useful for employing complex or interesting content layouts directly within your Joomla content.

Thursday, 20 December 2012 21:15


This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

Thursday, 20 December 2012 08:46


Success usually comes to those who are too busy to be looking for it.

Henry David Thoreau

Resources for sentenced inmates

Legal Activities and Resources

Contact Us


Back to top