Knowledgebase

Joomlabamboo template and extension documentation

Sidewinder documentation

Compatible with Joomla 2.5 / Joomla 3+ and uses the T3 framework .

Please note: This template uses the T3 framework. You can download the latest release of the T3 plugin directly from the T3 GitHub repository.

Need help getting started?

The following links may be helpful if you are new to Joomla, T3 or our templates.

 

Useful T3 documentation

If you are new to T3 please read through the following resources to better acquaint your self with how T3 works.

T3 Overview

Controlling the appearance of T3 base templates

Controlling the layout of T3 base templates

Enabling template effects

Troubleshooting T3 based templates

 

Starting with Sidewinder 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 Sidewinder template and make it the default - Download
  • Install and enable the T3 Framework plugin. This template requires T3 v2 or T3BS as a minimum- 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
  • If you are using K2 - Install the Zenkit - our standalone K2 templates - Zenkit

Elements to modify

  • Change the position of the "Main menu" module to the "menu" position. The menu position in this template is positioned off the page in the off canvas area.
  • 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 Sidewinder 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

Template colour schemes

The following colours are the primary and secondary colours used in the sidewinder template styles.

aquared

 
 

blackgreen

 
 

bluegreen

 
 

blueorange

 
 

bright

 
 

cooleco

 
 

greenblue

 
 

orangeblue

 
 

red

 
 
 
 

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]

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 Sidewinder template uses a standard featured layout to display content on the front page. The template overrides the number of columns set in the menu options and re-creates columns based on the width of the browser that the user is viewing the site from. For example at around 1200px wide and wider the content will display in 3 columns. From here down to 825 or so pixels the content will display in two columns. Smaller than that width the content will display in a single column only. The left hand column will collapse at 660px.
  • The text "Hey! I'm Pedro" is the text displayed from the logo text option in the template admin.
  • The text "And this is me ..." is the tagline which is also set in the template admin.
  • The module called I'm a social being, is an instance of the Zen Social module and it is published to the left position.
  • The main menu is published to the menu position. It is displayed on the page when the user hits the toggle button at the very top left of the sidebar. It is possible to add text next to this item via the administrator settings panel.
  • The animation used for the off canvas menu is controlled in the template administrator via the addon's panel.
  • There is a core Joomla 3 menu module published to the footer position. This position is fixed at the bottom of the screen on wide and normal screens and drops back to relative positioning on small screens.

Extensions used on the demo site

Adding an accordion menu to the sidebar.

In order to enable the accordion menu on your site you need to follow three key steps.

Enable the accordion in the template settings

The accordion settings can be found in the template administrator under the effects panel. Ensure that the "enable accordion" menu item is enabled.

Other accordion menu settings explained:

  • Always open first item

    This setting means that when the accordion is loaded on the page the first item in the menu will always be open.

  • Show active item

    When enabled this option ensures that the active menu item will always be open on the page.

  • Accordion Type

    The Accordion menu type means that when one menu item is opened then the previously opened item is closed. While the panel option means that when menu items are clicked open items remain open. In order to close each menu level the user needs to click on the top level menu item for that accordion level.

Add a module class to your menu

Now that the accordion menu scripts have been added it is necessary to add a module class suffix to the menu module. Adding the "accordion" module class to the module class suffix will automatically apply the correct code required to create the accordion menu.

Use text separators or menu headings for top level menu items

The accordion menu is designed to be flexible enough to accomodate both normal content links or accordion triggers for any of the top level menu items.

Joomla provides two types of menu items that can be used as top level menu items in the accordion menu.

The Text Separator or menu heading menu type will both function as triggers for the accordion menu.

A typical accordion menu setup looks like the example in the screenshot below.

Main Menu