How to Set Up the Flash Image Rotator

The Flash Image Rotator is one of the most popular tools around. It enables you to set a number of images to rotate, at a speed you specify, through a module position on your site. It is a fantastic way to display multiple images without having to use up a lot of space on your page.

The Image Rotator is an extension that gets published in module positions. Once you have installed it, all you need to do is upload the images you want displayed, customise your Rotator, and publish it in a module position. This guide will teach you how to customise and publish your Rotator, after you have uploaded the images you wish to display into a folder in your Media Manager.

Setting up the Image Rotator

1. Login to the backend of your Joomla site.

2. Go to the Module Manager under the 'Extensions' tab, as shown below.

3. You will have the Image Rotator available if you have already installed the Rotator. Find the Image Rotator, select it, and click 'Edit' in the top right corner, as in the screenshot below.

4. You will now see the familiar editing screen for modules. The editing screen for the Image Rotator is slightly different though, and it is extremely important to get all of the settings right. Important fields to note are: enabling the module, the module position, the menu assignment, and most things in the module parameters. The Image Rotator screen is pictured below, with the important fields highlighted by arrows.

5. Set your Rotator module to be enabled, and place select the module position where you would like it to be displayed. We also recommend setting your title to be hidden.

6. Select the menu items under which you would like your Rotator to be displayed.

7. Now switch your focus to the Module Parameters box. First you will see a field for the image directory. This field determines the directory within your Media Manager from which the images will be displayed. The Image Rotator will cycle through all of the photos in the selected directory, so make sure you set this directory to be the one in which you will store your Image Rotator images.

8. Next you will see a field for height and a field for width. These fields determine the dimensions of the Image Rotator, and so they determine what dimensions the images you display should be. Putting a 900x400 pixel image into a rotator set to display at 700x200 pixels will break the rotator display. Make sure you resize your images to match the dimensions you specify in this field.

Another thing to be careful of is breaking the module position into which you place your rotator. If you set the rotator to display at 1000x800 pixels, you will break most modules because the dimensions will be greater than the dimensions of the module positions themselves. The rotator dimensions are the trickiest thing to get right, and it will likely take some trial and error to set these fields up properly.

9. The Image Display Time field determines for how long an image displays before rotating to the next image in the directory, and the Transition Effect determines the style used when it rotates. Set these fields to your preference.

10. Finally, you will see options for how your rotator triggers, whether it repeats its cycle, and whether shows navigation. We recommend leaving these to their default settings. When you are finished with the Module Parameters, click 'Save'

11. Your Image Rotator will now be up and running, but until you upload images to the directory from which it is pulling them, it will not display anything. The final step is to upload all of the images that you want your rotator to cycle through. Put them all into the directory you selected in the Module Parameters, and your Image Rotator will now be rotating through all of these images!

Resetting the Password for Any User in your Joomla site

For one reason or another, you may come upon the situation where you’ve lost your ability to login to Joomla with your super admin login information.

If this happens to you, here’s how you can reset the password:

1) Login to the control panel of your web host account and open phpMyAdmin:

2) Open up the database for your website:

3) Find the table that ends in “_users.” It will most likely start with “jos,” but it could start with some other letters.

When you find it click on the Browse icon just to the right of the table name:

4) Find the user whose password you want to change in the list on the next page and click on the pencil icon:

5) On the next page, in the password row, select MD5 as the password type and then enter in your new desired password in the password field:

and then click on Go at the bottom to save this change.

6) Go back to the Joomla administration login page and login with your username and the password that you entered in the last step, and you should be able to login now.

Changing Joomla's Date Format to American Format

For one reason or another, American's preferred date format (e.g., February 25, 2010) is not an option within Joomla.

I know there's many people who use Joomla who are not in the U.S., but for those of you who are, if you'd like to change the date format in Joomla to the American format, this one's for you.

You can see the date format appear in a number of different places, but one common place you'll see it is in an article's date created information:

