Joomla templates and extensions club

Before You Start what you need to know:

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

Once you have successfully downloaded your template, 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 "extreme-blogger-unzipfirst.zip" onto your computer. Please note that if you purchased an individual template and are not a club memeber the template name will be extreme_blogger-zip due to the way the download program names the files.

First of all, lets start by explaining whats included in your download and how we have structured the folders and their content.

• Fonts: All/Any fonts required to modify the source files if required
• Source Files: These are the Fireworks source files that we did the original template design with. If you dont have a copy of Fireworks, you can always download a trial version from the Macromedia site here.
• Template: extreme-blogger-v1.0.x.zip
• Template: extreme-blogger-v1.5.zip
• Modules: These are the modules included with the template to achieve a layout similar to what we have on the demo
  
  • Flickr module - mod_flickr4j_pics from - http://flickr4j.nborn.ch/
  • VCF contact module
  • Simple feed module
  • Color switcher module
• Mambot: flickr4j_lib mambot (flickr4j_lib is the base library that is needed for all the flickr4j and the module to work)
• Changelog.txt: this contains all changes and template versions

Style Guide

We have included a style guide for how to structure your content in order to best utilize the built in typography features we have added to this template. Also, by using the typography guidelines, you will ensure that your content is added semantically and keeps a consistent theme throughout.

We suggest that during the development of your site that you create a content page that you can use as a reference when adding content that you can unpublish or set to admin only when the site goes live. If you would like to do this, please add a content page in Joomla admin and include this xhtml in the page

Step 1 - Installing your template

1. Login to Joomla admin and 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).

Step 2 - Configuring your template

You can see the template module positions live on the demo site or click the image.

1 - Setting up your menus

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: "Flat List" and assign it to the "Footer" module positon.

2 - Making changes in the template configuration

Joomla 1.0.x -  Using any ftp program, open the template directory and in the template root folder open the index.php file (in your template install folder on your server) with a web file editor (such as dreamweaver or notepad). Make sure that this file is writeable as you will be saving any changes to this file.

Joomla 1.5 - Edit these settings from from the template section of your admin area.

You can edit this file with the following settings below to customize your site defaults:

Set Menu Type

Choose which menu you want displayed at the top, this relates to the menu name in the Joomla admin menus section

// choose menu type: mainmenu | topmenu | usermenu etc.
$menu_get = "mainmenu";

Default Color

Select which color you want to be the default color that loads when users visit your site

// default color: Poppy-Pink | Mustard-Orange | Mystic-Blue |
// Lemon-Green | Ruby-Red | Crazy-Copper | Electric-Blue | Polished-Brown |
// Tangerine-Orange | Lagoon-Turquoise
$default_color = "Ruby-Red";

Flickr Module

If you are using the flickr module then this must be set to "yes", if not, make sure it is set to "no"

// are you going to use the flickr module? yes | no
$use_flickrmodule = "yes";

Copyright

The text you enter here will be displayed in the footer as your footer copyright text

// add your own credits here
$credits = "Copyright © 2007 JoomlaJunkie.com - All Rights Reserved";

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"

Joomla 1.5 users. You will not see a com_frontpage option in your config due to 1.5 not being coded the same way as 1.0.x. Instead use com_content.

// Use the folowing option for quick off LEFT and RIGHT positions displaying
$sideBarsScheme = array (
//by default
'default'=>
'sidebar-content',
// specify extra options for different components
// sidebar-content | content-sidebar
'com_myblog'=>
'content-sidebar',
'com_fireboard'=>
'content',
'com_content'=>
'sidebar-content',
'com_contact'=>
'content',
'com_frontpage'=>
'content-sidebar',

3 - Working with the Module Suffixes

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

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 6 module header styles and 2 background styles for the modules. Please see the template demo snapshot page for how each of these styles look.

Here is a summary of the styles

• Header Styles
  • colorh3 - gives a solid web2 style header to the module
  • darkh3 - gives a darker style background to the header
  • cat - adds a category icon, great for menus and blog category
  • login - adds a lock icon for login module
  • online - adds a user icon to use for whos online module
  • polls - adds a polls icons to use with polls module
• Module Background Styles
  • darkbg - adds a dark background to the module

So how do you use them? Well lets say you want the login to have a dark background and a dark header with the lock icon, you set the suffix to "-sfx darkbg darkh3 login" if you want the color header instead of the dark you would set "-sfx darkbg colorh3 login" etc. If you play with the suffixes you will quickly see what can be achieved.

The inset module which is the color module above the user 1 module position does not require a suffix, any module published to this position will automatically adopt the styling based on the specific color.

Step 3 - Installing and Configuring Modules & Mambots

1 - Getting the Flickr Module up and running

The flickr module and mambot we use is a slight adaptation from the great flickr4j module and mambot from flickr4j

First you need to install the Mambot

After you install the mambot, it will ask you to add information to the head of your index.php, this is not required!!

1. Login to Joomla admin and go to "Installers > Mambots"
2. Browse for the bot_flickr4j_lib (1.0 rc).zip file in the Mambots folder.
3. Click "Upload File and Install".
4. Click on flickr4j_lib in "Site Mambots" in the administration menu
5. Enter your flickr username, api key (get one here), and caching time in seconds (for instance 86400) and save it.
6. Publish it

Now you install the Module

mod_flickr4j_pics is a module that inserts the thumbnails of random or your latest pictures. You can specify the amount of pictures and the their size.

1. Login to Joomla admin and go to "Installers > Modules"
2. Browse for the mod_flickr4j_pics.zip file in the Modules folder.
3. Click "Upload File and Install".
4. Open the module to specify the parameters as below
5. Set to left module position
6. Add your flickr username
7. Set the suffix to -flickr
8. Picture size square

2 - VCF Card contact module

This module shows a vcf icon on the front end that allows you to see

1. Login to Joomla admin and go to "Installers > Modules"
2. Browse for the mod_vcard.zip file in the Modules folder.
3. Click "Upload File and Install".
4. Open the module to specify the parameters.
5. Publish to left module positions
6. You can hover over parameters name for instructions
7. You need to add the Contact ID which can be found by going to components > contacts > manage contacts and select the contact you want to use and look at the end of the url you will see a "id=x" x being the number you need to use, this is usually 1 if you only have one contact set.
8. You can customize the display text in the module parameter to anything you like

3 - Simple Feed RSS module

1. Login to Joomla admin and go to "Installers > Modules"
2. Browse for the mod_simplefeed.zip file in the Modules folder.
3. Click "Upload File and Install".
4. Open the module to specify the parameters.
5. Publish to left module position
6. You can hover over parameters name for instructions
7. Set intro and link text
8. Choose RSS source - Joomla or MyBlog (if using component)
9. Set RSS Type

4 - Color switcher module

This module allows your users to change the color of your website by clicking on the relevant color

1. Login to Joomla admin and go to "Installers > Modules"
2. Browse for the mod_tchooser.zip file in the Modules folder.
3. Click "Upload File and Install".
4. Publish to left module position.
5. The styles parameter lists the styles that relate to the specific color css file names as in the css folder of the template. Please add the following to this parameter

Poppy-Pink,Mustard-Orange,Mystic-Blue,Lemon-Green,Ruby-Red,Crazy-Copper,Electric-Blue,Polished-Brown,
Tangerine-Orange,Lagoon-Turquoise