Joomla Template Knowledgebase

Hub Documentation

Features Download Preview Changelog
Joomla version compatibility: 1.5 / 2.5
Current Version: 1.1.4
Zen Grid Framework compatibility: 1.1 ?

hubDocImage

Getting Started

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

This template uses the Zen Grid Framework. The Zen Grid Framework makes controlling widths, colours and sub themes for the Joomla template a breeze. Please make sure that you familiarise yourself with the documentation for working with the Zen Grid Framework before you get started.

 

Module Positions

The screenshot below highlights the module positions available in this joomla template.

PureBusinessModulePositions

More settings

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

Layout Overrides: Hub uses the Zen Grid framework layout overrides to help create the unique layout that you see on the Shopignition demo site. You can find these files in the templates/jbpure/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:

  • Footer.php
  • Nav.php
  • OpenContainer.php
  • Panel.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.

 

Rebranding

Please note that v2.0 of the 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.

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.

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

Hubfrontpagesetup

Description

  • Logo - The logo is using the Droid Serif font via Google Font replacement.
  • Search - The search module is published to search position. The search icon is automatically displayed when the search module is published.
  • Banner - The JB Slideshow3 module is published to the banner position. You can see the specific configuration below. 
  • Banner - A custom html module is published to the banner position. 
  • Grid1 - The JB Slideshow module is published to the Grid1 position. You can see the settings we have used below.
  • Grid4 - An instance of the Microblog module is published to the grid4 position. It uses a module class called -display to create the layout you see on the demo site. The module uses the column layout in the microblog settings for this module.
  • Main Content Area - The main content is hidden on the front page of the Hub demo. To enable it you will need to uncheck the parameter in the layout settings in the template admin.
  • Grid13 - A custom html module i spublished to the grid13 position.
  • Grid16 - An instance of the microblog module is published to grid17 using the column layout. The module uses the -news module class suffix to replicate the styling you can see on that page.
  • Grid17 - A custom html module i spublished to the grid17 position.
  • Grid20 - An instance of the microblog module is published to grid20 using the column layout. The module uses the -news module class suffix to replicate the styling you can see on that page.
  • Grid21 - A custom html module i spublished to the grid21 position.
  • Grid24 - An instance of the microblog module is published to grid24 using the column layout. The module uses the -news module class suffix to replicate the styling you can see on that page.
  • Bottom1 - A custom html module with some social icons that can be found int he quickstart folder under the images/stories/icon folder.
  • Bottom2-6 - These modules are using latest news and most read modules.
  • Footer - the footer position has a core Joomla menu module published.

 

Slideshow settings

The screenshots below highlights the settings of the various modules included on the front page.

HubSlideshow

     

    Microblog Settings

    As mentioned previously the Microblog modules use two separate module class suffixes to achieve the different styles that you can see in the demo site.

    Display - The microblog module published to the side of the slideshow uses the module class suffix -display.

    Hub_Grid4_MIcroblog

    News - The microblog modules published to grid12, grid16 and grid20 use the module class suffix-news.

    Hub_news_microblog

    Configuring the K2 template

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

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

    hubK2Cat

     

    In addition to this the Pure 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

    Starting with Pure 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
    • Install the template and set it to default
    • Install the JB LIbrary plugin and enable it in the extensions > plugin manager
    Optional Elements
    • Install JB Slideshow
    • Install Microblog
    • Install the JB BB Code plugin (For two line menus)
    • Install K2

     

    Elements to unpublish

    • Disable the module title in 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 menu position and make sure the module title is disabled. 

    At this stage you should have a pretty simple and straight forward site to start creating your site from.  It's important to remember that the slideshow and micro blog modules rely heavily on images in terms of the way that they present your content so it might be worth adding placeholder or stock images in your content as you go through setting up the rest of the modules.

     

    The screenshot below shows you the default Joomla installation after following the points above.

    hubFresh

     

    Troubleshooting

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

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

    The super fish menu does not fade or slide it just drops down

    Please make sure you have installed and published the JB library plug-in and that there is only one version of the jQuery library loading on your page.

    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.