Difference between revisions of "What is the typical template directory structure?"
From Joomla! Documentation
m (added Category:Template Development using HotCat) |
(Marked this version for translation) |
||
(12 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | ===Typical Template Directory Structure=== | + | <noinclude><languages /></noinclude> |
− | ====Template directories==== | + | <translate>===Typical Template Directory Structure=== <!--T:1--></translate> |
− | {{:Typical template directory structure}} | + | <translate><!--T:2--> |
+ | 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 <code>/templates</code> directory. For example, if your template is called "mytemplate", then it would be placed in the folder:</translate> | ||
+ | :<translate><!--T:11--> | ||
+ | <code><path-to-Joomla!>/templates/mytemplate</code></translate> | ||
+ | <translate><!--T:3--> | ||
+ | *'''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:</translate> | ||
+ | :<translate><!--T:12--> | ||
+ | <code><path-to-Joomla!>/administrator/templates/myadmintemplate</code></translate> | ||
+ | <translate>====Template directories==== <!--T:4--></translate> | ||
+ | {{:Typical template directory structure/<translate><!--T:13--> | ||
+ | en</translate>}} | ||
− | ====Template files==== | + | <translate>====Template files==== <!--T:5--></translate> |
+ | <translate><!--T:6--> | ||
It is most common for a template to have at least the following files: | It is most common for a template to have at least the following files: | ||
* '''index.php''' | * '''index.php''' | ||
Line 12: | Line 24: | ||
: Provides a method to handle errors such as 404, page not found error. | : Provides a method to handle errors such as 404, page not found error. | ||
* '''favicon.ico''' | * '''favicon.ico''' | ||
− | : favicon icon file | + | : favicon icon file</translate> |
+ | <translate><!--T:7--> | ||
* '''template.css''' | * '''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. | + | : 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.</translate> |
+ | <translate><!--T:8--> | ||
* '''templateDetails.xml''' | * '''templateDetails.xml''' | ||
: Holds meta-information related to the template and is used by the Installer and the Template Manager. | : 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) | * '''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. | + | : 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.</translate> |
+ | <translate><!--T:9--> | ||
* '''template_thumbnail.ext''' - replace .ext with the extension format of the image (.jpg, .png, .gif) | * '''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. | + | : 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.</translate> |
− | <noinclude> | + | <noinclude> |
− | + | <translate><!--T:10--> | |
[[Category:Template Development FAQ]] | [[Category:Template Development FAQ]] | ||
[[Category:Template Development]] | [[Category:Template Development]] | ||
+ | [[Category:Template Reference]] | ||
+ | [[Category:Template Management]]</translate> | ||
</noinclude> | </noinclude> |
Revision as of 16:01, 2 November 2014
Typical Template Directory Structure[edit]
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", 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[edit]
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[edit]
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[edit]
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.