Knowledgebase

Joomlabamboo template and extension documentation

Compatible with Joomla 2.5 /Joomla 3+ .

Please note: This template uses the T3 framework. You can download the latest release of the T3 plugin directly from the T3 GitHub repository.

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 Hub2 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 Hub2 template and make it the default - Download
  • Install JB Type - required for typography and font icons - Download
  • Install Zentools - slideshows, banners, grids etc - Download
  • Install the JB Maps - Google maps in a module - 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 Hub2 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

hub2-modulepositions

Controlling the main body in the Hub2 theme.

One of the big changes to the Hub2 theme is the ability to control the main content and sidebar widths from the template admin. If you have used our previous T3 themes (or any other T3 themes) then you will know that this is a quirky limitation in an otherwise highly configurable template.

The Hub2 theme changes this by adding the ability to determine the number of sidebars available in the template and also to use the draggable layout controls to determine the widths of these areas. Because of the way that the T3 framework calculates column widths we now need to duplicate template styles if you want to have pages with a different number of sidebars.

Adjust the number of sidebars

Once the main content area is enabled you will now see the main content block in the layout schematic under the layout panel. It is now possible to adjust the number of items in the main content. For best results we advise that you use up to 3 positions here.

Two-column-left-layout

Assign the main block and any other sidebars

Once you have selected the number of sidebars you want to display for this template style you can then assign the positions of the main content and sidebars.

selectmain

Two Column Layout

Two-column-left-layout

Three Column Layout

three-columns

Controlling the logo in the Hub2 theme.

Another change to the way our themes work is that much of the logo functionality has been moved out of the template. Previously the logo content was generated and controlled via the template settings however now the logo is controlled via a custom html module position.

Create the logo content.

The first part of the step is to create a new custom html module.

Once you have created a custom html module and published it we need to assign the logo position in the template's layout schematic. Just in the same way we assigned the main content or sidebar blocks to the page we also need to assign the logo to a position. By default the logo is positioned in the position that you see on the demo, however this is easily changed to a new position as per the screen shot below.

Default logo position

default-logo

 

Controlling the logo font in the Hub2 theme.

The logo font is controlled under the Theme menu item in the template administrator. The template automatically targets the module that is positioned to the logo position with the required settings to allow you to control the font-family used for this area of the template.

Logo-font-1

Logo-font-2

Controlling the position of the menu in the Hub2 theme.

The menu position in this template is also able to be positioned effectively anywhere on the page via the use of the T3 layout tool.

 

 

The Offcanvas panel

The offcanvas panel is a secondary content area that is hidden from the page until a user clicks on the off canvas toggle button. In the Hub2 theme this toggle button is positioned in the navbar to the right of the main menu.

Off-canvas-trigger

Offcanvas-position

Offcanvas settings

The off canvas settings are available under the addon panel in the template admin.

Offcanvas-1

The off canvas settings are available under the addon panel in the template admin.

 

Enable the off canvas sidebar

In addition to needing to publish a module to the off canvas module position you also need to ensure that the off canvas function is enabled.

Off-canvas Effect

You can choose from fourteen different animations for the off canvas effect.

Off-canvas Position

This setting determines the position of the page the off canvas is located. Left is to the left of the page while right is to the right of the page.

Off-canvas Trigger

This is the text used to accompany the button that triggers the off canvas effect.

Off-canvas Title

This is the text that is placed at the very top of the off canvas area above the off canvas content.

 

 

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

hub2 frontpage

Description

  • Logo - Custom Html module published ot the logo position. Logo fonts are controlled by the template settings.
  • Menu - Core Joomla menu module published to the menu position.
  • Banner Slogan - custom html module
  • Banner - Zentools slideshow
  • Banner-aside - Zentools using grid mode
  • Grid1 - Custom HTML Module
  • Grid4 - Zentools using grid layout and the module class "news"
  • Grid5 - Custom HTML module
  • Grid9 - Zentools Grid layout and the module class "news"
  • Tabs - Custom Html module pusblished ot the tabs position. All modules published here are automatically added to the tab layout.
  • Grid13 - Custom HTML module using JB Type to create the icons. Also has a module class suffix "large" added to it to make the icons large.
  • Grid17 - Zentools using an accordion layout
  • Grid18 - Zentools using a grid layout with margins between items removed
  • Bottom1 - Custom HTML module
  • Bottom2 - Custom Html module plus the Zen Social Module
  • Bottom3 - Custom HTML module
  • Footer - Core Joomla menu module.
  • Offcanvas position - The offcanvas position is not  shown in the diagram above howver it is controlled in the template settings under the addon panel in the admin. In order to have a module display here simply publish it to the off-canvas position.
 

Extensions used on the demo site

Adding an accordion menu to the sidebar.

In order to enable the accordion menu on your site you need to follow three key steps.

Enable the accordion in the template settings

The accordion settings can be found in the template administrator under the effects panel. Ensure that the "enable accordion" menu item is enabled.

Other accordion menu settings explained:

  • Always open first item

    This setting means that when the accordion is loaded on the page the first item in the menu will always be open.

  • Show active item

    When enabled this option ensures that the active menu item will always be open on the page.

  • Accordion Type

    The Accordion menu type means that when one menu item is opened then the previously opened item is closed. While the panel option means that when menu items are clicked open items remain open. In order to close each menu level the user needs to click on the top level menu item for that accordion level.

Add a module class to your menu

Now that the accordion menu scripts have been added it is necessary to add a module class suffix to the menu module. Adding the "accordion" module class to the module class suffix will automatically apply the correct code required to create the accordion menu.

Use text separators or menu headings for top level menu items

The accordion menu is designed to be flexible enough to accomodate both normal content links or accordion triggers for any of the top level menu items.

Joomla provides two types of menu items that can be used as top level menu items in the accordion menu.

The Text Separator or menu heading menu type will both function as triggers for the accordion menu.

A typical accordion menu setup looks like the example in the screenshot below.

Slideshow settings

The slideshow used in the Hub2 demo is an instance of the Zentools module.

Zentools grid in Banner Aside position

The content to the right of the slideshow is a zentools module published to the banner-aside position.

Zentools news module

The following settings are required to recreate the modules published to grid4 and grid8. Please ensure you add the module class suffix "news" as shown in the screenshot of the advanced panel below.