Actions

Difference between revisions of "What is the purpose of the templateDetails.xml file?"

From Joomla! Documentation

m (xml tags, works well so far)
m (wrong redirectered page linked)
 
(65 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{RightTOC}}
+
<noinclude><languages /></noinclude>
The templateDetails.xml file holds a variety of meta-data used by the [[Screen.templates.15|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.
+
  
===Basic Details===
+
<translate>
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.
+
<!--T:1-->
 +
The <code>templateDetails.xml</code> file is required for Joomla! templates and it can be found in the root template directory of any template inside the Joomla! templates directory. This XML file holds the basic meta-data that Joomla! needs in order to display and provide it as template option in the backend. It also contains a variety of other meta-data that is used to provide information about the template and the template authors and define files and folders that are used by the template. It also defines template language files, as well as parameters and settings the template will offer in the backend.
 +
</translate>
  
[[Image:template_details_basic.png]]
+
<translate>
 +
<!--T:2-->
 +
The <code>templateDetails.xml</code> file uses a fairly basic XML format and structure. The XML data in this file is separated into sections and specifically formatted in to render the various pieces and parameters. The XML data is read and parsed by powerful tools in the Joomla! core, then rendered to register the template and create the display seen in the Template Manager. This provides template developers a relatively simple method for creating assignments, settings and parameters for use in the template.
 +
</translate>
  
 +
<translate>
 +
<!--T:3-->
 +
The implementation of <code>templateDetails.xml</code> will vary from template to template, it can be simple or complex depending on what features the template offers. The default Joomla! 3 Protostar template serves as an excellent example to demonstrate how this file is used. The various sections of this file are explained below.
 +
</translate>
 +
 +
<translate>
 +
===XML Format=== <!--T:4-->
 +
The top two lines of every <code>templateDetails.xml</code> file need to start with defining the XML format and doctype.
 +
</translate>
  
 
<source lang="xml">
 
<source lang="xml">
<install version="1.5" type="template">
+
<?xml version="1.0" encoding="utf-8"?>
    <name>rhuk_milkyway</name>
+
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
    <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>
+
 
</source>
 
</source>
  
 +
<translate>
 +
<!--T:5-->
 +
The next line is also required as it tells Joomla! that the data in this file is to be used for an extension, in this case a template. All template data is contained within this <code><extension></code> tag, and the file concludes by closing this tag <code></extension></code>.
 +
</translate>
  
===File Structure===
+
<source lang="xml">
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.
+
<extension version="3.1" type="template" client="site">
 +
</source>
 +
 
 +
<translate>
 +
===Basic Details=== <!--T:6-->
 +
The first section is generally where template developers include information about the template. Information such as names, dates, contact information, copyrights, version number and a basic description are common. This data is used in the Template Manager and is shown in the list of available templates and can be displayed in the template editing screens as well.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:7-->
 +
'''Template Basic Details as seen in Template Manager > Templates'''
 +
</translate>
 +
 
 +
[[File:J3 template details-<translate><!--T:8-->
 +
en</translate>.jpg|500px|thumbnail|none|<translate><!--T:9-->
 +
Template Details example</translate>]]
  
A small portion of the files listed in the rhuk_milkyway template is given below.
+
<translate>
 +
<!--T:10-->
 +
'''Protostar XML code for basic details:'''
 +
</translate>
  
 
<source lang="xml">
 
<source lang="xml">
    <files>
+
<extension version="3.1" type="template" client="site">
<filename>index.php</filename>
+
<name>protostar</name>
<filename>templateDetails.xml</filename>
+
<version>1.0</version>
<filename>template_thumbnail.png</filename>
+
<creationDate>4/30/2012</creationDate>
<filename>params.ini</filename>
+
<author>Kyle Ledbetter</author>
<filename>images/arrow.png</filename>
+
<authorEmail>admin@joomla.org</authorEmail>
<filename>images/indent1.png</filename>
+
<copyright>Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.</copyright>
    </files>
+
<description>TPL_PROTOSTAR_XML_DESCRIPTION</description>
 
</source>
 
</source>
  
Optional and highly recommended file structure --
+
<translate>
 +
<!--T:11-->
 +
You may notice that the final line of this code, the description, contains a language string and not the actual description. This string references a language file in the template where the actual description is defined and written. This is a preferred method in Joomla! for extensions that are distributed for public use to accommodate international language support, however one could simply type the description if translation is not a concern. The language files are also defined in the <code>templateDetails.xml</code> file, in the language section, which is covered in more detail later in this article.
 +
</translate>
  
 +
<translate>
 +
<!--T:12-->
 +
'''Template Description seen in Protostar Editor'''
 +
</translate>
 +
[[Image:J3_protostar_editor_details-<translate><!--T:13-->
 +
en</translate>.jpg|500px|thumbnail|none|<translate><!--T:14-->
 +
Template Details example</translate>]]
 +
 +
<translate>
 +
===Folder Structure=== <!--T:15-->
 +
All Folders related to the template installation are listed here. All files and folders located in the root of the template directory during installation need to be listed here. Any files contained inside a folder that is listed are automatically included. Each folder contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.
 +
</translate>
 +
 +
<translate>
 +
<!--T:16-->
 +
Below is the file and folder structure from the default Protostar template. This is a fairly standard file structure for a basic Joomla! template.
 +
</translate>
  
 
<source lang="xml">
 
<source lang="xml">
<files>
+
<files>
<filename>index.php</filename>
+
<filename>component.php</filename>
<filename>component.php</filename>
+
<filename>error.php</filename>
<filename>templateDetails.xml</filename>
+
<filename>favicon.ico</filename>
<filename>template_thumbnail.png</filename>
+
<filename>index.php</filename>
<filename>params.ini</filename>
+
<filename>templateDetails.xml</filename>
<folder>images/</folder>
+
<filename>template_preview.png</filename>
        <folder>css/</folder>
+
<filename>template_thumbnail.png</filename>
    </files>
+
<folder>css</folder>
 +
<folder>html</folder>
 +
<folder>images</folder>
 +
<folder>img</folder>
 +
<folder>js</folder>
 +
<folder>language</folder>
 +
<folder>less</folder>
 +
</files>
 
</source>
 
</source>
  
===Languages===
+
<translate>
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.
+
<!--T:17-->
 +
'''File directory view of J3 Protostar'''
 +
</translate>
  
 +
[[Image:J3_protostar_file_structure_<translate><!--T:18-->
 +
en</translate>.jpg|500px|thumbnail|none]]
 +
 +
<translate>
 +
===Module Positions=== <!--T:19-->
 +
The available [[S:MyLanguage/Module Position|Module Positions]] that can be used in the template are defined in this area.
 +
</translate>
 +
 +
<translate>
 +
<!--T:20-->
 +
These are the module positions defined in the default Protostar template:
 +
</translate>
  
 
<source lang="xml">
 
<source lang="xml">
<languages>
+
<positions>
<language tag="en-GB">en-GB.tpl_beez.ini</language>
+
<position>banner</position>
    </languages>
+
<position>debug</position>
    <administration>
+
<position>position-0</position>
<languages folder="admin">
+
<position>position-1</position>
    <language tag="en-GB">en-GB.tpl_beez.ini</language>
+
<position>position-2</position>
</languages>
+
<position>position-3</position>
    </administration>
+
<position>position-4</position>
 +
<position>position-5</position>
 +
<position>position-6</position>
 +
<position>position-7</position>
 +
<position>position-8</position>
 +
<position>position-9</position>
 +
<position>position-10</position>
 +
<position>position-11</position>
 +
<position>position-12</position>
 +
<position>position-13</position>
 +
<position>position-14</position>
 +
<position>footer</position>
 +
</positions>
 
</source>
 
</source>
  
===Module Positions===
+
<translate>
The available [[module_positions|Module Positions]] that can be used in the template are defined.
+
<!--T:21-->
 +
The list of positions are contained within the <code><positions></code> tag. Each <code><position></code> tag creates a module position that is available from the position list in the module manager and in other areas of Joomla! where module positions can be selected.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:22-->
 +
The simple format of the position list means it can be easily customized. For example, to add a new module position to the list, simply add a new <code><position></code> tag inside the <code><positions></code> tag with a unique name using all lowercase letters with no spaces. Keep in mind, this only adds the position to the backend and additional development in other template files is required to render the new position on the front end.
 +
</translate>
 +
 
 +
<translate>
 +
===Languages=== <!--T:23-->
 +
Some templates may include language files to allow translation of static text in the template.  Notice that the language folder is defined and the two language files inside are also included. Even though the language folder was defined earlier, these files need their own definitions. This method tells Joomla! where the language files that contain strings used by the template reside.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:24-->
 +
The first file holds the language file for text that will be viewed by the User.  The second file, with the <code>.sys</code>, or system, extension is for text that will be viewed in the Administrator area.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:25-->
 +
This is the language folder and file structure from the default Protostar template:
 +
</translate>
  
 
<source lang="xml">
 
<source lang="xml">
    <positions>
+
<languages folder="language">
<position>breadcrumb</position>
+
<language tag="en-GB">en-GB/en-GB.tpl_protostar.ini</language>
<position>left</position>
+
<language tag="en-GB">en-GB/en-GB.tpl_protostar.sys.ini</language>
<position>right</position>
+
</languages>
<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>
+
 
</source>
 
</source>
  
===Parameters===
+
<translate>
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.
+
<!--T:26-->
 +
Language strings are used in templates and throughout Joomla! for the purpose of utilizing the extensive international language support features in Joomla!. This method provides developers and users with a relatively simple method to translate any text that is used in templates and extension screens. Joomla! will check the language files for any language strings that are used and load the corresponding text in the language chosen by the user in place of the string. In this instance, there are only files for English (en-GB), any text translations in other languages must be provided by Users or Developers before they can be used by Joomla!.
 +
</translate>
  
[[Image:template_details_params.png]]
+
<translate>
 +
<!--T:27-->
 +
'''More information about Language Files:'''
  
An example of adding a parameter and its values is shown below.
+
<!--T:28-->
 +
*[[S:MyLanguage/Creating_a_language_definition_file|Creating a Language Definition File]]
 +
*[[S:MyLanguage/Loading_extra_language_files|Loading extra language files]]
 +
</translate>
 +
 
 +
<translate>
 +
===Parameters=== <!--T:29-->
 +
</translate>
 +
 
 +
[[File:J3 protostar advanced parameters-<translate><!--T:30-->
 +
en</translate>.jpg|thumb|right|<translate><!--T:31-->
 +
Protostar Advanced Parameters Screen</translate>]]
 +
 
 +
<translate>
 +
<!--T:32-->
 +
A template may offer display options and other parameters that can be chosen by the Administrator in the Template Manager.  For instance, the default Prototype template allows the Administrator to change various colors, fonts and add a logo, these parameters are found under the Advanced tab, which is also defined and created by the XML parameters.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:33-->
 +
Template parameters are contained inside a <code><config></code> tag, which contains a <code><fields></code> tag with a '''name attribute''' of "params". Inside the <code><fields></code> tag is where the parameter groups and individual parameters are defined. The <code><fieldset></code> tag is used to create groups of parameters. Individual parameters are defined with the <code><field></code> tag.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:34-->
 +
Each <code><fieldset></code>, and each <code><field></code> parameter within a <code><fieldset></code>, require a unique name defined by the '''name attribute'''. This name defines the parameter itself and is used to pass settings to the front end files. Each parameter should also contain a '''label attribute''' and '''description attribute'''. The label text appears with the parameter in the settings screen to identify what the setting is used for and more detailed information can be included in the description.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:35-->
 +
A parameter field can be virtually any type of form input with corresponding options, this is selected by the '''type attribute'''. Any necessary options, such as radio button or select choices, are defined in <code><option></code> tags. CSS class names can be defined with the '''class attribute'''. and a default parameter setting can be defined using the '''default attribute'''.
 +
</translate>
 +
 
 +
<translate>
 +
<!--T:36-->
 +
Below are the parameter definitions in the default Prototype Template. In this example, all Labels, Descriptions and Options are using language string definitions from the Language files defined in the previous section, as well as some from the Joomla! core, so they can be translated into different languages as necessary.
 +
</translate>
  
 
<source lang="xml">
 
<source lang="xml">
    <params>
+
<config>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
+
<fields name="params">
    <option value="blue">Blue</option>
+
<fieldset name="advanced">
    <option value="red">Red</option>
+
<field name="templateColor" class="" type="color" default="#08C"
    <option value="green">Green</option>
+
label="TPL_PROTOSTAR_COLOR_LABEL"
    <option value="orange">Orange</option>
+
description="TPL_PROTOSTAR_COLOR_DESC" />
    <option value="black">Black</option>
+
 
    <option value="white">White</option>
+
<field name="templateBackgroundColor" class="" type="color" default="#F4F6F7"
</param>
+
label="TPL_PROTOSTAR_BACKGROUND_COLOR_LABEL"
    </params>
+
description="TPL_PROTOSTAR_BACKGROUND_COLOR_DESC" />
 +
 
 +
<field name="logoFile" class="" type="media" default=""
 +
label="TPL_PROTOSTAR_LOGO_LABEL"
 +
description="TPL_PROTOSTAR_LOGO_DESC" />
 +
 +
<field name="sitetitle" type="text" default=""
 +
label="JGLOBAL_TITLE"
 +
description="JFIELD_ALT_PAGE_TITLE_LABEL"
 +
filter="string" />
 +
 
 +
<field name="sitedescription"  type="text" default=""
 +
label="JGLOBAL_DESCRIPTION"
 +
description="JGLOBAL_SUBHEADING_DESC"
 +
filter="string" />
 +
 
 +
<field name="googleFont"
 +
type="radio"
 +
class="btn-group btn-group-yesno"
 +
default="1"
 +
label="TPL_PROTOSTAR_FONT_LABEL"
 +
description="TPL_PROTOSTAR_FONT_DESC"
 +
>
 +
<option value="1">JYES</option>
 +
<option value="0">JNO</option>
 +
</field>
 +
 
 +
<field name="googleFontName" class="" type="text" default="Open+Sans"
 +
label="TPL_PROTOSTAR_FONT_NAME_LABEL"
 +
description="TPL_PROTOSTAR_FONT_NAME_DESC" />
 +
 
 +
<field name="fluidContainer"
 +
type="radio"
 +
class="btn-group btn-group-yesno"
 +
default="0"
 +
label="TPL_PROTOSTAR_FLUID_LABEL"
 +
description="TPL_PROTOSTAR_FLUID_DESC"
 +
>
 +
<option value="1">TPL_PROTOSTAR_FLUID</option>
 +
<option value="0">TPL_PROTOSTAR_STATIC</option>
 +
</field>
 +
</fieldset>
 +
</fields>
 +
</config>
 
</source>
 
</source>
  
For more information about working with Parameters, see:
+
<translate>
 +
<!--T:37-->
 +
The Protostar template illustrates a few different ways that XML can be used in a template interface, but there are many more possibilities. In this example, the <code><fieldset name="advanced"></code> tag encloses all of the parameters and it uses the '''name attribute''' to create the "Advanced" tab in the interface. All that is necessary to create another tab in the interface is another <code><fieldset></code> tag with a different '''name attribute'''. With this in mind, it is relatively simple to create as many additional tabs and parameters as necessary in a template.
 +
</translate>
  
: [[Defining a parameter in templateDetails.xml]]
+
<translate>
: [[Retrieving parameter data in a template file]]
+
===Additional Resources=== <!--T:38-->
 +
*[[S:MyLanguage/Creating_a_basic_Joomla!_template|More information about Creating a Joomla! Template]]
 +
*[[S:MyLanguage/Creating_a_language_definition_file|Creating a Language Definition File]]
 +
*[[S:MyLanguage/Loading_extra_language_files|Loading extra language files]]
 +
*[[S:MyLanguage/Defining_a_parameter_in_templateDetails.xml|Defining a parameter in templateDetails.xml]]
 +
</translate>
  
<noinclude>[[Category:Templates]][[Category:Topics]][[Category:Beginners]]
+
<translate>
[[Category:Parameters]]
+
<!--T:39-->
[[Category:Template FAQ]]
+
[[Category:Template Development]]
</noinclude>
+
[[Category:Template Development FAQ]]
 +
</translate>

Latest revision as of 10:55, 1 February 2015

Other languages:
English • ‎français • ‎Nederlands

The templateDetails.xml file is required for Joomla! templates and it can be found in the root template directory of any template inside the Joomla! templates directory. This XML file holds the basic meta-data that Joomla! needs in order to display and provide it as template option in the backend. It also contains a variety of other meta-data that is used to provide information about the template and the template authors and define files and folders that are used by the template. It also defines template language files, as well as parameters and settings the template will offer in the backend.

The templateDetails.xml file uses a fairly basic XML format and structure. The XML data in this file is separated into sections and specifically formatted in to render the various pieces and parameters. The XML data is read and parsed by powerful tools in the Joomla! core, then rendered to register the template and create the display seen in the Template Manager. This provides template developers a relatively simple method for creating assignments, settings and parameters for use in the template.

The implementation of templateDetails.xml will vary from template to template, it can be simple or complex depending on what features the template offers. The default Joomla! 3 Protostar template serves as an excellent example to demonstrate how this file is used. The various sections of this file are explained below.

XML Format

The top two lines of every templateDetails.xml file need to start with defining the XML format and doctype.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">

The next line is also required as it tells Joomla! that the data in this file is to be used for an extension, in this case a template. All template data is contained within this <extension> tag, and the file concludes by closing this tag </extension>.

<extension version="3.1" type="template" client="site">

Basic Details

The first section is generally where template developers include information about the template. Information such as names, dates, contact information, copyrights, version number and a basic description are common. This data is used in the Template Manager and is shown in the list of available templates and can be displayed in the template editing screens as well.

Template Basic Details as seen in Template Manager > Templates

Template Details example

Protostar XML code for basic details:

<extension version="3.1" type="template" client="site">
	<name>protostar</name>
	<version>1.0</version>
	<creationDate>4/30/2012</creationDate>
	<author>Kyle Ledbetter</author>
	<authorEmail>admin@joomla.org</authorEmail>
	<copyright>Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.</copyright>
	<description>TPL_PROTOSTAR_XML_DESCRIPTION</description>

You may notice that the final line of this code, the description, contains a language string and not the actual description. This string references a language file in the template where the actual description is defined and written. This is a preferred method in Joomla! for extensions that are distributed for public use to accommodate international language support, however one could simply type the description if translation is not a concern. The language files are also defined in the templateDetails.xml file, in the language section, which is covered in more detail later in this article.

Template Description seen in Protostar Editor

Template Details example

Folder Structure

All Folders related to the template installation are listed here. All files and folders located in the root of the template directory during installation need to be listed here. Any files contained inside a folder that is listed are automatically included. Each folder contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.

Below is the file and folder structure from the default Protostar template. This is a fairly standard file structure for a basic Joomla! template.

	<files>
		<filename>component.php</filename>
		<filename>error.php</filename>
		<filename>favicon.ico</filename>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_preview.png</filename>
		<filename>template_thumbnail.png</filename>
		<folder>css</folder>
		<folder>html</folder>
		<folder>images</folder>
		<folder>img</folder>
		<folder>js</folder>
		<folder>language</folder>
		<folder>less</folder>
	</files>

File directory view of J3 Protostar

J3 protostar file structure en.jpg

Module Positions

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

These are the module positions defined in the default Protostar template:

	<positions>
		<position>banner</position>
		<position>debug</position>
		<position>position-0</position>
		<position>position-1</position>
		<position>position-2</position>
		<position>position-3</position>
		<position>position-4</position>
		<position>position-5</position>
		<position>position-6</position>
		<position>position-7</position>
		<position>position-8</position>
		<position>position-9</position>
		<position>position-10</position>
		<position>position-11</position>
		<position>position-12</position>
		<position>position-13</position>
		<position>position-14</position>
		<position>footer</position>
	</positions>

The list of positions are contained within the <positions> tag. Each <position> tag creates a module position that is available from the position list in the module manager and in other areas of Joomla! where module positions can be selected.

The simple format of the position list means it can be easily customized. For example, to add a new module position to the list, simply add a new <position> tag inside the <positions> tag with a unique name using all lowercase letters with no spaces. Keep in mind, this only adds the position to the backend and additional development in other template files is required to render the new position on the front end.

Languages

Some templates may include language files to allow translation of static text in the template. Notice that the language folder is defined and the two language files inside are also included. Even though the language folder was defined earlier, these files need their own definitions. This method tells Joomla! where the language files that contain strings used by the template reside.

The first file holds the language file for text that will be viewed by the User. The second file, with the .sys, or system, extension is for text that will be viewed in the Administrator area.

This is the language folder and file structure from the default Protostar template:

	<languages folder="language">
		<language tag="en-GB">en-GB/en-GB.tpl_protostar.ini</language>
		<language tag="en-GB">en-GB/en-GB.tpl_protostar.sys.ini</language>
	</languages>

Language strings are used in templates and throughout Joomla! for the purpose of utilizing the extensive international language support features in Joomla!. This method provides developers and users with a relatively simple method to translate any text that is used in templates and extension screens. Joomla! will check the language files for any language strings that are used and load the corresponding text in the language chosen by the user in place of the string. In this instance, there are only files for English (en-GB), any text translations in other languages must be provided by Users or Developers before they can be used by Joomla!.

More information about Language Files:

Parameters

Protostar Advanced Parameters Screen

A template may offer display options and other parameters that can be chosen by the Administrator in the Template Manager. For instance, the default Prototype template allows the Administrator to change various colors, fonts and add a logo, these parameters are found under the Advanced tab, which is also defined and created by the XML parameters.

Template parameters are contained inside a <config> tag, which contains a <fields> tag with a name attribute of "params". Inside the <fields> tag is where the parameter groups and individual parameters are defined. The <fieldset> tag is used to create groups of parameters. Individual parameters are defined with the <field> tag.

Each <fieldset>, and each <field> parameter within a <fieldset>, require a unique name defined by the name attribute. This name defines the parameter itself and is used to pass settings to the front end files. Each parameter should also contain a label attribute and description attribute. The label text appears with the parameter in the settings screen to identify what the setting is used for and more detailed information can be included in the description.

A parameter field can be virtually any type of form input with corresponding options, this is selected by the type attribute. Any necessary options, such as radio button or select choices, are defined in <option> tags. CSS class names can be defined with the class attribute. and a default parameter setting can be defined using the default attribute.

Below are the parameter definitions in the default Prototype Template. In this example, all Labels, Descriptions and Options are using language string definitions from the Language files defined in the previous section, as well as some from the Joomla! core, so they can be translated into different languages as necessary.

	<config>
		<fields name="params">
			<fieldset name="advanced">
				<field name="templateColor" class="" type="color" default="#08C"
					label="TPL_PROTOSTAR_COLOR_LABEL"
					description="TPL_PROTOSTAR_COLOR_DESC" />
 
				<field name="templateBackgroundColor" class="" type="color" default="#F4F6F7"
					label="TPL_PROTOSTAR_BACKGROUND_COLOR_LABEL"
					description="TPL_PROTOSTAR_BACKGROUND_COLOR_DESC" />
 
				<field name="logoFile" class="" type="media" default=""
					label="TPL_PROTOSTAR_LOGO_LABEL"
					description="TPL_PROTOSTAR_LOGO_DESC" />
 
				<field name="sitetitle"  type="text" default=""
					label="JGLOBAL_TITLE"
					description="JFIELD_ALT_PAGE_TITLE_LABEL"
					filter="string" />
 
				<field name="sitedescription"  type="text" default=""
					label="JGLOBAL_DESCRIPTION"
					description="JGLOBAL_SUBHEADING_DESC"
					filter="string" />
 
				<field name="googleFont"
					type="radio"
					class="btn-group btn-group-yesno"
					default="1"
					label="TPL_PROTOSTAR_FONT_LABEL"
					description="TPL_PROTOSTAR_FONT_DESC"
				>
					<option value="1">JYES</option>
					<option value="0">JNO</option>
				</field>
 
				<field name="googleFontName" class="" type="text" default="Open+Sans"
					label="TPL_PROTOSTAR_FONT_NAME_LABEL"
					description="TPL_PROTOSTAR_FONT_NAME_DESC" />
 
				<field name="fluidContainer"
					type="radio"
					class="btn-group btn-group-yesno"
					default="0"
					label="TPL_PROTOSTAR_FLUID_LABEL"
					description="TPL_PROTOSTAR_FLUID_DESC"
				>
					<option value="1">TPL_PROTOSTAR_FLUID</option>
					<option value="0">TPL_PROTOSTAR_STATIC</option>
				</field>
			</fieldset>
		</fields>
	</config>

The Protostar template illustrates a few different ways that XML can be used in a template interface, but there are many more possibilities. In this example, the <fieldset name="advanced"> tag encloses all of the parameters and it uses the name attribute to create the "Advanced" tab in the interface. All that is necessary to create another tab in the interface is another <fieldset> tag with a different name attribute. With this in mind, it is relatively simple to create as many additional tabs and parameters as necessary in a template.

Additional Resources