Joomla templates and extensions club

We have changed how our templates are packaged.

Step 1.) Before You Start

You no longer need to extract our template files. We now separate our templates from our modules from our source files so if you downloaded the template, all you need to do is go to step 2. However if you downloaded source files to edit the template you will have to extract it still. To uncompress a .zip file you will need to extract the zip archive to your local computer using a free archive utility like 7zip (PC) or MacZip (Mac), extract the contents of the zip onto your computer in a location you can find.

Back to Top

Step 2.) Installing the Template

1. Now go to "Installers > Template Site"
2. Browse for the template zip file in the Template folder.
3. Click "Upload File and Install".
4. Click "Continue..."
5. In the Template Manager, select the new template's radio box and click on the "Default" button (top right).

The template will now be successfully installed, so you can proceed to the the next step..

Back to Top

Step 3.) Setting up your modules

3.1) zappas module positions

Below are all the module positions available in zappa. Intelli Modules are highlighted in red.

Print this image out for a quick reference.

Back to Top

3.2) Menus

Quick Links menu - We have set the template up in a way that this should work out of the box, but in case you have moved any of your modules around, the topmenu module needs to be assigned to the User3 module position, set to flatlist with a suffix of "-nav".

Primary Navigation - This too should work out of the box. Later on in this guide we will go over setting up your child menu items (drop downs), as well as configuring which menu system you would like to use (by default it is set to use the stylish Superfish menu.

Sidebar Menu - To get your sidebar menu displaying the same as on the demo site all you need to do is set the main menu module to a "flat list". You can also leave it set to "Vertical" (which will also allow you have submenu items as in the demo), but keep in mind the vertical output is using tables, which is not good for SEO (with a menu).

Footer Menu - We are using the "Other Menu" module to act as the footer navigation, as there isn't a footer menu by default in Joomla!. All you need for this to work properly, is open the "Other Menu" module and set the menu class suffix to "-footer", choose Menu Type: "Flatlist" and assign it to the "Footer" module positon.

Back to Top

3.3) Module Suffixes

ALL Suffixes need to have a prefix of -sfx and then the suffix name, example "-sfx h3brown"

This template gives you the ability to combine module suffixes, combine how you may ask? Well, you can set multiple styles for the module header and module background to create different effects. This template has tons of module header and background styles. Please see the template demo snapshot page for how each of these styles look.

You can see all of the module suffixes in action on our templates snapshot demo page.

Here is a summary of the styles:

4 Icon Styles

• "-sfx h3login" - Adds a login icon to the module header
• "-sfx h3navi" - Adds a menu icon to the module header
• "-sfx h3polls" - Adds a polls icon to the module header
• "-sfx h3online" - Adds a who's online icon to the module header

3 Module Alert Styles

• "-sfx yellowalert" - Adds a yellow lightbulb to the module header
• "-sfx redalert" - Adds a red lightbulb to the module header
• "-sfx greenalert" - Adds a green lightbulb to the module header

Module Header Background Styles

• "-sfx h3green" - Adds a green background to the module header
• "-sfx h3brown" - Adds a brown background to the module header
• "-sfx h3dark" - Adds a dark background to the module header
• "-sfx h3lite" - Adds a lite background to the module header
• "-sfx h3-glossy-blue" - Adds a glossy-blue background to the module header
• "-sfx h3-glossy-pink" - Adds a glossy-pink background to the module header
• "-sfx h3-glossy-orange" - Adds a glossy-orange background to the module header
• "-sfx h3-glossy-green" - Adds a glossy-green background to the module header
• "-sfx h3-glossy-silver" - Adds a glossy-silver background to the module header
• "-sfx h3-glossy-beige" - Adds a glossy-beige background to the module header
• "-sfx h3-candi-green" - Adds a candi-green background to the module header
• "-sfx h3-candi-orange" - Adds a candi-orange background to the module header
• "-sfx h3-candi-red" - Adds a candi-red background to the module header
• "-sfx h3-candi-purple" - Adds a candi-purple background to the module header
• "-sfx h3-candi-pink" - Adds a candi-pink background to the module header
• "-sfx h3-candi-beige" - Adds a candi-beige background to the module header
• "-sfx h3-candi-blue-1" - Adds a candi-blue-1 background to the module header
• "-sfx h3-candi-blue-2" - Adds a candi-blue-2 background to the module header

Module Background Styles

• "-sfx brownbg" - Adds a brown background to the module
• "-sfx bluebg" - Adds a blue background to the module
• "-sfx litebg" - Adds a litebg background to the module
• "-sfx greenbg" - Adds a green background to the module
• "-sfx dark-bluebg" - Adds a dark-blue background to the module
• "-sfx orangebg" - Adds a orange background to the module
• "-sfx lite-blue" - Adds a lite-blue background to the module
• "-sfx redbg" - Adds a red background to the module

So how do you use them? Well lets say you want a module that stands out from the rest, you would set the module class suffix field to -sfx h3-glossy-blue greenbg. This adds a glossy blue background color to the module header that matches the theme and a green color to the module box. Mix and match the suffixes to achieve exactly the look and feel you want.

Use the module suffix of "-sfx nopadding" to remove all styling from the module. This is useful when you do not want any colors or headers for one module.

Back to Top

Step 4.) Configuring your template

Joomla has two versions currently. Version 1.0.xx and the latest version 1.5.xx. Depending upon what version you are using the the configuration changes are slightly different. Please pick which version you are using in the tab.

4.10) Configurable sidebars:

To make these slightly more advanced changes you will have to login to your site via FTP and edit the index.php file located in the template directory. You can find the relevant code starting around line 54.

