Actions

Difference between revisions of "Understanding Joomla! templates"

From Joomla! Documentation

(Add version tag)
Line 1: Line 1:
 +
{{version|1.5,2.5,3.x}}
 
{{:Where are templates located?|Where are templates located?}}
 
{{:Where are templates located?|Where are templates located?}}
  

Revision as of 03:53, 30 April 2013


<translate>===Typical Template Directory Structure=== </translate> <translate> 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:</translate>
<translate>

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

  • 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:</translate>
<translate>

<path-to-Joomla!>/administrator/templates/myadmintemplate</translate> <translate>====Template directories==== </translate>

<translate> 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</translate>

<translate> Depending on the complexity and design of the template is may also contain:

  • javascript - contains supporting JavaScript used by the template for added functionality</translate>

<translate>====Example structure with files==== </translate> <translate> 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.</translate>

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


<translate>====Template files==== </translate> <translate> 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</translate>

<translate>

  • 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.</translate>

<translate>

  • 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.</translate>

<translate>

  • 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.</translate>



<translate>===Typical Template Directory Structure=== </translate> <translate> 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:</translate>
<translate>

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

  • 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:</translate>
<translate>

<path-to-Joomla!>/administrator/templates/myadmintemplate</translate> <translate>====Template directories==== </translate>

<translate> 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</translate>

<translate> Depending on the complexity and design of the template is may also contain:

  • javascript - contains supporting JavaScript used by the template for added functionality</translate>

<translate>====Example structure with files==== </translate> <translate> 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.</translate>

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


<translate>====Template files==== </translate> <translate> 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</translate>

<translate>

  • 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.</translate>

<translate>

  • 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.</translate>

<translate>

  • 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.</translate>


Copyedit.png
This Article Needs Your Help

This article is tagged because it NEEDS VERSION UPDATE. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.


The templateDetails.xml file holds a variety of meta-data used by the Template Manager in installation and maintenance. It is helpful to recognize the different sections of the file. Typically, each section of data is indented to make the file more readable, but this indentation is not necessary.

Contents

Basic Details

The initial display of the Template Manager shows a list of available templates and basic details relating to the template. Each of these bits of information is gathered from the templateDetails.xml file.

Template details basic.png


<install version="1.5" type="template">
    <name>rhuk_milkyway</name>
    <creationDate>11/20/06</creationDate>
    <author>Andy Miller</author>
    <authorEmail>rhuk@rockettheme.com.com</authorEmail>
    <authorUrl>http://www.rockettheme.com</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL</license>
    <version>1.0.2</version>
    <description>TPL_RHUK_MILKYWAY</description>


File Structure

All files related to the template are listed. Each filename contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.

A small portion of the files listed in the rhuk_milkyway template is given below.

    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>template_thumbnail.png</filename>
        <filename>params.ini</filename>
        <filename>images/arrow.png</filename>
        <filename>images/indent1.png</filename>
    </files>

Optional and highly recommended file structure --


<files>
        <filename>index.php</filename>
        <filename>component.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>template_thumbnail.png</filename>
        <filename>params.ini</filename>
        <folder>images/</folder>
        <folder>css/</folder>
    </files>

Languages

Some templates may include language files to allow translation of static text in the template. Notice that two language files are shown below. The first holds the language file for text that will be viewed by the User. The second, placed within <administration> tags, is for text that will be viewed by the Administrator.


<languages>
        <language tag="en-GB">en-GB.tpl_beez.ini</language>
    </languages>
    <administration>
        <languages folder="admin">
            <language tag="en-GB">en-GB.tpl_beez.ini</language>
        </languages>
    </administration>

Module Positions

The available Module Positions that can be used in the template are defined.

    <positions>
        <position>breadcrumb</position>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>user1</position>
        <position>user2</position>
        <position>user3</position>
        <position>user4</position>
        <position>footer</position>
        <position>debug</position>
        <position>syndicate</position>
    </positions>

Parameters

A template may offer display options that can be chosen by the Administrator in the Template Manager. For instance, the rhuk_milkyway template allows the Administrator to change the border colors, change the background color, and define the display width.

Template details params.png

An example of adding a parameter and its values is shown below.

    <params>
        <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
            <option value="blue">Blue</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="orange">Orange</option>
            <option value="black">Black</option>
            <option value="white">White</option>
        </param>
    </params>

For more information about working with Parameters, see:

Defining a parameter in templateDetails.xml
Retrieving parameter data in a template file


The index.php file is the skeleton of the website. Every page that Joomla! delivers is "index.php" fleshed out with a selection of content inserted from the database.

The index.php file for a template contains a mixture of code that will be delivered as it is, and php code, which will be modified before it is delivered. The code will be familiar to anyone who has designed a simple html webpage: there are 2 main sections - the <head> and <body>. Where index.php differs is the use of php code to insert information selected from a database.

Here is an example:

A tradition HTML head section:

<head>
<title>My Example Webpage</title>
<meta name="title" content="example" />
<link rel="stylesheet" href="www.example.com/css/css.css" type="text/css" />
</head>

And the same thing done the Joomla! way:

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>templates/mytemplate/css/css.css" type="text/css" />
</head>

So, instead of these header parts being defined on the index.php file, the header parts are looked up from the database by bits of php code. The clever part is that both these scripts will deliver the same code to a user. If you look at the code of a joomla website, all the <?php blah /> will have been replaced by regular html code.

Good template design

Index.php should be as bare-boned as you can make it because it will be re-sent every time a new page is loaded. Elements such as styling should be delivered in css files that are saved in the users cache. The tutorials here will go through the technical aspects of creating your index.php.

Why index.php?

Index.htm has historically been the name given to the home page of a website. Thus when a user navigates to www.example.org, the webserver delivers www.example.org/index.htm. Because Joomla! is written in PHP, index.php is the automatically served file. To futher complicate things, when a user navigates to the joomla website, the index.php of the root directory redirects to the index.php of the current default template.