Knowledgebase

Joomlabamboo template and extension 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.

Overview of default template settings

The screenshots below are taken from the template administrator and highlight the default settings for this template.

JB_Arcadia_Administration-Arcadia-home-Fonts

JB_Arcadia_Administration-Arcadia-home-Fonts.jpg

JB_Arcadia_Administration-Arcadia-home-Layout2

JB_Arcadia_Administration-Arcadia-home-Layout2.jpg

JB_Arcadia_Administration-Arcadia-home-Theme

JB_Arcadia_Administration-Arcadia-home-Theme.jpg

JB_Arcadia_Administration-Arcadia-home-general

JB_Arcadia_Administration-Arcadia-home-general.jpg

JB_Arcadia_Administration-Arcadia-home-navigation

JB_Arcadia_Administration-Arcadia-home-navigation.jpg

JB_Arcadia_Administration-layout-compare

JB_Arcadia_Administration-layout-compare.jpg

JB_Arcadia_mobilemenu

JB_Arcadia_mobilemenu.jpg

Starting with Arcadia 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 Arcadia template and make it the default - Download
  • Install and enable the T3 Framework plugin - 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 Arcadia 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

Template colour schemes

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

apricot

lightblue

olive

pink

sand

skyblue

strawberry

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).

Class Mobile max-767px Tablets 768px to 979px Desktop min-980px
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Additional classes available for the Arcadia template.

  • "square red"
  • "square green"
  • "square brown"
  • "square lightgreen"
  • "triangle red"
  • "triangle green"
  • "triangle brown"
  • "triangle lightgreen"
  • "circle red"
  • "circle green"
  • "circle brown"
  • "circle lightgreen"

Screenshots of module classes used in the arcadia template

The screenshots below highlight the specific implementation or appearance of the module classes found in this template.

Screenshot of module classes used in Arcadia

Screenshot+of+module+classes+used+in+Arcadia.jpg

Use lowercase for module class names

Use+lowercase+for+module+class+names.jpg

Frontpage Overview

image

Description

  • Menu Megamenu is used and all menu setting or configuration is done inside template setting.
  • Logo Logo is defined inside template setting as text with height 2em. IMPORTANT: when you switch to image logo, subtext can still be used but setting is done on Text logo page.
  • Banner Contains custom html module width text. Banner width 12 grids inside template layout.
  • Grid9 Contains ZenTools module with slideshow layout. Grid9 module position width is 6 grids inside template layout setting.
  • Grid12 Contains custom html module with text beautified with JB Type plugin code. Grid12 module position width is 6 girds. Module positions Grid10 and Grid11 are not used on homepage.
  • Grid21 Contains ZenTools module with grid layout and "centere" module class suffix in order to get centered module name. Module name use JB Type plugin code for italic style text. Grid21 module position is using 12 grids width inside template layout setting.
  • Footer Menu Menu published to footer position.

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.

Custom HTML module in grid5 for Arcadia

Custom+HTML+module+in+grid5+for+Arcadia.jpg

Zensocial settings for Arcadia

Zensocial+settings+for+Arcadia.jpg

Zentools published to grid12 using grid layout

Zentools+published+to+grid12+using+grid+layout.jpg

Zentools slideshow module published to grid9

Zentools+slideshow+module+published+to+grid9.jpg