FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog

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.

module manage

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.

rotator edit

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.

image rotator

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!

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

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:

qt3_1

2) Open up the database for your website:

qt3_2

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:

qt3_4

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

qt3_5

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:

qt_7

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.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

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:

qt2_shot_1

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:

qt2_shot_2

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:

qt2_shot_3

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.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

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:

 

qt_scrnshot_1

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

qt_scrnshot_2

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:

qt_scrnshot_3

 

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") :

qt_scrnshot_5

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:

 

qt_scrnshot_4

 

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.


Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

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.

Tutorial Image

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

Image 14

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

Image 15

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

<div align="center"><img style="margin: 0px;" width="194" height="173" src="http://yourdomain.com/path/to/images/stories/custom_mod.png" alt="Alt Description" title="My Description" /></div>

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

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Written by TJ Baker

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

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.

Main Jcontact Settings

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.

The iContact API link

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.

Registering the App at iContact

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!

Save the API settings in JContact

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.

Choosing the iContact list

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.

Optional Sign up field

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.

Creating a Joomla menu item

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.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Written by TJ Baker

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

So you want a website, and you have heard some of the buzz about open source.

Joomla, Drupal and Wordpress have all been mentioned, but you are lost and confused.

No problem, this guide is an easy 10 step process to getting started with building a website with Joomla and some insider tricks and tips to make sure you are making best use of it.

We are going to look at the following things:

  1. Why do you need a website, and why use Joomla?
  2. What actually is Joomla?
  3. How do I install Joomla?
  4. How should I set up my site?
  5. Picking a Template
  6. Organizing Content
  7. Creating Navigation
  8. How can I add features to my site?
  9. How can I make Joomla better for SEO?
  10. How do I keep my site updated, and what lies ahead (Joomla 1.6)

You think you need a website but why?

Joomla vs Drupal vs Wordpress

Unless you have clear goals, your website will not have any focus, and not contribute to your organization's goals.

  • A restaurant might want to increase onsite foot traffic
  • A non-profit might want to increase donations
  • A consultant might want to increase sales leads
  • A school might want to communicate better with parents

But unless you identify your goals, you are building your site blindfolded!

But what shall I use?

Joomla, Drupal or Wordpress?

Why Use Joomla?

Joking aside, Joomla is an excellent solution that lies in the middle of Wordpress's ease of use and the flexibility of Drupal.

Resources

 


Joomla is an open source content management system.

So what does that mean?

  • Open Source means that anyone can contribute to the code, improve it, or distribute it. This means the platform is a living project being created and improved by a community of developers all over the world.
  • A content management system uses a database to place content into designated places on the web page. Its dynamic and in real time.

Let's look at a forum as an example

Example of a database website

Joomla works the same way, the template creates "buckets" or "placeholders" for content, and then the CMS pours content into them as needed.

Example of a database website

Here, the articles are being dynamically generated as well as the bottom lists of links.

Joomla is

  • Easy
  • Powerful
  • Cheap (not free!)

Barrie North's 80/20 rule

  • 80% of what you want to do will take 20% of the effort
  • You don’t really know what your site visitors want

Resources

 


To install Joomla, you need a web account with a MySQL database.

Or you can set up what is know as a localhost.

  1. Download Joomla files
  2. Either
    • Upload file package to server then extract
    • Extract then upload individual files
  3. Create a database
  4. Browse to site and run installation wizard
  5. Pray to all you hold holy that permissions are ok
  6. Delete installation folder

Resources

 


One of the hardest parts to Joomla is setting up the site. To start, there are so many options it an be overwhelming.

The three elements of a Joomla site are:

  • Template (the look and feel)
  • Content (the "beef")
  • Modules (the gravy round the outside)

Elements of a Joomla website

 


Joomla comes with three templates:

  • Milky Way
  • Beez
  • Purity

To get started, just use one of these, then you can graduate to a 3rd party template of which there are thousands. You can get free ones or professional ones ranging from $25-$70

Of course www.joomlashack.com, but others of mention:

  • www.joomlapraise.com
  • www.rockettheme.com
  • www.joomlart.com
  • www.joomlajunkie.com

Commercial innovation has driven Joomla templates much quicker than some other content management systems.

 


The main "meat" content is made up of articles.

Content, or articles need containers, these are called Sections and Categories, and must be set up first.

  • Section
    • Category
      • Article

Joomla content structure - sections and categories

 


Nothing can been seen on the webpage until it is linked to. Next you must set up navigation.

There are no Joomla pages


 

Joomla has thousands of 3rd party extensions, from forums and shopping carts to lacrosse league managers or women's menstrual cycle trackers.

Some are free, some are commercial. Some are GPL, some are proprietary (no, these are not the same thing!)

Lets add some extensions!

Resources

 


