Wed 22 Nov 2006
5:00PM
compton

Joomla Templates

The Joomla Template system is very powerful and seemingly elegant. It will be essential for our graphic designers to be able to create templates that give the required professional, and unique, look and feel to our clients' sites. Part of this will necessitate an awareness of exactly how the templates work, so that new ones can be built and deployed smoothly.

There are actually two sets of templates on a site - the public ones which determine how the public pages appear, and the admin ones, which only apply to the back-end admin pages.

Each template has its own subdirectory within the templates folder (or administrator/templates). In this location, there is typically an index.php page, an XML file called templateDetails.xml, a thumbnail preview image, and two folders called css and images.

compton

11:51 am, Thursday, 23 November 06

As its name suggests, the XML file contains information about the template. The document element is mosinstall, with a type attribute set to "template".

Within that, there are several elements which give info about template - its name, who created it, when, version, and so on. There are then three elements which specify what is included with the template. The files element contains a list of the files in the template root directory, images lists the files in the images directory, and css lists the files in the css directory. Within each of these last three elements, each file, image, and stylesheet is specified by a filename element.
 

compton

12:28 pm, Thursday, 23 November 06

The template in use is defined by the $cur_template PHP variable, which is set in the administrator/index2.php file to the return value of $mainframe->getTemplate(). $mainframe is also created in the index2.php code, by setting it to new mosMainFrame( $database, $option, '..', true ).

The mosMainFrame class is defined in /includes/joomla.php. The getTemplate() function returns the value of the $_template property, which itself is set on class instantiation to the current template as specified in the templates_menu table.

The $cur_template variable will hold the name of the directory where the currently active template is stored. In index2.php, the index.php file in this directory is included to generate the page content. Because it is simply included inline, the index.php file can access all the variables, functions etc which are available in index2.php.

The template index.php file links to the necessary stylesheets (in the joomla_admin template which I'm looking at, the links are hard-coded). It is pretty much HTML, with a few Joomla PHP functions scattered about which create the necessary page content elements.
 

compton

2:42 pm, Thursday, 23 November 06

Templates on the public site follow the exact same pattern as admin templates. The sunlight template index.php uses a div-based layout, with a couple of tables.

There's a single div within the body tag, which encloses a table. This table has a single row with a single cell. Inside the cell is a div, id main_outer. Nested inside it is a div with id main_inner. This single cell contains all the page content.
 

compton

4:08 pm, Thursday, 23 November 06

The functions which can be used in a template index.php page are defined in /includes/frontend.php

mosShowHead()

mosCountModules( $position )

- returns the number of modules for the specified position.

mosLoadModules( $position, $style )

- the modules for a given position are held in $GLOBALS['_MOS_MODULES'][$position]. If $style is 1, the modules are output within a table. The method loops through all elements of the $GLOBALS array with foreach, and displays each either using module caching (if enabled) or by calling a method of the modules_html class. For normal modules (name begins with mod_), the module2() method of this class is called. For everything else (custom or new modules), the module() method is used.

mosMainBody()

- does a few things such as cookie handling, display of mosmsg, and output main page content. The page content is output by echoing the contents of $GLOBALS['_MOS_OPTION']['buffer'].

/includes/frontend.html.php

This file defines the modules_html class (and nothing else).

module()



module2()
 

compton

2:42 pm, Friday, 24 November 06

There is a certain amount of flexibility in how modules are rendered. However, for our purposes, we don't need the end user to be able to customise modules, so a more appropriate solution may be to create our own modules for page components, based on the designs from the graphics guys (viz Kashif).

I now need to take a good look at how to go about creating new modules. A module is no more than a rendering component, it offers an interface to the admin GUI where the rendering can be customised, and I believe that interface is defined by the module's XML file.

The two modules which are similar to what the client needs are the category list (mod_virtuemart) and the featured items list (mod_virtuemart_featureprod).

As mod_virtuemart is least like our requirements, I'll see if I can create our own custom version, which renders according to our design.
 

Bill Bartmann

10:50 pm, Wednesday, 2 September 09

I'm so glad I found this site...Keep up the good work
 

/xkcd/ Pendulum Types