Knowledgebase

Joomlabamboo template and extension documentation

Hub 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.

Need help getting started?

Starting with Hub 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 Hub 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
  • Install jFlickr - Displays photos from your flickr stream - 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 Hub 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

image

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

image

Description

  • Logo - The logo is using the Droid Serif font via Google Font replacement.
  • Search - The search module is published to search position. The search icon is automatically displayed when the search module is published.
  • Banner - The JB Slideshow3 module is published to the banner position. You can see the specific configuration below. 
  • Banner - A custom html module is published to the banner position. 
  • Grid1 - The JB Slideshow module is published to the Grid1 position. You can see the settings we have used below.
  • Grid4 - An instance of the Microblog module is published to the grid4 position. It uses a module class called -display to create the layout you see on the demo site. The module uses the column layout in the microblog settings for this module.
  • Main Content Area - The main content is hidden on the front page of the Hub demo. To enable it you will need to uncheck the parameter in the layout settings in the template admin.
  • Grid13 - A custom html module i spublished to the grid13 position.
  • Grid16 - An instance of the microblog module is published to grid17 using the column layout. The module uses the -news module class suffix to replicate the styling you can see on that page.
  • Grid17 - A custom html module i spublished to the grid17 position.
  • Grid20 - An instance of the microblog module is published to grid20 using the column layout. The module uses the -news module class suffix to replicate the styling you can see on that page.
  • Grid21 - A custom html module i spublished to the grid21 position.
  • Grid24 - An instance of the microblog module is published to grid24 using the column layout. The module uses the -news module class suffix to replicate the styling you can see on that page.
  • Bottom1 - A custom html module with some social icons that can be found in the quickstart folder under the images/stories/icon folder.
  • Bottom2-6 - These modules are using latest news and most read modules.
  • Footer - the footer position has a core Joomla menu module published.

 

Slideshow settings

The screenshots below highlights the settings of the various modules included on the front page.

HubSlideshow

 

Microblog Settings

As mentioned previously the Microblog modules use two separate module class suffixes to achieve the different styles that you can see in the demo site.

Display - The microblog module published to the side of the slideshow uses the module class suffix -display.

Hub_Grid4_MIcroblog

News - The microblog modules published to grid12, grid16 and grid20 use the module class suffix-news.

Hub_news_microblog

Extensions used on the demo site

Screenshots of extensions used for the demo

The screenshots below are taken from the modules used in the demo and quickstart packages for this template.

Microblog pub;ished to grid4

Microblog+pub;ished+to+grid4.png

Microblog using news class

Microblog+using+news+class.png

Slideshow settings for Hub

Slideshow+settings+for+Hub.png

Main Menu