Knowledgebase

Joomlabamboo template and extension documentation

focusDocImage {jb_one}

Getting Started

Please ensure that you read the getting started articles in preparation for working with this template.

This template also uses the Zen Grid Framework. Please make sure that you familiarise yourself with the documentation for working with the Zen Grid Framework before you get started.

 

{/jb_one} {jb_two}

Module Positions

The screenshot below highlights the module positions available in this joomla template. Please note that the Focus template does not contain the usual number of module positions that normally accompany Zen Grid Framework templates.

focusPositions

{/jb_two} {jb_three}

More settings

The Zen Grid Framework allows for flexibility within individual templates while maintaining the same core codebase. 

Layout Overrides: Focus uses the Zen Grid framework layout overrides to help create the unique layout that you see on the Focus demo site. You can find these files in the templates/jbFocus/layout folder. In general you do not need to touch these files but if you need to make some changes to any of the following areas, then this is where you need to make them:

  • bottom.php
  • closeContainer.php
  • footer.php
  • grid1.php
  • grid2.php
  • grid3.php
  • grid4.php
  • grid5.php
  • grid6.php
  • jbtabs.php
  • main.php
  • nav.php
  • openContainer.php
  • panel.php
  • top.php

If you need to edit or change the layout across any of these areas of the template then you will need to edit the files in the layout/ folder. You can also disable the layout overrides in the template by navigating to layout/overrides panel in the template administration.

 

Rebranding

Please note that the zen grid framework provides the ability to easily replace the Joomlabamboo copyright in the admin of your template. In order to do this you still need to have either a developer membership or have purchased rebranding. Please ensure that you look at the documentation for the framework for how to use this new feature. You can read more regarding this in the Zen Grid Framework knowledgebase.

{/jb_three} {jb_four}

Extensions featured on the demo

All of the extensions available from Joomlabamboo are compatible with this template. Not all are required for the running of the template and only some are featured as a part of the demo site.

The modules used on the demo site include:

Please see below in the frontpage setup for screenshots of the modules as they are setup on the demo site of this template.

{/jb_four} {jb_five}

Focus front page setup

The screenshot below shows you the modules we have published on the front page of the demo site. Please see the descriptions below regarding the usage and any other relevant information of the modules.

focusFrontpage

Description

  • Background Slideshow - The background slideshow which is a core feature of this template is controlled via the template. Please see below for more information regarding using the slideshow. The slideshow settings can be accessed by navigating to extras > slideshow in the template settings.
  • Social Icons - The email, twitter, facebook etc icons are controlled via the template and are published in a fixed position that attaches to the left side of the browser. If the left column is too tall for the browser height then the fixed position transforms into an absolute position and scrolls with the rest of the page. The social icons will reposition when the browser is resized and the width drops below 835px.
  • Logo and Tagline - These elements are controlled via the template. In previous templates you could select where to place the logo however for the Focus template the logo and tagline can only be displayed in this position. The logo will reposition when the browser is resized and the width drops below 835px.
  • Slideshow Icons - The slideshow icons are generated by the template and can be turned off if necessary. The slideshow icons will reposition when the browser is resized and the width drops below 835px.
  • Menu - The menu is published to the panel1 position and is displayed when the user clicks on the open panel button. The open panel button text can be translated via the template or a language file.
  • Main Content - The main content is a simple front page blog layout and is controlled via the home page menu item. 
  • Custom Html module - the text that has the "About Len Metcalf" and "Recent Exhbitions" text are custom html modules published to the grid17 and grid21 module respectively.
  • Twitter - An instance of the jTweet twitter module is published to the footer position.
  • Joomlabamboo Logo - the Joomlabamboo logo is controlled via the template and can be prevented from displaying by going to extras > copyright in the template parameters.

 

{/jb_five}

{jb_six}

Background Slideshow Operation

One of the striking features of this template is the background slideshow that is built into the template itself. There are plenty of options to determine how the slideshow operates.

To start changing the default slideshow settings you need to navigate to the Extras > Slideshow setting in the template parameters. Please note that you need to make sure you are using the v1.2.0 of the Zen Grid Framework for this panel to appear.

slideshowtab 2

 

The settings for the slideshow can be seen below.

slideshowSettings

Determining which images are displayed in the slideshow.

There are a few different ways to determine which images are displayed in the slideshow.

1. The template comes with a default folder setting which means that if the slideshow is enabled the images that are used in the slideshow are referenced from the folder nominated by that setting. In Joomla 1.5 this option points to images/stories as the root folder while in Joomla 1.7 the option points to the images/ folder by default.

2. It is possible to override this setting and use the page class suffix to determine which folder is used as the source for images in your slideshow. In order to do this you need to ensure that the page class option is enabled.

