23 Juli 2010

How to customize the layout of your Joomla website

The layout and content positioning of your Joomla website is defined by the Joomla template you currently use. Below you can see a screenshot that represents the basic items,added by the default Joomla template. You will find a short explanation of each item under the image. This will help you understand better the structure and key concepts of a Joomla website layout and how to change it.


The available positions in Joomla are defined by the template you are using. In this tutorial we will show the positions 1-10 in one of Joomla's default templates which is included in the official installation package. To change the position of a certain module, you can access it from the Extensions -> Module Manager page and then change its "Position" setting. Some of the most commonly used position names are top, user1 to user6, left, right, header, footer, breadcrumb, and newsflash.
  1. In the "top" position of the Joomla website the "Banners" and "Newsflash" modules are placed by default.

    The Banners module allows you to upload images that link to a desired URL. You can define your banners from Components -> Banners and then display the selected items by publishing the "Banners" module from the Extensions -> Module Manager page in your Joomla administrative area.

    The Newsflash module displays a single random article, or a number of articles in a horizontal or vertical configuration. From your Joomla administration area you can select a category of articles that will be displayed by this module.
  2. The "Top menu" module is published into the "user3" position by default. You can easily create and manage menus from the Menus -> Menus Manager page. You can then set your "Top menu" module to display the menu you have just created.
  3. The "Breadcrumbs" module is placed into the "breadcrumb" position. It is a convenient navigation method which displays the current page you are on and the full "path" to it. If you are in a page called "Sample Page" that is under the main menu, the "Breadcrumbs" will display Home -> Sample Page. Using Breadcrumbs is very useful especially when you have multi-level menus.
  4. The "Search" module is published in the "user4" position of the template. It gives your users the option to search within the content of your website.
  5. Several modules are published into the "left" position of the template. In this position you can publish vertical menus, login forms and many other modules depending on your particular needs.
  6. The "Latest News" module is published into the "user1" position of the template. It displays the most recently added articles from the selected category or from all categories. In addition, you can specify the number of displayed articles depending on your preferences.
  7. The "Popular" module is published into the "user2" position of the template. It will display a selected number of articles that are visited the most. You can either select a category from which the articles will be displayed or you can set the module to display the most visited articles in the entire site.
  8. This is the main part of your website. Here are the newest articles you have set to be displayed on the front page.
  9. A "Polls" module is published into the "right" position of the template. You can create the actual polls from the Components -> Polls page in the administrative back-end of your Joomla application. Once you have created your Polls, you can choose which one to be displayed on your website by editing the preferences of the "Polls" module from the "Module manager".
  10. "Banners" and "Footer" modules are displayed in the "footer" position of the template. You can use the "Footer" module to display useful links, your copyright and other useful information at the bottom of your page.