Rvsjoen/tutorial/Developing a Template/Part 03

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing a Template

Adding module positions

With your favorite editor, edit the following file


 * @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="" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
		<jdoc:include type="head" />
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
		<div id="container">
			<div id="header">
				<jdoc:include type="modules" name="header" />
			<div id="left">
				<jdoc:include type="modules" name="left" />
			<div id="main">
				<jdoc:include type="message" />
				<jdoc:include type="component" />			
			<div class="clr"></div>
			<div id="footer">
				<jdoc:include type="modules" name="footer" />

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;     

    background: blue;
    height: 80px;     

    background: yellow;
    min-height: 320px;
    width: 800px;
    float: 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


<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
        <creationDate>Once upon a time</creationDate>
        <author>John Doe</author>
        <copyright>Copyright Info</copyright>
        <license>License Info</license>
	<description>Description of the Hello World! template...</description>

File listing

Testing your template

For details on how to install the template into your Joomla! site, refer to the information provided in Part 01.

Download this part

Articles in this series

This tutorial is supported by the following versions of Joomla!

Joomla 2.5