a. Then it's simply a matter of uploading your images to a new folder. For example images/stories/gallery2

gallery

 

b. Then assigning the page class called "gallery2" to the menu item that you want to display the gallery2 images with.

pageclass

IE6 receives some graceful treatment

We are firm believers in a concept called progressive enhancement. Progressive enhancement essentially means that as web and browser technologies progress it is possible to implement these new features without forsaking older browser which might not quite be up to the task.

IE6 is renowned as a troublesome browser for most web designers and developers and while the slideshow does work in IE6 it is essentially buggy. As a result IE6 users will receive a static background image which can be assigned in the template admin as you can see in the screenshot above.

The end result is that the page loads relatively quickly for users that are using IE6 and users who are using more advanced browsers receive the full background slideshow experience.

 

Location of slideshow code for developers

For those of you who want to dig into the code you can find the code that renders the main slideshow javascript in the includes/templateVariables.php file. You can also find some more code in the template.js file that controls the behaviour of the slideshow buttons etc.

The slideshow files are also located in the templates/jbfocus/js folder.

The slideshow script that we have used in Focus is the Galleria slideshow.

    {/jb_six}

     

    {jb_seven}

    Social Icons

    socialIcons

     

    The social Icons that sit to the left of the logo position are controlled via the template. You can find these settings by navigating to the aoppearance > style tab in the template administrator.

    socialIconsTab

     

    The images for the icons can be found in the templates/jbfocus/images/icons/ folder. The images are 20px by 20px images. You can add to the images available in the administrator dropdown list by uploading your own images to the templates/jbfocus/images/icons/ folder

    Please see a snapshot of the settings available for the social icons below.

    socialIconsSettings

    The icons we have used come from the Iconic icon library.

    {/jb_seven}

    {jb_eight}

    Configuring the K2 template

    The Focus Joomla template has K2 overrides built in and are activated simply by assigning the Focus template in the K2 category or via the K2 menu item if you are displaying multiple categories form that menu item. 

    To assign the Focus template to your k2 categories and items you need to edit the category and apply the Focus K2 template as per the screenshot below:

    focusK2

     

    In addition to this the Newscycle template also loads the k2.css file into it's own array which means that you can compress the k2.css file when you enable the template's css compressing setting. This means that to avoid the css file from loading twice you need to make sure that you disable the core K2 css in the K2 global parameters as per the screenshot below.

    k2disablecss

    {/jb_seven} {jb_eight}

    Starting with Focus from a fresh installation of Joomla

    Although the this Joomla template is a simple design the default Joomla sample data doesnt quite do it justice and so here are a few steps to do if you are installing this Joomla template into a default Joomla installation.

    Elements to install.

    Essential Elements

    • Install the Zen Grid Framework v1.2
    • Install the template and set it to default
    • Install the JB LIbrary plugin and enable it in the extensions > plugin manager
    Optional Elements
    • Install Microblog
    • Install K2

     

    Modules to unpublish

    • Disable the breadcrumb module.
    • Disable main menu items except for home menu item.
    • Disable the core banner module in the footer position.
    • Disable the core footer module in the footer position.
    • Unpublish modules published to the left module position.

     

    Change the position of some elements on the page

    • Move main menu to the panel1 position. If you would like to replicate the accordion menu styling as seen on the demo site please follow these instructions.

     

    Set up the background slideshow.

    By default the template will look for the images/stories folder in Joomla 1.5 or images/ in Joomla 1.7. Please read the instructions above that highlight how to start working with the background slideshow.

    By this stage the site should be starting to take shape and you should see something like the screenshot below. Obviously it will start to look a lot prettier once you have your own images uploaded and you start to fill out the rest of your content.

    freshstart

     

    {/jb_eight} {jb_nine}

     

    Troubleshooting

    Are you using the latest version of the Zen Grid Framework?

    Oure is only compatible with v1.2 + of the Zen Grid Framework

    My main content is not displaying

    Version 1.05+ of the Zen Grid Framework comes with the option of hiding the main content area on the front page e.g. the default menu item of your site. We've done this in order to help trim up any spacing or padding that is generated from the main content area that is not needed if you are not displaying any content on the front page. If you would prefer to display your content on the front page of your site, then please set the option to hide the main content area in the template parameters under layout >  Gen. settings to show.

     

    I get the following error after installing the Zen Grid Framework and a Zen Grid compatible template.

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/26/d171984212/htdocs/tradenet/templates/zengridframework/includes/yth.php on line 36

    This error means that your server is using php v4 while the Zen Grid Framework needs php5 to function properly. Often changing to php5 is a matter of adding a rule to the htaccess file on your site but it's best to ask your host for help in determining the best way to use php on your server.

    {/jb_nine}