Creating a Joomla Template by Standards - Part 1

In the spring of 2008, a good cycle of articles on creating a “clean” template for Joomla 1.5 was published in the Compass Designs blog (in this case, a “clean” is a template designed according to modern standards, that is, without using tables and with proper use of cascading tables styles). The first two parts of the cycle mainly contain general explanations of terminology, tips on organizing development on a local host, etc., so I decided to publish translations of only the main 4 articles, which actually contain a small guide to creating a template. So, today is the first part, containing basic information about building Joomla templates.

Creating a simple empty template

In order to understand what the template consists of, we will start by looking at the empty Joomla template.

Template files

Joomla template contains some set of files and directories. Templates must be placed in the / templates / directory of the Joomla distribution installed, each in its own subdirectory. That is, if we have two templates installed, then the / template / directory looks like this:
')

 / templates / element
 / templates / voodoo

Note that the directory name for the template must match the name of this template, as in this case “element” and “voodoo”. As a rule, names are case-sensitive and should not contain spaces. Inside the template directory are two key files:

 /element/templateDetails.xml
 /element/index.php

The names of these files and their location must be exactly the same, since that is how they are called by the Joomla core.

The first one is the XML file of the template.

templateDetails.xml

This is an XML-formatted meta-data file that tells Joomla what other files, including image files, are needed to display the page that uses this template. Pay attention to the letter “D” in upper case. He also contains information about the author and copyright. Finally, it is used when installing the template in the administrative interface.

The second file is the main template engine:

index.php

This file is the most important. It determines the visual location of the site elements and tells Joomla CMS where to place the various components and modules. This file is a combination of PHP and (X) HTML.

Almost all templates use additional files. It is generally accepted (although it is not a requirement of the kernel) to name and place these files as follows:

 /element/template_thumbnail.png
 /element/css/template.css
 /element/images/logo.png

These are just examples. Below is a description of each file:

/element/template_thumbnail.png

Screenshot of the template (usually reduced to 140 pixels wide and 90 pixels high). After installing the template, this screenshot can be seen using the “Preview Image” function in the “Template Manager” section of the administrative interface, as well as in the design template selection module in the public section (if this module is enabled).

/element/css/template.css

Style sheet template. The directory name is set arbitrarily, but you must specify the path to this file in index.php. The file name can also be any. Usually, the above mentioned file name is used, but below you will see that there are some advantages to using additional CSS files.

/element/images/logo.png

Any images included in the template. Again, for organizational reasons, most developers place them in the images directory. We specified a picture with the name logo.png as an example.

templateDetails.xml

templateDetails.xml should contain a list of all files contained in the template. It also includes information about the author and copyright. Some of this information can be seen in the template manager in the Joomla admin interface. The following is an example XML file:

 <? xml version = "1.0" encoding = "utf-8"?>
 <install version = "1.5" type = "template">      
 <name> TemplateTutorial15 </ name>      
 <creationDate> August 2007 </ creationDate>      
 <author> Barrie North </ author>      
 <copyright> GPL </ copyright>      
 <authorEmail> compassdesigns@gmail.comThis e-mail address is being protected from spambots, you need JavaScript enabled to view it </ authorEmail>      
 <authorUrl> www.compassdesigns.net </ authorUrl>      
 <version> 1.0 </ version>      
 <description> The example of the Joomla Book </ description>      
 <files>            
 <filename> index.php </ filename>            
 <filename> templateDetails.xml </ filename>            
 <filename> js / somejsfile.js </ filename>            
 <filename> images / threecol-l.gif </ filename>            
 <filename> images / threecol-r.gif </ filename>            
 <css / customize.css </ filename>            
 <filename> css / layout.css </ filename>            
 <css / template_css.css </ filename>       
 </ files>      
 <positions>            
 <position> user1 </ position>            
 <position> top </ position>            
 <position> left </ position>             
 <position> banner </ position>            
 <position> right </ position>            
 <position> footer </ position>      
 </ positions>         
 <params>            
 <param name = "colorVariation" type = "list" default = "white" label = "Color Variation" description = "Color change to use">                  
 <option value = "blue"> Blue </ option>                  
 <option value = "red"> Red </ option>            
 </ param>         
 </ params>
 </ install>

Let us explain the individual lines:

  <install version = "1.5" type = "template"> 

The contents of the XML document are the instructions for the installer in the Joomla admin interface. Option type = "template" informs the installer that we are installing a template designed for Joomla version 1.5.

  <name> TemplateTutorial15 </ name> 

Specifies the name of the template. This name will also be used when creating a template subdirectory in the templates directory. If you install the template manually, you must create a subdirectory with the name identical to the template name.

  <creationDate> August 2007 </ creationDate> 

Date the template was created. This field is in free format and can be any string of the type “May 2005”, “08-June-1978”, “01/01/2004”, etc.

  <author> Barrie North </ author> 

The name of the author of the template (probably your name).

  <copyright> GPL </ copyright> 

Copyright information. A licensing guide for developers and designers can be found in the Joomla forums.

  <authorEmail> author@somedomain.com </ authorEmail> 

E-mail to contact the author of the template.

  <authorUrl> www.compassdesigns.net </ authorUrl> 

Website address of the author.

  <version> 1.0 </ version> 

Version of the template.

  <files> </ files> 

Different files used in the template.

The files used in the template are enclosed in <filename> tags:

 <files>
 <filename> index.php </ filename>
 <filename> templateDetails.xml </ filename>
 <filename> js / somejsfile.js </ filename>
 <filename> images / threecol-l.gif </ filename>
 <filename> images / threecol-r.gif </ filename>
 <css / customize.css </ filename>
 <filename> css / layout.css </ filename>
 <css / template_css.css </ filename>
 </ files>

The “files” section contains all main files of the type of PHP scripts or images for the template preview. Each file is listed in this section under the <filename> and </ filename> tags. Additional files are also indicated here, for example JavaScript files used in the template.

The image files used in the template are also listed in the "files" section. Again, each file is enclosed in <filename> and </ filename> tags. File paths are relative to the root directory of the template. For example, if the template is located in the 'YourTemplate' directory, and all the pictures are in the 'images' subdirectory, then the correct path to the file will be:

  <filename> images / my_image.jpg </ filename> 

Finally, the files section lists all the style files used in the template. Again, the file name is in the <filename> and </ filename> tags, and the file path is relative to the root folder of the template.

  <positions> </ positions> 

The module positions used in the template.

  <params> </ params> 

Describes the parameters that can be set for various functions of the template, for example, to change its color.

Continuation of part 1 here: mancocapac.habrahabr.ru/blog/41215

The original article in English can be read here:
www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=2