Actions

Difference between revisions of "What is the typical template directory structure?"

From Joomla! Documentation

 
(17 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
===Typical Template Directory Structure===
 
===Typical Template Directory Structure===
It is most common for a template to have at least four files:
+
Joomla! CMS templates use a structure of directories and files but they can vary from template to template
* index.php
+
*'''Site''' templates (templates that change what your website looks like) can be found in the <code>/template</code> directory. For example, if your template is called "mytemplate", then it would be placed in the folder:
 +
:<code><path-to-Joomla!>/templates/mytemplate</code>
 +
*'''Administrator''' templates (templates that change what the administrator section of the site looks like) can be found in the <code>/administrator/templates</code> directory. For example, if your administrator template is called "myadmintemplate", then it would be placed in the folder:
 +
:<code><path-to-Joomla!>/administrator/templates/myadmintemplate</code>
 +
====Template directories====
 +
{{:Typical template directory structure}}
 +
 
 +
====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.
 
: Provides the logic for the display and positioning of modules and components.
* template.css
+
* '''component.php'''
: Handles the presentational aspects of the template including specifications for margins, fonts, headings, image borders, list formatting, etc.
+
: Provides the logic for the display of the printer friendly page, "E-mail this link to a friend." etc.
* templateDetails.xml
+
* '''error.php'''
: Holds meta-information related to the template and used by the Installer and the Template Manager.
+
: Provides a method to handle errors such as 404, page not found error.
* template_thumbnail.ext - replace .ext with the extension format of the image (.jpg, .png, .gif)
+
* '''favicon.ico'''
: Generally a 200x150 pixel image that is shown when the cursor is held over the template name in the Template Manager.  This gives the Administrator a snapshot view of the template before applying it to the Site.
+
: 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 <code>/css</code> directory.
{{:Typical template directory structure}}
+
* '''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 that is 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 that is 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.
  
<noinclude>[[Category:Templates]][[Category:Definition lists]][[Category:Beginners]]</noinclude>
+
<noinclude>
 +
[[Category:Template Development FAQ]]
 +
[[Category:Template Development]]
 +
[[Category:Template Reference]]
 +
[[Category:Template Management]]
 +
</noinclude>

Latest revision as of 20:38, 23 June 2013

Contents

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 /template directory. For example, if your template is called "mytemplate", then 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", then 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 is 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 that is 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 that is 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.