Joomla Template Knowledgebase

Lacuna Documentation

Release Date February 2011
Joomla version compatibility: Joomla 1.5
Current Version: 1.1.7
Zen Grid Framework compatibility: 1.1+ ?
PHP Version php5
lacunaDocpage

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 which 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. Please note that Lacuna has a slightly different module layout to the standard Zen Grid Framework compatible templates. 

You will notice that the left position sits to the right of the main content but to the left of the right position. We have chosen this naming convention as a way to minimise extra setup for the template even though it may not be semantically correct. 

Also please note that control for the widths of the side column and the main column differs from the standard zen grid setup. Please see point 3 below for further information on this.

LacunaModulePositions

More settings

Controlling the layout settings for Lacuna.

Lacuna uses a slightly different way of implementing the Zen Grid Framework which is based around the addition of two extra width controllers. In the layout general settings panel in the template admin you will find settings available for the main column and settings for the side column - as per the screenshot below.

lacunawidths

These column values are derived from the 12 columns that we have used to divide the page into and so the two settings must equal 12 in order for the template to render effectively.

Where Lacuna differs is that when you need to set the module widths for positions that are located in the main content area - for example any of the grid rows, main content and left position etc - rather than calculating the total number of cols assigned to each module position based on the number assigned to the Main Column Width (as per the setting above) these width values need to add up to 12 - or the total number of columns used to divide up the template width.

lacunamainlayoutWidths

You can see in the example above that the total number assigned to the left and main content position is 12 while the width of the main content area relative to the width of the entire template is only nine.

 

Layout Overrides

The Zen Grid Framework allows for flexibiility within individual templates while maintaining the same core codebase. The following are the specific variations to the Lacuna template.

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

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

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 v1.1 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.

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

lacunafrontpageimage

 

Screenshots for the various modules used on the frontpage of the demo site.

Click to view larger image.

LacunaBreakingNewsMicroblog.png

LacunaBreakingNewsMicroblog

LacunaSlideshowFrontPage.png

LacunaSlideshowFrontPage

MeettheteamMicroblog.png

MeettheteamMicroblog

lacunaGettingStarted.png

lacunaGettingStarted

Description

  • Logo / Tagline - This is configured via the template admin as described in the Zen Grid Framework knowledgebase.
  • Top4 - A core Joomla menu module is published to the top4 position and is being used to display the contact us and about us menu items.
  • Menu - The menu is using the core Joomla menu module and is published to the menu module position as described in the zen grid framework documentation
  • Slideshow - The JB Slideshow3 module is published to the banner position. You can see the specific configuration below. 
  • Tab1, Tab2 and Tab4 - these modules contain an instance of the microblog module. Screesnhots for these modules can be found below.
  • Main Content Area - The main content area is hidden via the template layout settings. Only modules are being displayed to generate the content on the front page.
  • Right - There are various custom html modules published to the right position.
  • Grid1 - This position contains a microblog module using the flat list display. A screenshot fo the settings can be found below.
  • Below - This module position contains a custom html module.
  • Bottom1  - This position contains a custom html module.
  • Bottom2 - This position contains an instance of the core Joomla most read module.
  • Bottom3 -  This position contains a custom html module.
  • Bottom4 -  This position contains an instance of the core Joomla most read module.
  • Footer menu - the footer menu is a core Joomla menu published as a flat list to the footer position.

 

 

Module Classes

This Joomla template comes with a selection of three module classes to apply to your content. The colours used in the module class are determined by the colour scheme and work within the hierachy of the overall colour scheme. 

 

Module class examples.

Default Module class

moduledefault

A module with the -border class

module-border

 

-highlight module class

module-highlight

 

-highlight2 module class

module-highlight2

 

 

-highlight3 module class

module-highlight3

 

 

-none module class in the right column

module-nonerightcol

 

 

-none module class suffix in the main content area

module-noneMainContent


Combining the classes with the slide effect.

The module classes displayed above can be used in conjunction with the sliding module function that comes as a core feature of the Zen Grid Framework. In order to use both the slide effect and one of the classes above it's necessary to use the following syntax for the module class suffix:

-slide border

 

 

Configuring the K2 template

The Lacuna Joomla template has K2 overrides built in and are activated simply by assigning the Lacuna template in the K2 category or via the K2 menu item if you are displaying multiple categories form that menu item. As you can see from the screenshot below the Lacuna K2 template takes all of the K2 meta information and outputs it into a slim right aligned column. If the meta info like date, comments, rating etc are not published then the item will just stretch to the full width of the content body.

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

k2TemplateSelection

 

An snippet of the tools layout in the K2 template.

k2TemplateCategoryTools

Starting with Lacuna 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 via the extensions > template manager page.
  • Install the JB Library plugin and and click finish installation to enable it or enable it via extensions > plugin manager
Optional Elements
  • Install JB Slideshow
  • Install Microblog
  • Install K2

 

Elements to unpublish

  • Unpublish all modules in the left column
  • 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 the advertisement position in the right position or if you plan to keep this module remove the _text module class.

Change the position of some elements on the page

  • Move main menu to the menu position and make sure the module title is disabled. While you are there if you intend to use the drop down menus ensure that you have set up the menu as per this knowledgebase item and also removed the module class _menu that the main menu ships with by default.

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.

 

freshstartLacuna

Troubleshooting

A note about progressive enhancement

The Lacuna template takes advantage of a few different css3 selectors that will render flawlessly in all modern and intelligent browsers - namely firefox, safari, chrome and opera. However, the rounded edges and text shadow on some of the elements will not display in internet explorer 6, internet explorer 7 or internet explorer 8.

Rather than add extra javascript or convert these features to image based solutions we have chosen to allow these features to degrade gracefully. This in effect means that the shadow on the text will not display and nor will the rounded edges on the social icons and read more buttons.

For more information regarding the philosophy behind graceful degradation or progressive enhancement in web design please read this post on A list apart.

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

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