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


 * @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[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!

Joomla 2.5