Knowledgebase

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.

Overview of default template settings

The screenshots below are taken from the template administrator and highlight the default settings for this template.

Contact us module

Contact+us+module.png

Mobile view

Mobile+view.png

Subpage module view

Subpage+module+view.jpg

Subpage view

Subpage+view.jpg

Starting with Intrepid 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 Intrepid 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 Intrepid 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

Screenshots of colours used in the intrepid template

Each screenshot represents the colours used in this theme.

hilite1

hilite1.jpg

hilite10

hilite10.jpg

hilite11

hilite11.jpg

hilite12

hilite12.jpg

hilite13

hilite13.jpg

hilite14

hilite14.jpg

hilite15

hilite15.jpg

hilite16

hilite16.jpg

hilite17

hilite17.jpg

hilite18

hilite18.jpg

hilite19

hilite19.jpg

hilite2

hilite2.jpg

hilite21

hilite21.jpg

hilite22

hilite22.jpg

hilite23

hilite23.jpg

hilite24

hilite24.jpg

hilite25

hilite25.jpg

hilite26

hilite26.jpg

hilite3

hilite3.jpg

hilite4

hilite4.jpg

hilite5

hilite5.jpg

hilite6

hilite6.jpg

hilite7

hilite7.jpg

hilite8

hilite8.jpg

hilite9

hilite9.jpg

hoilite20

hoilite20.jpg

Screenshots of module classes used in the intrepid template

The screenshots below highlight the specific implementation or appearance of the module classes found in this template.

Panelmenu

Panelmenu.jpg

Slidemodule

Slidemodule.jpg

nopadding1

nopadding1.jpg

nopadding2

nopadding2.jpg

primary1

primary1.jpg

primary2

primary2.jpg

secondary1

secondary1.jpg

secondary2

secondary2.jpg

Frontpage Overview

image

Description

  • Top date. The date in the top left hand corner is controlled via the template parameters under layout > general. When disabled the date will not show up. The date is published inside the top1 position so in order to control the width of the container that holds the date you need to control the width of the top1 position under layout > module widths in the template admin.
  • Create an Account Link. This link is generated by a core Joomla module published to the top4 position.
  • Customer Login Link. This link is displayed ont he page when you publish any module to the panel1, panel2, panel3 or panel4 position. The template provides the ability for you to control the text of the link in the case that the visitor is or isn't logged in. These strings can be added via the template parameters or via the template's language file.
  • Logo. The logo is a text type logo that uses the Gravitas One google webfont. The logo has some very elegant css3 applied to it to provide for the 3 dimensional shadow effect which degrades well on browser including ie8 and before.
  • Main Menu. The main menu is a core Joomla menu module that is published to the menu position. Please note that to render the superfish menu here you need to ensure the superfish option is enabled in the template but you do not need to add the module class -superfish.
  • Slideshow. The slideshow is an instance of the Zentools module using the slideshow layout. The demo draws images from a folder and the links are assigned using the external link function in the zentools module. The settings to recreate the layout for the slideshow can be seen in the screenshots below.
  • Grid4. The images and titles to the right of the slideshow position is another instance of the zentools module and is published to the grid4 position. It uses the Zentools grid layout and the setitngs can be seen in screenshots below.
  • Search. The search module is puslished to the search position. The position of the search module is determined by the position of other elements on the page. For example if the left column is published the search module will float to the left of the search bar. If only the right column is published or if the layout is displayed in full width or three column mode , then then the search bar will float to the right. On screens that are less than 800px in width the search button and form are hidden by default and a search magnifying glass icon appears in its place. The search form can be shown by clicking on the magnifying glass.
  • Left. The three images ot the left of the tabbed area are another instance of the zentools module published to the left position. This module uses the same settings as seen in the module setup for the grid4 position.
  • Tabs1 - Tab4. Modules are placed inside tab1-tab4 module positions but Tab name is controlled via template setting > Tools > Tabbed Modules. 
  • Tab1. The tab1 posiiton has an instance of the Zentools module in list mode. (see settings below).
  • Tab2. The tab2 position has a custom html module published to it.
  • Tab3. The tab3 position has an instance of the zentools module published to it that uses the same settings as the module published to tab1.
  • Tab4. The tab4 posiiton has a core Joomla login module published to it.
  • More Great information. This text is generated via the template and can be controlled by going to the layout > general settings in the template admin. if this option is blank then the block of text will not appear.
  • Bottom1. A custom html module is published to this position. It uses the JB_quote styling from the JB Type plugin as well as some lorem ipsum content that is laid out using the grids in content option from the editor drop down select menu.
  • Bottom2. This module is another custom html module.
  • Bottom6. This module is a core Joomla menu module entitled "destinations".
  • Footer. Joomla menu module is published to the footer position without any specific setting.
  • Social Icons. The Social icons are published to the bottom position with alignment to Left. These icons are controlled via the template parameters under tools > social icons.
  • Template width. The demo site uses a standard template width of 960px without left or right offset.
  • Contact page. As described above the contact page has a module position called contact that is ideal for publishing a google map to.
  • Mobile. The mobile position is a new module position and in this instance is suited to having the search module published to it. When enabled a magnifying glass icon is automatically added to the top right of the mobile view and when clicked opens the search module.
  • Toggle menu. As described in the responsive menu options in the core framework the togglemenu position can be used to publish a menu or any module of your choosing to display on mobile devices.

 

Zentools Slideshow settings

The following settings were used to create the zentools slideshow published to the grid1 module position.

 

Zentools Grid4 settings

The following screenshot details the settings used for the zentools module published to the right of the slideshow.

 

intrepidGrid4Zentools

 

 

Zentools Tab1 settings

The following screenshot details the settings used in the zentools module published to the tab1 position. 

intrepidTab1Zentools

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.

Grid1 Zentools settings

Grid1+Zentools+settings.png

Grid4 zentools settings

Grid4+zentools+settings.png

Tab1 Zentools settings

Tab1+Zentools+settings.png