JoomlaJunkie - Joomla Template Provider Bringing color to the Joomla community

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 (named something along the lines of "ExtractMe-TemplateName.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 folders:

• Template (This includes the color template zip file that you would use to install only the template)
• 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 Fonts needed by the template)
• Mambot (The ultimate PNG fix for resolving PNG transparancy issues.

Step 1.) Installing just the Template, Mambots and the template config.

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

1. Open the template index.php file 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.
2. You can edit this file with the following settings below to customise your site defaults:
   1. $use_instantsearch = 'yes'; // yes | no
      This is set to use the instant search by default, you can turn it off by changing this to no.
   2. $use_iluvlogin= 'yes'; // yes | no
      This is set to use the iLuv custom login by default, you can turn it off by changing this to no.
   3. $template_color = "green"; // green|blue|orange|red|redbrown|pink|dark|brown
      This configuration allows you to easily change the colorof the promotional bar, Change the color
      below to the color of your choice.
      

Install the PNG mambot (located in the mambots folder) by clicking on installers - mambots from your site administration. Also install the JX Thick Box Mambot for thick box on site images by click clicking on installers - mambots from your site administration. Remember to make sure that these mambots are published.

In order for the live-search module to function without any notice errors, open up your site global configuration and select the server tab. Set the error reporting level to simple.

Step 2.) Setting the module options.

Quite a lot to do here, so we going to work from top page modules down to the bottom... an explanation of the various suffixes can be found in step 4, for the basic setup explanation I have just used the suffixes the same as the demo site.

inset - this is for the custom login module which is placed into this position by default.
tab menu - this is set as the standard top menu.
top modules - The top module position is as follows:
• if you publish any content to the top module position it will be placed in respective order in the top area as above, you can have up to six items per page published in the top module area.
main menu - this is set using the standard left position as below:
• Open the "Main Menu" module, set the menu type to flat list. As per the demo site, give this menu a module class suffix of -iluv bluestar menu. If you have multiple main menus in your site on the same page; due to id conflicts you will need to assign a menu class suffix of -2 to the second menu or -3 to the third menu so as to avoid conflic issues.
other menu - this is set using the standard other menu in the footer position.
• Open the "Other Menu" module, set the module position to footer and set the menu type to flat list. Make sure this menu has a suffix of -footer.
User 1 Modules - There are 6 User 1 positions as explaned below in step 4 but an example of this is below:
• Open the "Latest News" module which is set to the User 1 position by default. Give this a module suffix of -iluv orange and then close the module. Open the "Popular" module, set its position to User 1 as well, and give it a module suffix of -iluv green. Then refresh your main page and you will see both above modules in the user 1 position - one styled orange and one styled green. This can be done with various suffixes and up to 6 times in the User 1 position.
bottom modules - The bottom module position is divided as follows:
• if you publish any content to the bottom module position it will be placed in respective order in the top area as above, you can have up to three items per page published in the top module area.
footer - We are using the "Other Menu" module to act as the footer menu.
• All you need for this to work properly, is open the "Other Menu" module, set the module position to footer and set the menu type to flat list.
  

Step 3.) Multiple - Single Module Positions (intelligent modules)

This template makes use of Intelligent Module Switching to handle multiple modules in one position. The traditional method of handling this means using 6 module positions, we only use one.

For a detailed explanation of this and exactly how it works please check the iluv demo site - demo.joomlajunkie.com - under the template features section, open the intelligent menu's option.

Step 4.) Module Styles - An explanation of suffixes and how to use them.

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, all suffixes for iluv are below:

1. -iluv orange this gives the module a shaded orange background.
2. -iluv green this gives the module a shaded green background.
3. -iluv blue this gives the module a shaded blue background.
4. -iluv bluestar this gives the module a standard background with a blue star in the module heading.
5. -iluv orangestar this gives the module a standard background with a blue star in the module heading.
6. -iluv dark bluestar this gives the module a dark background with a blue star in the module heading.
7. -iluv dark orangestar this gives the module a dark background with a blue star in the module heading.
8. -iluv notopbg removes the top border if you want to avoid a double border effect on single module areas.
9. menu add menu to any of the above if your module is a list or menu in order to have the correct iLuv menu styling.

By default install the module headers have a simple basic styling which can be changed to any of the above, depending on what you would like your module to look like. These suffixes can be seen in action by checking out the iluv demo site at demo.joomlajunkie.com - open the module styles option from the top tab menu.

TIP: How to "Collapse" the shelves.

iluv is extremely collapsible. In order to collapse a shelf (for example here - the left modules area):

To collapse or "hide" the left sidebar on certain pages, all you need to do is make sure that no modules are assigned to the left module positions for that page. The easiest way to do this, is go to your modules manager, open the module you wish to show/hide 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" 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 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).

This goes for the top, user and bottom module positions and also of course the left and right positions as well. Also, for example if only 1 module is placed in the top, user or bottom module area, it will fill the full module cell width, wheras if 2 modules are assigned to the top, user or bottom module, they will get 50% space each, thereby keeping your site clean and tidy and looking good.