User:Rvsjoen/tutorial/Developing a Template/Part 03

From Joomla! Documentation
< User:Rvsjoen | tutorial/Developing a Template(Difference between revisions)
Jump to: navigation, search
m (→‎Part 03 - Adding module positions)
m (→‎Part 03 - Adding module positions)
 
Line 1: Line 1:
−
= Part 03 - Adding module positions =  
+
= Adding module positions =  
  
 
With your favorite editor, edit the following file
 
With your favorite editor, edit the following file

Latest revision as of 06:24, 16 April 2012

Contents

[edit] 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 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>

[edit] File listing

[edit] Testing your template

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

[edit] Download this part

[edit] Articles in this series

This tutorial is supported by the following versions of Joomla!

Joomla 2.5

Retrieved from "http://docs.joomla.org/index.php?title=User:Rvsjoen/tutorial/Developing_a_Template/Part_03&oldid=66530"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox