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.

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

Colour Schemes

The JB ecospirit template comes with various highlight colours that can help you control the theme look used for your site.

These settings can be controlled via the template parameters under the appearance > style panel.

Hilites

And here are top and bottom background colors:

Top Bottom background Colors

 

Module classes

JB ecospirit comes with a selection of module classes that you can use on the page to create points of differentiation on the page.

 

Core Framework module class suffixes.

There are a selection of classes available across all of the template styles and Zen Grid Framework v2 themes.

  • " warning"
  • " success"
  • " notice"
  • " border"
  • " shadow"

Frontpage Overview

image

Description

JB ecospirit Frontpage setup

Template setting

Take a look at screenshot about fonts used inside JB ecospirit Demo site. Please note, that -----Standard----- is only name of category. It is very often used as selected font with tickets asking why font looks different.

This template is using Arimo as body and navigation font and League Gothic as headings font.

Logo setting

Inside font stack subset you can define not only weight of loaded font, but also extended characters subset like: "extended latine". For more information about available subset for selected font visit google fonts webdirectory.

Logo setting

Style setting

Following path started with Ascent template, with Ecospirit you have more possibilities to define your preferred style. First hilite define link color, title, hover colors etc. Next two are used to define various background styles for top and bottom sections - separately. Last setting is used to change style between grunge and clean.

Style setting

Hidden panel

Also inside hidden panel is possible using of JB Type code resulting in having text icon instead of pure text. Like I mentioned before, Ecospirit template is using latest version of JB Type plugin extension.

Hidden panel

Effects setting

If you don't like main menu fixed to top of browser window during scrolling you can disable it inside Effects by switching off Sticky Nav function. In case you have problem that some images are not loading, especially in 3rd party accordions or scrollers you need to switch off Lazyload function.

Effects setting

Peformance setting

What to select...load jQuery from local or from Google? Here is your answer: http://docs.joomlabamboo.com/zen-grid-framework-v2/settings/should-i-use-google-or-local-version-of-jquery

Performance setting

Cookies setting

To comply with latest EU law, Ecospirit template does feature cookie warning message. You can customize appereance of this message inside template setting > settings > cookies

Cookies

Extensions used on the demo site