Channels ▼
RSS

Design

Joomla Templates


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>

Minimal template


<!--
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>

Complete template


<!--
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>

Joomla 1.5 template


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video