Joomla! 1.5 Template Structure

Developing & Configuring a new customized Joomla Based template for a site

A template provides an interface to withhold overall look & styles of a site. Site components/modules/css styles are all together embedded & displayed in a template.

 

While developing templates for Joomla! sites, following should be a basic folder structure with below mentioned files:

• css
  
• images
  
• javascript
  

CSS


In the css directory there are several .css files. Please note the names of each file and the order it is listed.


This is what should be contained within each file:

template_joomla.css: These are the default styles for Joomla and its components. It has been stripped down to prevent most of the other styles from overlapping.

template_global.css: These are the styles for the whole site. This should include the header, body or main content area, left and/or right columns, and the footer. Menu containers should be listed in this CSS, but the actual menu styles will be contained in a different CSS. Other tags that should be listed in this style sheet are: H tags, p tags, ul, ol, and li tags, and main a and a:hover tags.

template_menu.css: These are the styles for all the menus. Please keep them separated by comment tags listing which menu they belong to, this is handy when we are working with a site that has many menus and submenus.

template_pages.css: These are the styles that are specific to a certain page. For example if there is a table set up for a contact us page, you would add the styles specific to that page in this stylesheet. Please indicate which page(s) a group of styles belongs to with comment tags.

Images


The images folder should contain all images called out in the above stylesheets and that are listed within the template.xml file.


Javascript


All .js files that are used on the index.php file should be kept in this folder. This includes the file for the menu dropdowns.




Other Files


index.php: The index.php used for layout of the website. This is your actual template file. This contains the Joomla code for the position locations, the main layout divs, and the usual items found in a .dwt file or other template file.


template.xml: This file contains all files, images and positions that are included in the template zip file uploaded to Joomla. If you want the file or position to show up properly in Joomla, it must be listed in this file.


favicon.ico: This is a unique part of the logo that is used for the website favicon.


READ-ME.txt: This file contains notes about the template. You can add to this file if needed, but it does not need to be included in the template, or the template.xml.

Notes:

1) The css files & HTML template files should be properly validated using the below mentioned tools, this would ensure to keep rate of browser compatibility issues to minimum level & also would make our template W3C compliant:
For HTLM Validation: http://validator.w3.org/

For CSS Validation: http://jigsaw.w3.org/css-validator/
2) Template should display identical output on all major browsers such as – IE (6,7,8); Mozilla Firefox (2,3)[Windows/Mac]; Safari[Windows/Mac], Chrome etc.
3) IE 6 specific browser related issues such as PNG transparency issue & extra margin, spacing issue must be fixed.
4) Please use a standard web images format such as gif/jpg/png.
5) HTML templates for the site's should most preferably be developed using table-less design structure i.e by using CSS-based layouts instead on table-based layouts.

JavaScript Error Handling

JavaScript allows developers to deal with error handling with the help of following two constructs:

1. try/catch block
2. onError event

Basically developers need to use error handling concept in code structure simply because end users of your application may get confused or may be irritated to see alert boxes with errors and in such case user often leave the Web page. And so error handling plays a vital role in such scenarios.

Now we will learn about constructs of error handling in JavaScript mentioned above.

try/catch block:

--

Syntax:

try {

//Executable script

}

catch (errorObject) {

//Error handler

}

finally {

//Code to execute all the time,irrespective of error occurrence.

}

--

The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs. Whenever an error occurs while processing code present in try block, it will hand it over to catch block for executing the code present in it.

onError event:

--

Syntax:

window.onerror=function(){

//code to run when error has occured on page

}

--

'onerror' event is fired at the moment JavaScript error occurs in a script. So as a habit of good conduct it is always advisable to place code 'onerror' event at the top of the page so that all JavaScript errors can be successfully intercepted.