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.

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.

Please note: The quickstart package for this template does not come with HikaShop pre-installed. Please read in the notes below about how to install and configure HikaShop.

Installing Hikashop.

HikaShop does not come preinstalled with this template because the HikaShop component comes with a very useful wizard to help you set up your shop the way you need it. So to use HikaShop with this template simply download the free version from the HikaShop website. Once downloaded you need to install the component via the standard Joomla installer. After successful installation the HikaShop wizard will start you off on the process of creating your online shop.

Please ensure that you disable the frontend css in the Hikashop display configuration and enable the bootstrap design option in the same panel.

disable-hikashop-css

 

Template settings

The following screenshots highlight the various settings used in the New Lifestyle template.

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

newlifestyle-modulepositions

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

Appearance classes

Our themes use a combination of two colours to determine the colour scheme for each template style. In general the colours are determined by the following formula:

  • primary1 - uses the base primary colour
  • primary2 - uses a colour 15% darker than the default primary colour.
  • primary3 - uses a colour 15% lighter than the default primary colour.
  • secondary1 - uses the base secondary colour.
  • secondary2 - uses a colour 15% darker than the default secondary colour.
  • secondary3 - uses a colour 15% lighter than the default secondary colour.
  • dark
  • light
  • inset
  • shadow
  • shadow2
  • border
  • corner
  • hot
  • new
  • icon icon-[icon name]
  • largeicons (module class) this class is used to change the standard sized JB Type icons to the large sized icons as seen on the New Lifestyle demo.

Mobile classes

Module classes for mobile viewing (mediaqueries classes).

ClassMobile max-767pxTablets 768px to 979pxDesktop min-980px
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Frontpage Overview

Description

  • The very top menu is a core Joomla menu published to the top4 position.
  • The more text is a trigger for the hidden panel positions. The text is controlled via the template and is automatically populated when a module is published to the panel1, panel2, panel3 or panel4 positions.
  • The logo is controlled by the template. It uses both an image and text to populate the layout used on the demo.
  • The search and cart icons to the right of the main menu are created by adding a search module and hikashop cart module to the 'search' and 'cart' positions.
  • The slideshow is an instance of the Zentools module published to the banner position. It uses the slideshow standard layout. If you use other slideshow layouts in this position you may receive varying results.
  • The modules underneath the slideshow are a selection of modules published to the tabs position. The best sellers and featured products modules are native Hikashop modules (not included in the quickstart package). While the about is module is a custom html module.
  • Two Beautiful locations is an instance of the Zentools module using the grid layout with overlay enabled.
  • Some more about us is a custom html module with font icons using the JB Type module to load icons used in the Font Awesome font library.
  • Frequently asked questions is an instance of the Zentools module using accordion layout. It is published to the grid17 module position.
  • Latest Gallery is an instance of the Zentools module using the grid layout with margins disabled. It is published to the grid18 position.
  • The large image at the bottom of the page is inserted via the template.
  • The text that sits on top of the image is generated from a custom html module published to the bottom-extra position.
  • The three modules at the bottom are a selection of custom html modules published to the bottom1, bottom2 and bottom3 position.
  • The footer menu is a core Joomla menu module published to the footer position.
  • The social icons below the menu are an instance of the Zensocial module and also published to the footer position.
  • The Joomla template by Joomlabamboo link at the bottom can be unpublished via the template settings.

Extensions used on the demo site

How to remove the animations from the New Lifestyle slideshow.

The New Lifestyle slideshow uses css3 animations to generate the bouncing, sliding animations you see for the titles and images in the slideshow.

If you would like to remove that effect from the slideshow you can remove it directly from the js/template.js file located in the template folder.

Note: In later versions of the template the minified version template.min.js is loaded, so after modifying the template.js file, the contents need to be copied to the template.min.js file.

The specific code to remove is:

 jQuery('#slideshowwrap div').removeClass('animated');
        jQuery('#slideshowwrap .zentext,#slideshowwrap .zentitle').addClass('animated bounceInLeft');
        jQuery('#slideshowwrap .zentitle').addClass('animated bounceInRight');
        jQuery('#slideshowwrap .zenitem2 .zentext,#slideshowwrap.zenitem4 .zentext,#slideshowwrap .zenitem6 .zentext,#slideshowwrap .zenitem2 .zenmore,#slideshowwrap .zenitem4 .zenmore').addClass('animated bounceInUp').removeClass('bounceInLeft');
        jQuery('#slideshowwrap .zenimage').addClass('animated bounceInUp');
        jQuery('#slideshowwrap .zenmore').addClass('animated fadeInUp');
        jQuery('#slideshowwrap .zenitem2 .zenimage,#slideshowwrap .zenitem4 .zenimage,#slideshowwrap .zenitem6 .zenimage').addClass('animated bounceInRight');

Settings for Zentools slideshow module.

Making the slideshow collapse on mobile

Because of the way that T3 works it is necessary to apply the module class suffix hidden-phone to the slideshow module if you need to have it collapse on small screens. When this module class is applied the template is able to collapse the divs surrounding the slideshow and reduce the top margin applied to the main content body.

Two beautiful locations module.

Hika Shop Cart Module settings.

The Hikashop cart seen on the demo uses the cart module position.

When a module is published to this position the cart icon is automatically published to allow the user to open the cart dropdown area when clicked.

Hika Shop Featured settings (Tabs Position).

The Hikashop cart seen on the demo uses the cart module position.

Search module.

The search module seen on the demo uses the search module position.

When a module is published to this position the search icon is automatically published to allow the user to open the search dropdown area when clicked.

The module uses the default Joomla search module.