Template Guide - Zappa - JoomlaJunkie

Home

Templates

5/18/09 10:01 AM

Extensions

Template Club

Help and Support

Company

Team Blog

search...
Search

Template
Guide Zappa

PDF | Print |

To make sure your template is setup correctly, please make sure you read
through the template guide thoroughly. We have made the template as
customizable as possible and all our css is fully commented.

1. Before you start

2. Installing the template
3. Setting up your modules
i. Module positions
ii. Menus
iii. Module Suffixes
4. Configuring your template
5. Useful tips

We have changed how our templates are packaged.

Template Guides
JoomlaJunkie-quickinstaller

Step 1.) Before You Start

Aurora

You no longer need to extract our template files. We now separate our templates from our modules from our source files so if

Absolute Flush
Ario and Ario Lite

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

Absolute Redux

archive utility like 7zip (PC) or MacZip (Mac), extract the contents of the zip onto your computer in a location you can find.

Extreme Blogger

Back to Top

Extreme Blogger Lite

iFresh
iLuv
Rasper
Flex Photos Lite
Flex Photos
Origin
Dark Business
Vooloo
Vector

Step 2.) Installing the Template

1.
2.
3.
4.
5.

Now go to "Installers > Template Site"

Browse for the template zip file in the Template folder.
Click "Upload File and Install".
Click "Continue..."
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..

Flex
http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 1 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

Flex

Back to Top

Joomla Essentials
Mismo
Simplex
Absolute
Nitro
Supremacy
Rational Magic

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.

Snappa
Zappa

Print this image out for a quick reference.

Dark Rational

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 2 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

Mocha

@joomlajunkies tweets
The entire team in 'mole
mode' to finish Morph
framework beta. Feels like
being 9 months
pregnant...only focus is on
getting it out! LOL! about 3
hours ago

@ijoomla @wicksie
@hejeva @joomlapraise
and more - Check out
http://www.bringdownie6.com
and follow @DearIE6 (see
http://dearie6.com) ;) 2
days ago

RT @joomlapodcast: OSM
approved the usage of
Joomla in the domain
name
thejoomlapodcast.com.
sweet! time to get back
doing more episodes! 3
days ago

@TimHull check out

http://www.saveie6.com
LOL! Was the best April
Fools joke. ;) 3 days ago
I have a dream...of a world
free of IE6, IE7 and IE8!
(via @ijoomla) LOL!
Agreed! 3 days ago

Back to Top

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 3 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

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
http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 4 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

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

Joomla 1.5.x
Joomla 1.5 is terribly easy to configure as the options are all in the backend of your site. No need to FTP or deal with any remote
files!
Administrator->Extensions->Template Manager-> Zappa

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 5 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

Joomla 1.0.xx
Currently the Joomla 1.0.xx version of this template is still under development.

Normally we build 1.0.xx versions first and then a week or so later release the 1.5 version. We have listened to your voices in our
forum and blog posts and have decided to release the 1.5 version first this time, and followup with the 1.0 later. Let us know what
you think of our decision on the forum.
Once the development of the 1.0 version is complete we will update this section.

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'=>
http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 6 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

'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 dont 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.
http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 7 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

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

Love Thy Favicon!

Click on a block to select it..
What is this?
JoomlaWorks - Professional Free and Commercial extensions for Joomla!
Alledia - Professional SEO Club
Bingo Hideout - Online Bingo Community
Professional Joomla Studio
Accounting Software
Web Directory

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 8 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

Email Marketing Software