The date format you see in the above image is Joomla's default date format, which is the international date format.

I'll show you two ways you can change this date format: 1) By editing one of Joomla's core files, and 2) installing a US language pack.

Here's how to change the international date format to Month Day, Year (while also removing the time stamp) by editing one of Joomla's core files.

1) Using your ftp software, such as Filezilla, navigate to the en-GB.ini file, which is in this location: your root directory/languages/en-GB/en-GB.ini

2) Open the en-GB.ini file with your plain text editor and look for this line of code towards the top of the file:

DATE_FORMAT_LC2=%A, %d %B %Y %H:%M

3) That's Linux date format code, and you'll need to change it to this:

DATE_FORMAT_LC2=%B %d, %Y

4) Once you make that change, save the en-GB.ini file and upload it back to the en-GB directory.

5) Go back to the front of your site and refresh the page. You should see this date format now:

Now, here's an important note to keep in mind: when you make this change, you're editing a core Joomla file. When you upgrade Joomla, there's a chance that there will be a new language directory, a new en-GB directory, or a new en-GB.ini file.

If that's the case, when you upgrade, your date change will be lost, since the en-GB.ini file that you edited will be overwritten by the new one in the Joomla upgrade package.

If you're fine with potentially needing to make this simple change each time you upgrade, then you're fine.

If you want to avoid that, there's another way to make this change: install the American Language pack by Dave Morgan.

Here's how:

1) Go to this page and download the language pack by clicking on the download link:

English Language pack

2) Install it in Joomla by going to Extensions>Install Uninstall.

Click on Browse, find the language pack file you downloaded, and double click on it when you find it.

Then click on Upload and Install on the Extension Manager page.

3) After it's been successfully installed, go to Extensions>Language Manager.

4) Check the radio button next to English(United States) and then click on the Defualt icon in the upper right of the page to make this language pack your default language pack.

5) Then, go to the front of your site and refresh the page, or navigate to a page that has a date showing and you should see a date format like this:

If you want to edit how that date format is appearing, such as taking the time stamp off, go to language/en-US and open the en-US.ini file. Change the date format for LC2 in a similar way that I described above for editing the en-GB.ini file.

For example, if you wanted to remove the time stamp, you would delete the %H:%M on the line of code for the DATE_FORMAT_LC2 within the en-US.ini file. Currently, that line of code is on line 11 of that file.

When you update Joomla, your date format changes will remain in tact as long as the core Joomla team doesn't create a new language directory named en-US as a new option.

How to put modules in Joomla articles

One of the handiest tools you can have in your Joomla toolbox is the ability to put the contents of a module right into the body of an article. (The article you're reading now is using this method. See the message in the box right above this sentence? That's actually content from a module being loaded right into this article.)

This can be a significant timesaver, since you can create a module one time in the Module Manager and then simply place it into any number of articles on your site.

That means you wouldn't have to set up that content individually in every article: you do the work once and then simply tell Joomla where you want that module to appear.

To show you how to do this, I'll show you an example of using this method to put a newsletter sign up form right in an article.

Here's a look at the end result:

Here's how to do this:

1) In Joomla go to Extensions>Module Manager. Then click on New to create a new module.

2) Select Custom HTML from the list of available modules. (You can put other types of modules in articles, but for this example I'll show you how to do this with a custom HTML module.)

3) Name your module. In this example, I named the module "Newsletter sign up."

4) Set show title to "No."

5) For the module Position (and here's the key of this trick), put your cursor in the field next to "Position" and type in a new position name. In this example, I've called the new position "newsletter."

6) For the menu assignment, you can leave it set to All.

7) In the Custom Output area, enter in whatever content you want to have in this module. In this example, I've got some code entered that's creating the iContact newsletter sign up form:

8) When you're done, save the module.

9) Go into the Article Manager (Components>Article Manager) and open up an article where you'd like to put this module.

