What is the typical template directory structure?

Typical Template Directory Structure

Joomla! CMS templates use a structure of directories and files but they can vary from template to template

• Site templates (templates that change what your website looks like) can be found in the /templates directory. For example, if your template is called mytemplate, it would be placed in the folder:

<path-to-Joomla!>/templates/mytemplate

• Administrator templates (templates that change what the Administrator section of the site looks like) can be found in the /administrator/templates directory. For example, if your administrator template is called myadmintemplate, it would be placed in the folder:

<path-to-Joomla!>/administrator/templates/myadmintemplate

Template Directories

A typical template for Joomla! will include the following directories:

• css - contains all the .css files
• html - contains template override files for core output and module chrome
• images - contains all images used by the template
• language - contains additional language files used by the template

Depending on the complexity and design of the template it may also contain:

• javascript - contains supporting JavaScript used by the template for added functionality

Example structure with files

Typical path of a template is <root>/public_html/domain-name/template/<name of your template> which will contain the following directories and files based on your template.

/css
/html
/images
/javascript
/language
component.php
error.php
favicon.ico
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png 

Template Files

It is most common for a template to have at least the following files:

• index.php

Provides the logic for the display and positioning of modules and components.

• component.php

Provides the logic for the display of the printer friendly page, "E-mail this link to a friend." etc.

• error.php

Provides a method to handle errors such as 404, page not found error.

• favicon.ico

favicon icon file

• template.css

Handles the presentational aspects of the template including specifications for margins, fonts, headings, image borders, list formatting, etc. The .css files may also be located in the /css directory.

• templateDetails.xml

Holds meta-information related to the template and is used by the Installer and the Template Manager.

• template_preview.ext - replace .ext with the extension format of the image (.jpg, .png, .gif)

Generally a 600x400 pixel image shown when the cursor is clicked on the thumbnail image in Template Manager:Templates, not Template Manager:Styles. This gives the Administrator a pop up modal window of the template before applying it to the Site.

• template_thumbnail.ext' - replace .ext with the extension format of the image (.jpg, .png, .gif)

Generally a 200x150 pixel thumbnail image shown when viewing the Template list in Template Manager:Templates, not Template Manager:Styles. This gives the Administrator a thumbnail view of the template before applying it to the Site.