Joomlabamboo template and extension documentation

Compatible with Joomla 1.5 / Joomla 2.5 .

Please note: This template uses the Zen Grid Framework. You can download the latest version of the framework on the Zen Grid Framework download page.

All Themes built prior to January 2013 were built using the Zen Grid Framework while all themes after January 2013 were built using the T3 plugin. A select number of themes from before January 2013 have been moved to the T3 plugin.

Starting with Platform from a fresh installation.

The following steps outline the process involved for setting this template up in a new or existing Joomla installation. Please note: We recommend users use our quickstart packages if they have the opportunity to start completely from scratch.

Elements to install

  • Install the Platform template and make it the default - Download
  • Install JB Type - required for typography and font icons - Download
  • Install Zentools - slideshows, banners, grids etc - Download

Elements to modify

  • Change the position of the "Main menu" module to the "menu" position.
  • Set the "Show Title" setting of the main menu to Hide.
  • Remove the module and menu classes nav_pills and _menu in the advanced parameters for the menu module.
  • Change the position of the breadcrumb module to the "breadcrumbs" position.
  • Ensure that the module title for the breadcrumb module is also set to hide.
  • Depending on your needs you may like to set this module to not appear on the front page via the menu assignment settings in the module.

What's next?

At this stage you will have a very basic looking template ready for you to customise, add your content and start setting up the other modules you can see on the demo for the Platform template.

For more information on replicating the front page layout or other extensions used on this site please read the information provided on the frontpage and extensions tab.

Available module positions


Module Classes

About module class suffixes

Module classes are a core Joomla functionality that allow the user to specify how a specific module will appear. The class itself is added to the module in the module parameters.

Combining module classes:

Module classes can be combined to take advantage of multiple complementary styles. An example of a module class suffix using a combination of classes: "hot primary1 top50".

Structural classes

Structural classes can be used to change the general layout or structure of a module.

  • nopadding - this class removes all padding that may be set by default by the template.
  • The following classes are micro adjustment classes that allow you to adjust the top offset of a module in increments of 25px. They start at 25 and move through to 500px offsets in 25px increments.
  • top25
  • top50
  • top75
  • top100
  • top125
  • top150
  • top175
  • top200
  • top225
  • top250
  • top275
  • top300
  • top325
  • top350
  • top375
  • top400
  • top425
  • top450
  • top475
  • top500

Frontpage Overview



  • Social Icons. The social icons to the right of the ribbon are controlled via the template under tools > social icons in the template settings.
  • The Ribbon element. The ribbon element is controlled in the logo panel in the template parameters. You can enable or disable the ribbon via that setting.
  • Logo. The logo is controlled via the template parameters. The demo site is using Google font replacement and using the Muli font for the site name.
  • Left Menu. The left menu is a core Joomla menu module that uses the -panelmenu class suffix to generate an accordion menu layout. Please view this document regarding setting up the panel menu for details about how to set up the menu structure. The Zen Grid Framework version 2 provides the option of accordion menu, a panel menu and a selective panel menu as options for determining how the menu displays in this position.
  • Main Content. The main content area uses a standard front page / featured items menu type. We have used the loadposition syntax to embed an instance of the Zentools module displaying items from Joomla using the masonry layout. 
  • Right Column. The frontpage layout also helps to generate the pagination optiosn that you see to the right of the page when the browser is wider than 820px. When the browser width is less than 820px the pagination is shifted to the bottom of the page.
  • Right Ribbon / Hidden Panel Trigger. The ribbon on the top right of the page is the trigger for the hidden panel display. If you would like to disable this you need to ensure that there are no modules published to the panel1 to panel4 positions.


Zentools settings for the frontpage

The frontpage of the Platform demo site features the Zentools module using a masonry layout. The settings used in the demo site are shown below. This module is referencing items from the k2 component which is how we are able to display videos in the items.



Please note that teh category tag will sit above the image in this layout only if the image item is first in the list and then the category item directly follows it as per the screenshot above.


Controlling the left column, main layout and frontpage widths

The platform template uses a left aligned layout that changes the way that we calculate the various column widths. Please note that this is different to the way that column widths are normally calculated in the framework.

Platform essentially combines the overall template width as well as a single width (specified in px) in the template parameters to determine the width of the main content area.

The settings for this are available on the layout > Settings panel.



Left column width. This needs to be a px width value and controls the width of the left column. The left column will always sit on the left edge of the browser and sits to the left of all os the other positions.

Template Width. This setting controls the overal width of the page if the layout type is anythign other than 1140. If the layout type is 1140 then the width of the page is limited to a maximum width of 1140px.

Frontpage Width. The frontpage width is a new setting and essentially allows you to specify a different width for menu types that use a the featured or frontpage menu type. We implemented this so that users could take advantage of fullscreen fullwidth layouts but not be limited to the front page width on the sub pages.

The width of the main column. The main column width is calculated by subtracting the left column value + some padding from the overall template width. The column count for any module widths on the positions set within the main column (see the all module position page) can then be determined in the usual way that the framework calculates the widths for an item.

Extensions used on the demo site