10) Wherever you want the module to be, type in this syntax (which is sometimes referred to as the "loadposition syntax") :

Replace "newmoduleposition" with the name of the new module position you created when you typed in the new position name in the custom HTML module.

For my example, this is how my article with the newsletter module in it looks when opened up in Joomla:

11) Save the article and check how it looks on the front of your site. That's it!

Now, whatever article on your site that you want to have this module appear in, all you have to do is enter in the loadposition syntax and it will appear.

How to Create a Custom Module Graphic

This tutorial will show you how to make custom image based modules in Fireworks using masking techniques aimed at the Luhs template design. Navigate to your downloaded package to the Graphic Source Files folder and open custom_module_graphic.png in Fireworks.

If you would like to see a video of this tutorial as well you can download the QuickTime movie here.

Small 640x480 (1.5 mb)
Large H.264 1080 (13.5 mb)

You will see a screen similar to this one.
(click for larger)

Choose the SubSelect tool.

Draw a box over the shape just large enough to select the corner nodes as shown below.

The corner nodes are sub-selected.

Hold down Shift to keep the mouse straight or use the arrow keys to resize the shape vertically.

The shape is resized.

Choose the select tool.

and select the top shape.

Choose Edit > Cut.
The shape is loaded onto the clipboard.

Select the image and resize it. (Cmd+T)
You can temporarily lower the opacity in the layers palette to see the underlying shape.

Once resized, choose Modify > Mask > Paste as Mask.

You can return the opacity back up.

Use the text tool to add some graphic text to the image.

Select all by choosing (Cmd+A) , then right click the graphic and choose "Insert Rectangular Slice"

Whwn the popup appears asking you to choose Single or Multiple slices, choose "Single".

Name the slice in the properties palette to "custom_mod"
*If not shown choose Window > Properties to show the palette.

The last step is to export the image to a place on your local computer by choosing File > Export.

Choose "Images Only" and make sure the name of the file is "custom_mod.png"

To convert to a module just log in to your Joomla admin console and choose New.

Paste the code below into the editor ( in html edit mode) with these settings and save.
Show Title = No
Published = Yes

Important. Modules in the Lush Template right hand position must be no larger than 194px wide!

How to Set up JContact

Setting up JContact to work in your Joomla is a several step process. To get the maximum benefit of the iContact API, you need to enable the JContact component in your iContact account and enter some settings into the JContact Joomla component.

Before you start, head to iContact and grab a free trial.

You'll also need to download a copy of the JContact component.

Once installed, you will need to configure the JContact main settings: Components > JContact > Main Settings.

To enable the component, change "Add Newly Registered Users" to yes and click save.

You will then need to enable the component for the API in your iContact account. To do this you will see a link, highlighted below. First log into your iContact account and then click or browser to that URL.

Note that the API URL can be changed to work with the iContact dev sandbox should you wish. For now, just leave that URL as is.

Once at iContact, you will need to give the application (i.e. JContact) a name, and make sure you are enabling it for the 2.0 API.. Remember your API username and password, the key and then click on the link to enable the AppId.

You can now go back to you settings screen and enter in the values from iContact for the username, password and Key.

Then click save!

Once you have saved this information, you should be able to click on choose and a box will pop up with your iContact lists. If you get an error here, there is some sort of problem communicating with the iContact API, Check your passwords etc.

By default, all registered users will get added to your selected list. You can add a field that gives users the option of whether they want to sign up or not.

At this point you should also create a registration email that will take the place of the core Joomla one.

The last step is to create a link to the special registration page.

JContact must use its own registration page to rather than the core Joomla one in order to work properly. You can create a menu item to the component as normal.

Note, that if someone happens upon your Joomla core registration page and uses that, they won't interact with iContact. Site visitors can possibly stumble across this from the login module/form. You might want to consider a template override to change that link, or an htaccess redirect.