Designing a Joomla template
From Wikipractice
erelttr
Work in progress: This article is being reviewed
Contents |
Introduction
Joomla is a CMS derived from the Mambo project. It allows to quickly put in place a very professional web site which contain a lot of interesting feature like user registration process, publication of articles, e-commerce, etc. Joomla and Mambo have been written in PHP.
The look of a Joomla or Mamnbo web site can be completely customized. The purpose of this article is to give users an overview on the way to design a template. It is at the moment focused on Joomla. Usually, the design of a web site is split into:
- The graphical part
- The process
- The code
This article will be focused on the code part on Joomla, in order to explain what is which module, how to insert them in a template and how the CSS is linked to it.
Concepts
A Joomla (Mambo) template is made of different regions, created by the template designer, in which we will ask Joomla to load information. The common regions are:
- Menu bar
- Site name
- Header
- Path way
- Advertisement
- Search region
- News Flash region
- Left bar
- Right bar
- Main body
- Footer
It is not necessary to define all these regions: some web sites might need only part of them.
If you need more information on designing web sites, the following is a very good reference:
The Design of Sites: Patterns for Creating Winning Web Sites (2nd Edition)
Menu bar
The menu bar is usually located at the top left of your site. It allow to navigate through the top level categories of your web site. The menu bar is a module inserted by mosLoadModules.
Example
<?php mosLoadModules('left',-2);?>
Site name
The sitename is configured when you install Joomla. However, is is possible to chante it afterwad in the management interface.
To insert the site name in your template, insert the following code where you would like it to be displayed:
<?php echo $mosConfig_sitename; ?>
Header
Path way
The path way is usually a small bar telling your users where you are in the web site. To display the pathway include the following function where you want it to be displayed:
<?php mospathway() ?>
Advertisement
If your site generates enought traffic, you might envisage to rent advertisement space on it. An advertisement banner is a landsacape image in .GIF, .JPG or .PNG format (sometime Flash .SWF). The image has an underlying link so when an user click on it, it will be forwarded to the advertiser site.
The Joomla banner can display defacto stanbdard banner of 468 x 60 pixels.
In fact, a banner is not a space of the template: it is managed by a module called Banners which is configured to be loaded in the banner section of the template when Joomla is installed.
Search region
News Flash region
Newsflash is used to display
Left bar
Right bar
Main body
The main body of your template is where you would like the articles and applications to be displayed. The main body information are inserted through the following php code:
<?php mosMainBody(); ?>
Footer
The footor contains just a few information like copyright, contact name. You insert it automaticall with the following code:
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?>
mosLoadModules
The function mosLoadModules(position,style) is used to load modules in a region of the template. Each region has a name and an orientation described by position and style. The different values are described in the following tables.
Position
Table below lists position or region description as well as their common usage, but the usage is not mandatory. However, it seems that they become a de-facto standard defined by the default templates available with Joomla distribution.
| Position value | Description | Usually used for |
| top | top module | displaying newsflash |
| left | left menu | navigation menu |
| right | right menu | additional information like advertisement, who is online, etc. |
| user1 | Last news | |
| user2 | Popular | |
| user3 | top menu | |
| user4 | search | |
| banner |
Style
Table below show the different type parameters.
| Value | Effect | Example |
| 0 | default | |
| 1 | horizontal display | Horizontal top menu |
| -1 | raw | |
| -2 | css format | |
| -3 | Strechable format |
Formatting
The Joomla template is used, by default, on every page of the Joomla managed web site. However, there are two main possibilities to adapt the format to the context, meaning to change it depending on the page you are on:
- Loading modules according to the contexts (mainly according to the right of the uiser)
- Using different templates depending on the page your visitor is on.
CSS
The global formatting of each elements of a page is defined in CSS file.
Book reference
- Building Websites with Joomla!
- Beginning Joomla!: From Novice to Professional (Beginning: from Novice to Professional)
