Professional Joomla templates and extensions club

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.

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 "extract-first_ariodark.zip" onto your computer.

First of all, lets start by explaining what is 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)
• templates the template folder
• 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...

Joomla 1.0.xx

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-template manager-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 write-able as you will be saving any changes to this file.

Joomla 1.5

In the Admin backend go to extensions->template manager->Ario and edit the options from there.

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

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

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 - Create a new menu module. 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 type 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.
   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 to be a color, just add "h3color" 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 single out areas of the website. 

• Here is a summary of all the module suffixes:
  Headers
  h3striped
  h3color
  h3alt
  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.

Update: Ario gets 12 more Colors

Due to the ongoing popularity of Ario (lite and dark) and the large amount of requests that we have received for more colors, we have decided to update both the dark and lite versions to now have 12 different color options. These color options are a mix of both bright, vibrant colors as well as more earthy soft tone colors.

Not only are these a great start to customizing the template for your site, but its also stupidly easy to set the color variation you would like. Check out the screencast on how to change the theme of your site in a matter of seconds.

Apart from these awesome colors we have added to Ario we have also done some updates to the code and core structure. One of the main features of Ario, is the ability to set a column layout for any component individualy. If you are wondering how this works, then check out this screencast to see how to almost instantly restructure the column layout of your home page and add an extra column to the contact us page.

Existing Ario customers, you will be happy to know that for only $5 you can upgrade from the original green Ario to the 12 color template pack. If you are using Ario on an existing site and feel like giving it another color scheme, then contact us and we will show you how to get your upgrade. Please note, if you are using Ario on a website and want to use the pack on another website (domain) then you will need to add an additional domain license to your order on the payment page.

Watch as we easily switch the Colors of Ario

This screencast will show you how to change the default green theme to a rusty orange color and also a soft brown by modifying the templates configuration options. There are a total of 12 colors to choose from in the new Ario, you will see all of them in the options code of the video.

Watch Screencast

Learn how to switch the column layout in Ario

Are you tired of having to unpublish all the modules on a component that needs full width like a forum. Then watch this video to see how we can easily switch how the columns display on the home page, content pages, contact us page, in fact any component you install on Joomla.

Watch Screencast