JoomlaJunkie - Joomla Template Provider Bringing color to the Joomla community

If you are using this template with SEF (search engine friendly URL's), please make sure you change the links in the ie6.css to point directly to your domain by putting in the full path to the images. There are 3 image references that must be changed as follows

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/jj_ario/images/logo.png
to:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.yourdomain.com/templates/jj_ario/images/logo.png

Check out the screencasts to see how to change the colors with Ario

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.

Before You Start:

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 on the zip "absolute-redux-unzipfirst.zip" onto your computer.

First of all, lets start by explaining whats included in your download and how we have structured the files. In the main folder that you have just extracted to, you should have the following:

• source files (These are the Fireworks source files that we designed the template in. If you dont have a copy of Fireworks, you can always download a trial version from the Macromedia site here.)
• fonts (Any relevant fonts to the template)
• template the template zip
• changelog.txt
• readme.txt

Step 1.) Installing the Template and setting the Template Configuration

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 template config below...

Open the template index.php file (in your template install folder on your server) with a web file editor (such as dreamweaver or notepad) or by logging into your Joomla Admin and selecting site-templatemanager-sitetemplates from the top menu, then select the template and click on the edit html from the top menu. Make sure that this file is writeable as you will be saving any changes to this file.

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

The template will now be successfully basically installed, so you can proceed to Step Two to setup your modules.

Step 2.) Setting the module options.

We have setup the entire template to pretty much work "out the box", so there isn't much module work you need to do. Module positions can be viewed below:

1. TOOLBAR - We have used the "other menu" to create the top icon menu. open the "other menu" from your site modules section in your site administration, change its position to "toolbar" and give it a menu class suffix of -top. Set the menu typ to flat list and set show menu icons to yes. In your downloaded template package source folder are 3 images: map.png searchicon.png home.png. You need to copy these 3 images to your site roots images/stories folder. Once you have done this, open the other menu from your site admin, and delete/un-publish the 4 default menu items.
   Create a new menu item, select component - front page and call it home. click apply - and then under the option menu image, select the home.png image.
   Create a new menu item, select component - search and call it search. click apply - and then under the option menu image, select the searchicon.png image.
   For the 3rd menu item we created a menu item as above, but used a component called joomlap for the site map, you can download this component from the Joomla extensions site.
2. SUCKERFISH MENU - This is the site main suckerfish menu, which uses your main menu by default. Open up your site modules from your site administration and un-publish the main menu module. We do this as the suckerfish menu pulls the menu in by default anyway, so you do not have 2 main menus displaying on your site. Remeber to make suckerfish menu items you must make the menu items child items of other main menu items as per the TIP section below.
   
3. HEADER - The site main header image is located here, check in your templates images folder, you will see an image called header.jpg.You can change this image to any image for your site, the dimensions are 960 X 163. If you want rotating images in your header:
   Download a image rotator module, we used the simple image rotator from Joomlaworks. Install the module, and publish it to the header position - also turn show titles off. Create a folder called headers in your sites images/stories directory. Set the image width and height to 960 X 163.
4. LEFT AND RIGHT MODULES - These are published in the standard way as per the diagram above - remember to config your positioning of your right column as per the template config (section 1)
   
5. INTELLI MODULES - advert1 - advert2 - bottom: By publishing up to 6 modules in either of these positions, they will style correctly in there respective "intelli module" positions. You can read more about intelli modules at the ario demo site, section template features.
6. INSET - Standard inset module position, publish any inset - type content here (banners or info or warnings etc)

That is it for the base module and site setup. Check the site demo for more details on all features, and our forum if you have any questions. Hope you enjoy JJ Ario!

Info: Suffixes for JJ Ario

Module styles allow you to change the way a module within the template will look, by applying a pre defined style. This is done by setting a parameter in the module called the suffix, this page shows all various suffix and module styles.

With Ario, we are using suffix combining to allow much more flexibility when creating a module and applying a style to it. The aim of this page is to show you how this is can be used.

On the JJ Ario Suffix demo page you may see many different module styles, but this does not mean we have set a specific suffix for each. We have structured it so you can use multiple effects on the same module. So you can apply a number of styles to the module header and the module itself. By default the module has a grey H3 with no module background, but if you add the suffix h3striped for example, it will add the striped background, and if you want it red, just add "h3red" in the suffix, if you want it to have a light background, just add litebg to the suffix.

This allows you to  be more flexible in how you want your content to be displayed, for example the 3 modules on the home page above the content is using the suffix: -ario -h3solid litebg, this gives you an idea of how they can be used to signal out areas of the website. 

• Here is a summary of all the module suffixes:
  Headers
  h3striped
  h3red
  h3green
  h3solid
  alert
  -info
  
  Backgrounds
  stripedbg
  litebg
  horzlines
  insetinfo
  
  

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

The built in Suckerfish menu sucks 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 hierarchial way, so it will be easy to see which is the parent and which is the child.

TIP: How to "Collapse" either the Left or Right Sidebar..

To collapse or "hide" the left or right sidebar on certain pages, all you need to do is make sure that no modules are assigned to that particular menu link (page). The easiest way to do this, is go to your modules manager and choose the module position filter drop down (top right) and select the module position to filter by. All that this is doing is setting the modules page to only show all modules that are assigned to the "left" (or right) module postion. For example, if you wanted not have the sidebar shown on the wrapper page, as you wanted to utilize the full width of the template, you would make sure that all modules assigned to the left + right position were set NOT to display on the wrapper menu link. This can be done by opening each of the published modules that are assigned to that position and checking that the page/menu link is deselected in the " Pages / Items" Menu Item box (right hand side of the module options).

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)

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.