Home Course
Netprofit Webseitenoptimierung
Business Directory
Gastronomie Fachwrter
Professional Joomla Extensions
Professional Copywriting Services to ensure you succeed on the web!
Web hosting
Fernstudium
Urlaub
Next Web Directory
Business Web Directory
hitelkivaltas
Denver Real Estate
Coupon & discount codes
Ninjoomla Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Best Hype
Web hosting
Swiss antique market
Olcs DVD
BLOCK 30
BLOCK 31
BLOCK 32
The home of MyBlog, JomComment and Nice Talk! Powerful blogging components for your Joomla site!
Betting Hideout - for online betting
Poker Hideout - the internet poker site
Casino Hideout - all about internet casinos
Lotto Hideout - for UK lottery
Skill Games Hideout - flash games
Trader Hideout - financial spread betting
BLOCK 40
BLOCK 41
BLOCK 42
BLOCK 43
The web based Css Gallery & Resources For Web Designers Made With Joomla
Free Software Downloads, Software Reviews, Download Freeware and Shareware Software - FilePlaza.com
Web Design Consultant, Interface Designer & Photographer.
BLOCK 47
Open Source Support Desk - Joomla Support
Hitel, hitelek
BLOCK 50
BLOCK 51
BLOCK 52
BLOCK 53
Lanyards
BLOCK 55
BLOCK 56
BLOCK 57
BLOCK 58
BLOCK 59
Fernstudium
BLOCK 61
BLOCK 62
BLOCK 63

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 9 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

BLOCK 64
BLOCK 65
BLOCK 66
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Joomla Templates
BLOCK 72
Joomla design gallery
BLOCK 74
BLOCK 75
saint statues
BLOCK 77
Yacht rental
BLOCK 79
BLOCK 80
BLOCK 81
BLOCK 82
BLOCK 83
BLOCK 84
BLOCK 85
Datatank
BLOCK 87
BLOCK 88
BLOCK 89
BLOCK 90
giocattoli
Private Krankenversicherung
BLOCK 93
BLOCK 94
BLOCK 95
BLOCK 96
Webkatalog
BLOCK 98
BLOCK 99
BLOCK 100
BLOCK 101
BLOCK 102
BLOCK 103
Fernstudium
BLOCK 105
BLOCK 106
Get your daily dose of the latest Joomla themes news!
BLOCK 108
BLOCK 109
ChurchWebPlus - Affordable web design for churches and non-profits
BLOCK 111
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
Ninjaforge Extension Club - Over 50 Affordable, Professional, Web 2.0 Extensions!
BLOCK 116
BLOCK 117
BLOCK 118
BLOCK 119
Wedding Accessories

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 10 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

BLOCK 121
BLOCK 122
BLOCK 123
BLOCK 124
Fernstudium und Weiterbildung
BLOCK 126
BLOCK 127
Tanning Beds
BLOCK 129
BLOCK 130
BLOCK 131
BLOCK 132
The home of sh404SEF - the ultimate sef url rewriting extension for Joomla and Mambo!
BLOCK 134
BLOCK 135
Joomla templates, Wordpress themes
BLOCK 137
BLOCK 138
BLOCK 139
Online Kredit Index
BLOCK 141
BLOCK 142
BLOCK 143
Fernstudium
BLOCK 145
Stromvergleich
BLOCK 147
BLOCK 148
VMOptions Deep Links Directory
BLOCK 150
BLOCK 151
BLOCK 152
BLOCK 153
BLOCK 154
BLOCK 155
BLOCK 156
BLOCK 157
BLOCK 158
BLOCK 159
Ratenkredit
BLOCK 161
joomla 1.5 templates
BLOCK 163
BLOCK 164
BLOCK 165
BLOCK 166
BLOCK 167
Kredit
BLOCK 169
BLOCK 170
BLOCK 171
Free Business Advertising
BLOCK 173
BLOCK 174
BLOCK 175
BLOCK 176
BLOCK 177

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 11 of 12

Template Guide - Zappa - JoomlaJunkie

5/18/09 10:01 AM

Joomla Templates
modern furniture
Dirsense

Template Club

JoomlaJunkie Blog

We have a number of
membership options to give
you access to all our
templates.

Have you seen the newJoomla

Junkie Blog, where we are
covering all kinds of exciting
topics!

Help & Support

We offer various types of
support to assist you in getting
setup with your new template.

Demo Templates
Not had a look at our
templates yet? Why not head
over to our demo server to take
a peek!!

readmore
readmore

Privacy Policy

Terms of Use

readmore

Site Map

Work with us

view demos

Contact us

Copyright 2009 JoomlaJunkie.

http://www.joomlajunkie.com/help/guides/template-guide-zappa.html

Page 12 of 12