Rvsjoen/tutorial/Developing a Template/Part 03
From Joomla! Documentation
< User:Rvsjoen | tutorial/Developing a Template
Adding module positions[edit]
With your favorite editor, edit the following file
index.php
<?php
/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="clr"></div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
Once we have added the module positions with the accompanying div elements for use in styling, we can use CSS to create the layout. In this example we are creating a simple 2-pane layout with a header and footer.
With your favorite editor, edit the following file css/styles.css
html, body {
background: #ccc;
}
div#container {
margin: 0 auto;
background: red;
width: 960px;
}
div#header {
background: green;
height: 160px;
}
div#footer{
background: blue;
height: 80px;
}
div#main{
background: yellow;
min-height: 320px;
width: 800px;
float: left;
}
div#left{
background: orange;
width: 160px;
float: left;
}
.clr {
clear: both;
}
The CSS code itself is not the important part here and the result will look quite ugly, the point is to get a basic idea on how module positions work and in order to be able to do that we need a basic template structure.
With your favorite editor, edit the following file
templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
File listing[edit]
Testing your template[edit]
For details on how to install the template into your Joomla! site, refer to the information provided in Part 01.
Download this part[edit]
Articles in this series[edit]
This tutorial is supported by the following versions of Joomla!