Template Guide - Snappa

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.

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.

Step 2.) Installing the Template

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

Step 3.) Setting up your modules

3.1) Snappas module positions

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

Print this image out for a quick reference.

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.

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 4 module header styles and 3 background styles for the modules. 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:

8 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
"-sfx h3contact" - Adds a contact icon 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

Module Background Styles

"-sfx green" - Adds a green background to the module header
"-sfx brown" - Adds a brown background to the module header
"-sfx litebg" - Adds a litebg background to the module header

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 h3brown green. This adds a solid 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.

Step 4.) Configuring your template

4.1) Built in tabs:

Snappa comes with built in tabs. If nothing is assigned to any of the module positions (user5, user6, user7, user8 or user9) then the tabs will not load. Each module position in the tabs is an intelli module position that can accomodate up to 3 modules per tab. You can customize your tabs titles below. You can also customize which tab title style the tabs should use.

$tab1_title = "Tab One";
$tab2_title = "Tab Two";
$tab3_title = "Tab Three";
$tab4_title = "Tab Four";
$tab5_title = "Tab Five";
$tab_off_style = "grunge1"; // Choose from: grunge1 | grunge2 | grunge3
$tab_hover_style = "grunge1"; // Choose from: grunge1 | grunge2 | grunge3
$tab_off_bgcolor = "#2D2513"; // Specify a background color to use with it.
$tab_hover_bgcolor = "#5F4E28"; // Specify a background color to use with it.
$tab_foreground = "#EFEFE0"; // What color would you like the tabs active
// and main content area color to be?
$tabs_position = "top"; // Choose from: top | bottom

4.2) Module headers:

There are 4 web2 AND 3 grunge style module headers that you can choose from. These work the same as with our previous templates and allow you to easily customize how your modules look by adding a module suffix like "-sfx h3grunge1".

Module headers grunge background colors:
We are using some clever transparency trickery on the tabs titles and module headers, which allow you the option to really customize how your template looks. By setting your own background colors for each of the 4 available grunge styles, you can then use the suffix "-h3grunge1" and it will make the module use your own custom grunge style.

$h3grunge1_color = "#392D14";
$h3grunge1_txt_color = "#fff";
$h3grunge2_color = "#6CADBE";
$h3grunge2_txt_color = "#fff";
$h3grunge3_color = "#C6B8A3";
$h3grunge3_txt_color = "#fff";

4.4) Template background type:

You can choose whether the template should use the default background image, or alternatively, you can choose to use the gradient or solid background color option. If the background type is set to "solidcolor" then the color value below will be used.

$body_bgstyle = "image"; // image | gradient | bgcolor
$body_bgcolor = "#2D2413";

4.5) Equal heights:

Snappa also has a built in equal height script included. This will make both the sidebar and content area the same height. You can choose to disable this, should you prefer not to use this.

$use_equal_heights = "yes"; // yes | no

4.6) Gzip compression:

By default we are using gzip compression to ensure that the template has the least number of http requests as possible, but if you experience any issues with this, you can just turn it off.

$use_gzip = "yes"; // yes | no

4.7) Menu source:

Choose a joomla menu to use as your primary navigation (top menu): mainmenu | topmenu | usermenu etc.

$menu_get = "topmenu";

4.8) Custom credits:

Add your own credits here

$credits = "Copyright © 2007 YourCompany - All Rights Reserved";

4.9) Top header options:

The top header section has 3 different options.

OPTION 1: CSS BACKGROUND IMAGE
You can choose to have a css background image which is displayed on all pages.

OPTION 2: COLLAPSIBLE INTELLI MODULES ONLY
The last option will load the shelf with an intelli module position (ie, one module position that can accomodate up to 3 modules). No css background image is specified in this option. The last option also allows you to only display the shelf on pages that have a module assigned to that position.

What would you like to use for the top user2 shelf positions: image | modules

$opt_header = "image";

4.10) Configurable sidebars:

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 nly set "content, then no sidebar wil 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) Super logo configuration:

Add your own text and font in no time!

We made it easy to change the logo on Snappa we have in this release included a great feature that allows you to easily change the standard Snappa logo. You can actually replace the logo with any text of your choice as well as any font of your choice and of course in whatever colour you choose.

Your site name will, by default, be automatically pulled in from the Joomla configuration, but with Snappa you can set this to use any text you like in the templates configuration.

Have a look at the image below to see a summary of the options for the logo:

4.30) Replace css based text with an image on the fly

To achieve the image replacement with the logo we are using a script called facelift by Cory Mawhorter. Facelift is a very clever little script that replaces the normal css based text with an image that is generated on the fly using a font of your choice.

Due to a licensing issue with fonts, we are not allowed to distribute any fonts with the template itself so you will need to add the fonts to the fonts directory yourself.

The easiest way to get started is to download the facelift files from their server. Upload (only) the fonts directory to the facelift directory in the Snappa template folder. This will work nicely as we have kept the configuration file in the same format as facelift default settings, so it will pick up all of the fonts from the Snappa facelift directory.

Grunge fonts resources

Now obviously best results will be achieved using a grunge font, so we have compiled a list of resources from where you can get some awesome grunge fonts that you can easily add to the template and use for your logo on Snappa. Just upload these to the Snappa facelift directory and then declare them in the config-flir.php file (you can find detailed information about doing this on the facelift website).

4.40) Accordion Menu

You will notice a new addition to the Snappa 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:

First set your menu module parameters to load sub items.
Make sure the menu is set to flat list.
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.50) 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.

Last but not least, We are using an image taken by a friend and more to the point, an absolutely fantastic photographer. Here is a link to the original image: "Marilyn Monroe in sepia". The image was perfect for what I wanted - to brings that fun and lively feeling to the header.

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:

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