Actions

User

Difference between revisions of "Rvsjoen/tutorial/Developing a Template/Part 03"

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing a Template
(Part 03 - Adding module positions)
m (Part 03 - Adding module positions)
Line 75: Line 75:
 
     background: yellow;
 
     background: yellow;
 
     min-height: 320px;
 
     min-height: 320px;
     margin-left: 160px;
+
     width: 800px;
 +
    float: left;
 
}
 
}
  
Line 83: Line 84:
 
     float: left;
 
     float: left;
 
}
 
}
 +
 +
.clr {
 +
    clear: both;
 +
}
 +
 
</source>
 
</source>
 
</span>
 
</span>

Revision as of 06:14, 16 April 2012

Contents

Part 03 - Adding module positions

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

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