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.