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.

Starting with Newstream2 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 Newstream2 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 Zensocial - for social icons and links to social media platforms - 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 Newstream2 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.

Overview

Newstream2 has the ability to create different layouts within different template styles.
A new Newstream2 template style can be created in Joomla by using the save as copy button in the template admin. Using multiple template styles makes it possible to create layouts with different module positions and widths that can be used on different pages of your site.
Newstream 2 uses three styles - one for the front page, one for all the sub pages and one for the all positions page.

Front page module positions

newstream2 module positions

All module positions

newstream2-allmodulepositions

Sub page sidebar and banner modules

Sidebar modules

The sub pages of the Newstream2 demo site use a number of modules published to the sidebar-2 position, these include an accordion menu and several Zentool modules.

Accordion in sidebar.

An Accordion menu is published to the sidebar-2 position and together with template settings utilises the Accordion module class suffix (and is added to the modules advanced settings tab).

accordion-menu

Sub Page banner Modules

A Zentools slideshow module is published to the banner position on all sub pages. These modules only load the one image from an image directory/folder. The page header sits on top of the module.

subpage banner

Banner map

Published to the banner position on the contact form page is a JB Maps 2 module. For more information on this very comprehensive mapping module, check out the JB Maps 2 documentation page.

jb maps module

Error Page and Page Headings

error page

Page Headings

page heading

Each page apart from the home page has a page heading added, these are added using the page display tab of each menu link.

page heading settings

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

frontpage

Responsive Position widths

These are position widths assigned to these frontpage modules

home responsive widths

Details

Off Canvas sidebar

offcanvas

The “Off Canvas” position contains a login module and a Custom HTML module, the options for this position are found in the Add On tab of the template settings.

offcanvas settings

Logo

The logo is a Custom HTML module published to the “logo” position and is formatted in this example using a h2 tag for the logo and p tag for the tag line.

logo

Menu

The T3 mega menu uses columns with inserted modules and icons

menu

For more information about working with a mega menu take a look at the following:-
Multi Column tutorial
Adding icons
Adding a module

Zentools slideshow published to the Banner position

A standard themed Zentools slideshow is published to the Banner position and is assigned to the Home page only. The item layout is image, date and title with the content being loaded from the Slideshow category.

slideshow front end

Home Page slideshow Item layout

slideshow layout

The date options are as follows:-

slideshow date

Image Settings

The image settings are as follows:-

slideshow-image-resize

Slideshow Settings

The slideshow uses the standard theme together with fade transitions and disc pagination.

slideshow theme

Zentools Grids published to Tabs position

Two Zentools grid style modules are published to the tabs position.

tabs frontend view

Item layout and content type settings

The Zentool modules use the following items in the item layout - date, image, title, category and more. The content options settings load 3 random articles from several categories.

tabs featured item layout

Read more

The read more text uses the JB Type syntax to add the icon, which is then displayed on hover.

tabs readmore icon

Date Settings

The date options are as follows -

tabs date

Image resize options

In the image settings tab as well as resizing of the images it enables the black hover effect.

tabs images resize

Tabs Aside

This position contains a search module and Custom HTML module.

tabs aside

Zentools categories published to Grid3 module

This module is set to display various selected Joomla categories using the Zentools layout and category setting tabs - the category images and titles are displayed in a grid layout.

Item Layout and Category selection

zentools grid3 layout

zentools grid3 category tab

Image Settings Tab - Responsive image settings

This module uses the responsive image settings which can be seen below:-

zentools grid3 responsive images

For more information on this feature please check out the Specifying image sizes doc

Zentools published to Grid4 as latest news

A Zentools list is used to display the latest news content in the grid4 position. The item layout uses title, text, column2, date and image and the column widths are split evenly.

zentools grid4 layout

Our Social Network published to the position Grid13

This is a Custom HTML module that displays 3 icons and is split into 3 columns both using the JB plugin syntax.

social network

social network syntax

Bottom Modules and Zensocial

bottomrow

Extensions used on the demo site