Joomla holds its own for SEO!

Joomla has something called SEF (Search Engine Friendly URL's) that turns complex url's into easy to understand ones.

Google doesn't care now anywhere, so SEO is not SEF.

Joomla SEO is not SEF

  • Keyword Use in Title Tag (4.9)
  • Global Link Popularity of Site (4.5)
  • Anchor Text of Inbound Link (4.4)
  • Link Popularity within the Site's Internal Link Structure (4.1)
  • Age of Site (4)
  • Topical Relevance of Inbound Links to Site (3.9)
  • Link Popularity of Site in Topical Community (3.9)
  • Keyword Use in Body Text (3.9)
  • Global Link Popularity of Linking Site (3.7)
  • Topical Relationship of Linking Page (3.6)

Source:http://www.seomoz.org/article/search-ranking-factors

Concentrate on creating relevant titles for your articles

Create Relevant Article Titles

This will mean your pages have a strong foundation for SEO and will be accessible and usable.

Good Article Titles mean good SEO and usability

Resources

 


One of the challenges of open source is keeping up to date with the more frequent patches and security fixes. Someone on your team will have to know how to do these.

Joomla.org releases patches which are a bunch of files that need to be applied/ftp'ed onto your server.

Major releases come around every year or so with many new features. The current version is 1.5 and 1.6 will be released in the next 12 months.

There are some extensions and services that will keep you site updated for you.

Resources

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Written by TJ Baker

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

This tutorial will explain how to apply a module class suffix in Joomla!. This tutorial depends on the available styles for individual templates. Some settings may be different. See the templates corresponding docmentation for more information.

Go to your Joomla! administration console

 

Go the administration of your website at ww.yourjoomlasite.com/administrator/

Login to your Joomla! administration

 

Enter the username and password you created when installing Joomla!

Go to the Module Manager

 

Navigate to Extensions > Module Manager

Go to the module you want to edit

 

Select the module you want to apply the Module style..

Apply the Module Class Suffix into the parameters to the right

 

Apply the Module Class Suffix. (S1 example shown)

Save the Module Setting

Click Save

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Written by TJ Baker

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Modules are the blocks of content in your site and are distinctively separate from your main content area. For example, a module may appear to the left,right,above, or below your main article content. The Module Manager allows you to customize each module to your preference.

To access the Module Manager in Joomla! 1.0: Navigate to Modules - > Site Modules
To access the Module Manager in Joomla! 1.5: Navigate to Extensions - > Module Manager

Each module in Joomla! has some persistent features. Below are the fields you will see in every module. Modules have more individual parameters but these are the most important ones to understand first.

Note: Some of the terminology is different across Joomla! 1.0 & Joomla! 1.5 but they both have the same functionality.

  • Title
  • Show Title
  • Enabled (1.5) / Published (1.0)
  • Position
  • Module Class Suffix
  • Pages/Items (1.0) / Menu Assignment (1.5)
  • Ordering

Title:

The title of the module is displayed above the module on the frontend. It is also called a "Module Heading". After a module is saved, the module's title is also shown in the Joomla! backend administration.

Show Title:

This setting allows you to specify whether or not the module's title should be visible on the frontend.

Enabled (1.5) / Published (1.0):

Allows you to enable (or publish) the select module. To enable a module only on specific pages see below *Pages/Items (1.0) / Menu Assignment (1.5)

Position:

A module position may be labeled as left, right, bottom, top, etc.
Module positions are defined by the template. If a module is published in a position that is not supported by the template, it will not show up. It is important to be aware of your template's supported module positions. In Joomla! 1.5, only the module positions of the default template are available in the module manager.

Module Class Suffix:

A module class suffix allows you to specify a preset style which is defined by the template. You'll need to consult your individual template documentation to see what module styles/suffixes are available.
(See also: How to apply a Module Class Suffix)

Pages/Items (1.0) / Menu Assignment (1.5):

When a module is enabled/published it can be assigned to all pages or pages specified in the Pages/Items (1.0) / Menu Assignment (1.5) dialog. Modules can only assigned to pages that have menu items.

Ordering:

You can set the order of a module to appear in the ordering dialog as well as the module manager main page by clicking the up/down arrows.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Written by TJ Baker

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Sometimes your template will lose all its styles and images when navigating away from the Frontpage.
This is caused by an incorrect path to the stylesheet due to SEF errors. If you've enabled SEF, make sure your htaccess.txt file is renamed to .htaccess. You may need to temporarily disable SEF. For more information on the correct way to set up SEF in Joomla! 1.5, see the official doc item at joomla.org: SEF URLs in Joomla! 1.5

SEF quick checklist:

  • Make sure htaccess.txt is renamed to .htaccess if SEF is enabled
  • Make sure your server/host supports all requirements
Written by TJ Baker