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.

Collapsed nav

Collapsed+nav.jpg

Expanded Nav

Expanded+Nav.jpg

Featured item display

Featured+item+display.jpg

Featured item settings in joomla15 bodyclass

Featured+item+settings+in+joomla15+bodyclass.jpg

Featured item settings in joomla15

Featured+item+settings+in+joomla15.jpg

Featured items settings in K2

Featured+items+settings+in+K2.jpg

Featured items settings in joomla25

Featured+items+settings+in+joomla25.jpg

Togglemenu Example

Togglemenu+Example.jpg

Togglemenu on small screens

Togglemenu+on+small+screens.jpg

Starting with Highline 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 Highline 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 Highline 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 highline template

Each screenshot represents the colours used in this theme.

Adrift

Adrift.png

Beauty

Beauty.png

Bold

Bold.png

Brown

Brown.png

BurntPond

BurntPond.png

CheerUp

CheerUp.png

EcoBrown

EcoBrown.png

EcoFresh

EcoFresh.png

Forever

Forever.png

Frog

Frog.png

GoldFish

GoldFish.png

Greenish

Greenish.png

Growth

Growth.png

Melon

Melon.png

Moo

Moo.png

Origami

Origami.png

Pastel

Pastel.png

Silver

Silver.png

SugarRush

SugarRush.png

TechUntitled-3_r40_c2

TechUntitled-3_r40_c2.png

Thoughts

Thoughts.png

Very

Very.png

WinterChic

WinterChic.png

Screenshots of module classes used in the highline template

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

border

border.png

inset-primary1

inset-primary1.png

inset-primary2

inset-primary2.png

inset-secondary1

inset-secondary1.png

inset-secondary2

inset-secondary2.png

inset

inset.png

inset2-primary1

inset2-primary1.png

inset2-primary2

inset2-primary2.png

inset2-secondary1

inset2-secondary1.png

inset2-secondary2

inset2-secondary2.png

inset2

inset2.png

lines-primary1

lines-primary1.png

lines-primary2

lines-primary2.png

lines-secondary1

lines-secondary1.png

lines-secondary2

lines-secondary2.png

lines

lines.png

linesbottom-primary1

linesbottom-primary1.png

linesbottom-primary2

linesbottom-primary2.png

linesbottom-secondary1

linesbottom-secondary1.png

linesbottom-secondary2

linesbottom-secondary2.png

linesbottom

linesbottom.png

linestop-primary1

linestop-primary1.png

linestop-primary2

linestop-primary2.png

linestop-secondary1

linestop-secondary1.png

linestop-secondary2

linestop-secondary2.png

linestop

linestop.png

notice

notice.png

primary1

primary1.png

primary2

primary2.png

secondary1

secondary1.png

secondary2

secondary2.png

shadow

shadow.png

success

success.png

titleleft

titleleft.png

titleright

titleright.png

warning

warning.png

Frontpage Overview

image

Description

  • 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.
  • Logo. The logo is an image type logo published to the setting "On same row as nav" using center positioning. The logo width has been assigned a width of 4. 
  • Social Icons. The Social icons are published to the menu position and aligned to the right. These icons are controlled via the template parameters under tools > social icons.
  • 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 bee seen in the screenshots below.
  • Grid4. The items below the slideshow position is another instance of the zentools module and is published to the grid4 position. It uses the Zentools grid layout with filters enabled and the settings can be seen in screenshots below.
  • Bottom1. A custom html module containing the text "Highline - Building relationships through better communication." is published to this position. 
  • Footer. Joomla menu module is published to the footer position without any specific setting.
  • Template width. The demo site uses two widths - 90% is assigned to the frontpage view while the default template width is 960px.
  • Contact page.  As described above the contact page, has a published module position called contact - this is ideal for the insertion of a google map.
  • 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.

 

Frontpage category menu filter

There is second menu-like category filter under slideshow. This menu is created by ZenTools and will not be visible in case you have any java-script issue or conflict on your site. Steps to troubleshoot this:

  • 1) Reinstall ZenTools with latest release (do not uninstall ZenTools before new installation)
  • 2) Resolve jQuery issues (see here: http://docs.joomlabamboo.com/getting-started/how-to-resolve-jquery-conflicts)

Please, do not forget to enable Category Filter inside ZenTools module Filter Options.

 

Zentools Slideshow settings

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

Highline-Frontpage slideshow

 

Zentools Masonry Grid4 settings

One of the key features of this theme on the frontpage is the Zentools derived Masonry layout. As of Zentools v1.5.5 we added the ability to target featured items in the zentools layout with a specific class called "featured". Not all themes take advantage of this class and while the module itself does not provide any extra styling it is now possible for us to target featured items in the layout using specific css.

 

featuredZentoolsItems

 

Different colors of article titles inside ZenTools Masonry in Grid4 module position are based on category name (not alias). In case you will use your own category names you need to add your own styling for it. See here how to add own styling.

Here is example of code for 1 category. You can duplicate this and change CATEGORY to your own category name -> so instead of .CATEGORY you can have .cars or other name of your category:

 #grid1wrap .zentools .CATEGORY .zencategory span, #grid1wrap .zentools .CATEGORY .zencategory { background-color: #87A6CB; }

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.

Filtered grid settings

Filtered+grid+settings.png

Slideshow Settings

Slideshow+Settings.png