Joomla templates can be made up of a any number of files and folders, but their standardized structure allows Joomla to treat templates generically. That makes it possible to switch the look- and-feel of a Joomla site by simply selecting an alternate template. As long as a template includes a place for component display and a few typical module positions, it can be used interchangeably with most other templates.

Therefore, you will need to know the folders that hold a template (often the root folder, the css folder, and the images folder) and the minimum files required for proper display (index.php, template.css, and templateDetails.xml). There are also several optional files (parameters.ini and template_thumbnail.png) that make it easier to manage a template. Since you may only have experience with templates from the user side, your study should begin by looking at how the Joomla system organizes each template.

Files and Folders
All user templates installed on a Joomla site are stored in the templates directory, which is located at the root directory of a Joomla site. The templates folder holds a single folder for each template installed on the system. The name of the folder must exactly match the name of the template, and the template system is case-sensitive. For example, the template rhuk_milkyway must be contained in the huk_milkyway folder.

While it is possible for a template to consist of only a single file (index.php), even a bare-bones template would likely include a minimum of four files (index.php, template.css, templateDetails.xml, and banner.jpg). Most templates contain many more files, including additional stylesheets, a variety of images, and formatting graphics (such as rounded corners, spacers, and so on).

Each primary file performs a particular function:

❑       index.php —  Provides the central logic of the template, including any module and component display. Also, any client-side JavaScript used by the site for user interaction is likely referenced in this file. Unfortunately, many templates include layout code in this file as well, such as multi-column tables, images, and text formatting. Stylesheets are a better place for layout and presentation selections.

❑       template.css —  Supplies the styles for the fonts, colors, positioning, images, and other presentation aspects of the template. Since the CSS technology is supported by all browsers of significant market share, the stylesheets held in this file can provide everything from column definition to list formatting.

❑       templateDetails.xml —  Holds the meta-information about the template itself that is used by the Joomla Administrator interface for installation and maintenance. Settings held in the file include a list of all files that make up the template, author and publication information, and parameters that are available for user modification through the Administrator interface.

❑       banner.fff —  Although not absolutely necessary, most templates provide a central header graphic that gives the template its hallmark appearance. For commercial templates, this graphic is generally constructed such that the purchaser can overlay it with a business logo, organizational trademark, or site name to make it appear as if the graphics were custom-designed. This file is typically stored in either JPG or PNG format (which replaces the fff extension characters).

Traditionally, two folders are stored within each template folder and hold the template.css and the banner.fff files:

❑       css —  Holds one or more of the CSS files that are used by the template. At a minimum, the template.css file is generally located here.

❑       images —  Contains all of the image files used by the template. The banner.fff file will likely be stored in this directory. For most templates, a number of small graphics files used for layout formatting are also stored here.

Nearly all the Joomla templates that you will study will feature at least these basic files and folders. The Joomla system can readily address any template that is stored following these basic structural settings. In fact, unlike modules and components that must be installed through the Administrator interface (so certain settings can be written into the Joomla database), a template that is simply copied into the templates folder will be available for system use.

Often templates will also include two other optional folders:

❑       html —  Holds template files that are used to override the core output of the Joomla system.

❑       javascript —  Contains all of the JavaScript code files used by the template.

Templates are generally distributed in a either a .zip or .tarball archive that contains all files and the relative location of the files within their subfolders. Joomla uses the PHP Zlib to uncompress a .zip tem- plate archive uploaded via the Extension Install/Uninstall  screen. The extracted files and folders are placed in a template folder with name matching the template. Most important of these files is the index.php file that contains all of the primary template logic.

Template Logic: The Index File
The index.php file is the central template file, and the only file absolutely necessary for the template to be used by the Joomla CMS. The index.php file is a combination of HTML and PHP code. The HTML generally provides the structured text elements that link to individual stylesheets for formatted presentation. The PHP code makes calls to the Joomla Framework to populate the page with the necessary content extracted from the database.

While this HTML hardly complies with World Wide Web Consortium (W3C) standard, it will execute and display the Hello World greeting through the Joomla system. Note that this template, in its simplicity, will display no content. The Joomla function call (held in the tag) only display writes header information, if available. Later in the chapter, you’ll create a template that is a little more complicated than this one that displays a couple of modules and a component.

This template is stripped down so you can see that there are a few “requirements” at a bare minimum for a template file to function. In fact, even the Joomla directive could be removed and the template would still work. However, Joomla directives provide most of the power to a template, so they are worthy of closer study.