This allows you to change your sites layout, depending on the content that your users are viewing. "Content" is the main content area and "sidebar" is the sidebar. If you set the configuration to "content-sidebar" then this will show the content on the left and sidebar on the right, where as "sidebar-content" shows sidebar and then content. If you only set "content, then no sidebar will show" This can be set on a per component basis, so you can have a configuration for Fireboard as shown above to use the full width and no sidebar.

It is important to note that the "com_frontpage" is the layout for your home page as Joomla handles this as a component and the rest of the pages use "com_content". If you want the home page to have the sidebar on the left and not the right then change this from "com_frontpage'=> 'content-sidebar" to "com_frontpage'=> sidebar-content"

// Default layout (content
'default'=>
'sidebar-content',
// Specify extra options for different components
// If you dont write content or sidebar - these positions wont be published
// left-right-content | right-left-content | content-right-left | content-left-right
// left-content-right | right-content-left
// right-content | content-left | left-content | content-right
'com_frontpage' => 'content',
'com_wrapper'=> 'content',
'com_fireboard'=> 'content',
'com_content'=> 'sidebar-content',
'com_newsfeeds'=> 'content-sidebar',

4.20) Accordion Menu

You will notice a new addition to the zappa demo: we have included a nifty accordion menu. This is not a module or a mambot and nothing needs to be installed. To implement it, we are using jQuery to apply the hooks we need and the effects to the standard Joomla menu. This is only available for Joomla 1.5 due to the improvements in the menu output in 1.5 which we are using as the base of this feature.

All you have to do to get it working is:

1. First set your menu module parameters to load sub items.
2. Make sure the menu is set to flat list.
3. Then add a separator in the relevant menu manager. The separator will act as the anchor for the sub links (only 1 level).

Now all you have to do is add the sub items within the separator item and stand back in awe as you see the nifty sub items slide down when the separator is clicked.

It is also possible to change this so it works on hover, simply by changing the following line of code in the index.php
jQuery("#jjSecondary ul.menu li span").click(function(){
to:
jQuery("#jjSecondary ul.menu li span").hover(function(){

Lastly, this is completely configurable. If you don’t want to use it, just turn it off in the template options and it will load as a normal menu.

4.30) Header Images

The full source files that are used to create the header are available in our template club for free download to all club members. If you are feeling a little creative then play a with the source files to modify the effect or make your own effect.

Back to Top

Step 5.) Useful tips

5.1) TIP: Setting up your menu's drop down (child) items.

The built in Superfish menu brings in the Joomla "Main Menu" by default. This can easily be changed to another menu by changing the configuration option in the templates index.php file (right at the top).

In the Menu Manager, you will notice by default the "Main Menu" does not have any child items assign. All top level menu items will be displayed as the primary "tabs", then any child menu items will automatically be displayed as the drop down options when you hover over the top "tabs". To setup the child items for a particular tab do the following:

1. In your Joomla Admin area, from the top menu, navigate to Menu > Main Menu (or which ever menu you chose to use in the previous step).
2. The menu manager will list all the menu items that are set in any of the particular menus. All the top level menu items are displayed flush against the side in the list and all child menu items are indented from the parent menu item. This may sound overly complicated, but once you see the structure it will instantly make sense which menu items are parent menu items and which are the "children".
3. To assign a child menu item, first create a new menu item as usual, then in the options for that menu item, select which of the existing menu items you would like to be the parent. Again you will notice in the menu's options, the existing menu items that you can choose from are also structured in a hierarchical way, so it will be easy to see which is the parent and which is the child.

5.2) TIP: Setting the "Blog" View Contents to display as 1 column not 2.

By default, when linking to category or section of content items, Joomla sets the "blog view" to display in 2 columns. If you would like to change this so that they display one underneath the other, simply open up the menu link for that category/section and from the right hand side "parameters" options, set the options as follows:

• Leading: 1
• Intro: 0
• Columns: 1 (this is the important part)

5.3) TIP: Getting TinyMCE Editor to display properly.

One of the most frequent questions we get asked is how to get the default Joomla editor to display properly when editing content. The problem that occurs with the way the editor works. By default, it will automatically pull the styling from the published template, which means if there is a background color or graphic set on the templates frontend, this will be used as the editors background. This makes editing content really difficult. To get this to display a normal white background all you need to do is login to your Joomla! admin, go to the Mambots Manager, click on the "TinyMCE WYSIWYG Editor" to edit its properties. From the modules parameters on the right, make sure that "Template CSS classes" is set to No. This will then revert the editor to use its own default styling, giving you a nice white background to edit your content in.

5.4) TIP: Displaying a large image in the header like the demo.

On the demo of Zappa you will notice we have a large area that rotates images. To achieve this we used JoomlaWorks "Simple Image Rotator". We do not include this module as it is not our work. To replicate this look we suggest you pick up the module from JoomlaWorks and install it. The images that we used are also not available for us to re-distribute and used for demonstration purposes only. There are hundreds of different websites online to find stock photography for your projects. A good place to start would be iStockphoto

When using a large image in this module position, be sure to set the module suffix to "-sfx nopadding", as this will eliminate the whitespace around it.

5.5) TIP: Zappa font.

The font being used on Zappa for the logo is called "Adira Display" We cant package it with Zappa, but we will provide you with the link to find it. The font is not available for us to re-distribute and used for demonstration purposes only.

5.6) TIP: Everything looks terrible and un-styled.

If you install your template and find it looks un-styled and all the text is on the left in a column, it is possible your webhost may not support some of the advanced compression techniques we use. To remedy this simply turn off "gzip compression" in the templates configuration in your Joomla backend.

Back to Top