Knowledgebase

Joomlabamboo template and extension documentation

Colourshift 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 Colourshift 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 Colourshift template and make it the default - Download
  • Install JB Type - required for typography and font icons - Download
  • Install Zentools - slideshows, banners, grids etc - 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 Colourshift 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

  • Top Menu. The top menu is a core Joomla module published to the menu position. Colourshift requires v2.0.12+ of the framework. This update includes a new menu position which positions the menu above the header and below the top menu positions. The demo site for Colour Shift uses the Top Menu position.
  • Logo. The logo is positioned on the Header row of modules and uses the webfont called Rochester to render the logo title. It is also using an h1 tag for the site title.
  • Search. A core search module is positioned to the header4 position.
  • Banner. An instance of the Zentools module using the Slideshow layout is positioned to the banner position. You can see the settings in the screenshot below.
  • Main Content. The main content is hidden on the front page of the demo site. In order to display content on the front page of your site you will need to disable the Hide main content on front page settings which can be found in the layout > general panel in the template parameters.
  • Grid1. An instance of the Zentools module is published to the Grid1 position. This module is using the List layout view and the settings for this module can also be seen below.
  • Grid2. Another instance of the Zentools module is published to the Grid2 position (Meet the team). It is using a grid layout and the settings can be seen below.
  • Grid2. A custom html module is published ot the Grid2 position - below the Meet the team module - it has a combination of Lorem Ipsum text and some styling delivered via the JB Type plugin.
  • Grid5. Another instance of the Zentools module is published to the Grid5 position. This instance is using the grid layout.
  • Company Info. The text at the bottom of the psge above the bottom modules entitled "Company Info" is controlled via a template parameter. To chnage this text navigate to layout > module widths and scroll to the bottom of the page to change this text.

 

Zentools settings for the frontpage

The frontpage of the Platform demo site features the Zentools module using a masonry layout. The settings used in the demo site are shown below.

 

Zentools Slideshow

Zentools+Slideshow

 

Zentools - List (Grid1)

Zentools+Team+Blog+Grid1

 

Zentools - Grid Layout (Grid2)

Zentools+Meet+The+Team+Grid2

 

Zentools - Our Services (Grid5)

Zentools+Grid+Grid5

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.

Zentools Grid Grid5

Zentools+Grid+Grid5.png

Zentools Meet The Team Grid2

Zentools+Meet+The+Team+Grid2.png

Zentools Slideshow

Zentools+Slideshow.png

Zentools Team Blog Grid1

Zentools+Team+Blog+Grid1.png

Main Menu