Installation
If you manage to create a template that you think other people might find useful the chances are you will want to distribute it in a way that will allow easy installation using Joomla interface, i.e., via "Installers" -> "Templates - Size" menu. This is surprisingly easy. All you have to do is create a zip archive with all the files as shown below:
Archive: example.zip
Length Date Time Name
-------- ---- ---- ----
0 10-21-07 00:06 example/
640 10-21-07 00:06 example/index.php
276 10-21-07 00:02 example/templateDetails.xml
0 10-21-07 00:06 example/css/
237 10-21-07 00:06 example/css/template_css.css
-------- -------
1153 5 files
Complete Template
The minimal template that I created above is not just basic, it actually lacks some important features. First, some optional but useful elements of the meta data XML file are missing and second and most important, our template does not display all Joomla content elements. It also wouldn't hurt to make the template visually more appealing, but this is beyond the scope of this article, mostly because I'm not especially good at graphical design (and also because once you created the plain template which is the subject of this article the rest is a standard web design which requires almost zero Joomla knowledge).
I suggest adding at least the following elements to the templateDetails.xml file: creationDate, author, version, and description:
<creationDate>12/01/2007</creationDate> <author>Demiurg</author> <authorUrl>http://gruimed.blogspot.com</authorUrl> <version>1.0</version> <description>Joomla from scratch example 1</description>
The most important missing pieces are in the index.php file. First of all, you would probably want to add the following modules: banner, user1, user2, user3, and user4 which are used in the default Joomla configuration and probably also in your web site. In this example, these modules are divided into two different groups which will be placed at different screen positions using the CSS template later. The first group includes banner, user3, and user4 modules, and the second one user1 and user2. The first group will be displayed at the top of the page, so it requires a new CSS group top for this purpose, while the second group will be added to the existing CSS group right-sidebar to be displayed on the right:
<div id="top">
<?php mosLoadModules('banner');
mosLoadModules('user3');
mosLoadModules('user4');?>
</div>
<div id="right-sidebar">
<?php mosLoadModules('right');
mosLoadModules('user1');
mosLoadModules('user2');?>
</div>
Note that the top group is added before the other groups, as it appears, as the name suggests, on the top of the page. I would also recommend adding to the beginning of the page the HTML "DOCTYPE" tag which tells the browser which HTML or XHTML specification the document uses:
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
It is also common to load Joomla footer which displays the website name and Joomla license at the bottom of the page, i.e. in the end of the file:
<div id="footer"> <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php'); ?> </div>
The css/template_css.css file has to be modified as well to include the following lines which define the layout of the newly added footer and top groups:
#top {margin: 0 auto; width: 50%}
#footer {margin: 0 auto; width: 50%}
The first element will be placed in the middle of the top of the page and the last one in the middle of the bottom. This can be done using CSS margin property and setting vertical margins to 0 and horizontal margins to "auto" which instructs the browser to place this element "automatically" in the middle of the page.
Joomla 1.5
Joomla 1.5 introduced a completely new API and your template has to be ported to it. The changes in templateDetails.xml file are minimal -- <mosinstall type="template"> has to be replaced with <install version="1.5" type="template">. The tag name was changed from "install" to "mosinstall" and it now includes the Joomla version number. The changes to the index.php file are more extensive and are best demonstrated by the following example:
<?php defined( "_JEXEC" ) or die( "Direct Access to this location is not allowed
." );?>
<head>
<jdoc:include type="head" />
<link href="templates/<?php echo $this->template; ?>/css/template_css.css" rel="
stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="top">
<jdoc:include type="modules" name="banner" />
<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />
</div>
...
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
If you compare the above code with the corresponding lines in the Joomla 1.0.x template you will notice the following API changes:
- The code that checks for direct access to this file now uses _JEXEC variable instead of _VALID_MOS
- The call to mosLoadModules() that loads the module and outputs it's content, i.e. HTML, is replaced by jdoc:include
- The code that directly includes footer.php file is now replaced by a clean API call that loads the footer module
Since new Joomla API does not affect CSS in any way there are no changes to the css/template_css.css file. That's it. Your template is ready to be installed on Joomla 1.5 site.
Source Code
<!--
Minimal Joomla Template
(C) Alexander (Sasha) Sirotkin
sasha.sirotkin@gmail.com
-->
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<head>
<?php mosShowHead(); ?>
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="left-sidebar">
<?php mosLoadModules('left');?>
</div>
<div id="content">
<?php mosLoadModules('top');?>
<?php mosMainBody();?>
</div>
<div id="right-sidebar">
<?php mosLoadModules('right');?>
</div>
</body>
</html>
<!--
Joomla Template
(C) Alexander (Sasha) Sirotkin
sasha.sirotkin@gmail.com
-->
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<head>
<?php mosShowHead(); ?>
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="top">
<?php mosLoadModules('banner');
mosLoadModules('user3');
mosLoadModules('user4');?>
</div>
<div id="left-sidebar">
<?php mosLoadModules('left');?>
</div>
<div id="content">
<?php mosLoadModules('top');?>
<?php mosMainBody();?>
</div>
<div id="right-sidebar">
<?php mosLoadModules('right');
mosLoadModules('user1');
mosLoadModules('user2');?>
</div>
<div id="footer">
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php'); ?>
</div>
</body>
</html>
<!-- Joomla Template (C) Alexander (Sasha) Sirotkin sasha.sirotkin@gmail.com --> <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <?php defined( "_JEXEC" ) or die( "Direct Access to this location is not allowed." );?> <head> <jdoc:include type="head" /> <link href="templates/<?php echo $this->template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="top"> <jdoc:include type="modules" name="banner" /> <jdoc:include type="modules" name="user3" /> <jdoc:include type="modules" name="user4" /> </div> <div id="left-sidebar"> <jdoc:include type="modules" name="left" /> </div> <div id="content"> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> </div> <div id="right-sidebar"> <jdoc:include type="modules" name="right" /> <jdoc:include type="modules" name="user1" /> <jdoc:include type="modules" name="user2" /> </div> <div id="footer"> <jdoc:include type="modules" name="footer" /> </div> </body> </html>
