Create a simple Joomla 1.5 template

21 Dec 2011

Administrator

Joomla Tutorials

1
2
3
4
5

(0 votes)

This tutorial will show you how to create a simple Joomla 1.5 template. You can get ideas how to create your new Joomla template from our Free Joomla templates gallery.

How to create a basic Joomla 1.5 template?

First, open the "templates" directory in your Joomla installation. Then create a subfolder in it named "tutorial_template". All the files of your template will reside in it.

Inside your new directory, create a file called index.php, and another named templateDetails.xml. Then create a folder named css and in it - a new file name template.css. In order to create these files, you can use a simple Notepad and store the files on your computer, and upload them later via FTP or the File Manager of your cPanel.

Those are the basic files that each Joomla template needs to function properly. O

index.php - Specifies the available module positions and the path to your Stylesheet file. This is the main "section" of your template;

templateDetails.xml - This is a system file that provides information about your template to the Joomla application;

css/template.css - The stylesheet file of your template. It defines the looks of your website;

Once you have done that, change the default template for your website to the newly created one. For more information how to do this, check our tutorial on Changing the default template of Joomla 1.5.

Now, let's take a detailed look on what each file should contain:

The index.php file should start with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>

Those lines specify the beginning of the HTML output of your website. This PHP code - <jdoc:include type="head" /> will include in your page the Joomla header content (the page title, meta description, keywords, etc.) that you have added in the administrative end of your application.

Next, we have to add the "body" part of your website:

The <jdoc:include type="component" /> line will display the main content of any given page.

Now, it is time to check our template. Save the index.php file and login to the Administrative end of your Joomla application. From it, make the new "tutorial_template" template default for your website. For more information on how to do that you can refer to our tutorial on how to change the default template of Joomla 1.5. Your page should look like this one depending on the content you have:

This page includes only your articles without any styling or modules displayed. Now, let's add some module positions. Edit your index.php file and change the lines between <body> and </body> to:

The <jdoc:include type="modules" name="left" /> line tells the Joomla application where to insert the modules published in the "left" position. We have just added the top, left, right and footer positions to your template.

Note that we have surrounded those in <div> tags and added information about their classes and ID's. In addition, we have wrapped everything in a div with ID "container" which allows us to set the basic dimensions of your page. The div classes will be defined in the template.css file once we create it. At this point, however, your index.php should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<div id="container">
    <div id="header"><jdoc:include type="modules" name="top" /> </div>
    <div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
    <div id="content" class="float"><jdoc:include type="component" /></div>
    <div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div>
    <div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>

Now we have to edit the templateDetails.xml file. In it, paste the following lines:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
         <name>tutorial_template</name>
         <creationDate>02/2008</creationDate>
         <author>SiteGround</author>
         <authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it.</authorEmail>
         <authorUrl>http://www.siteurl.com</authorUrl>
         <copyright>SiteGround</copyright>
         <license>SG TOS</license>
         <version>1.0.0</version>
         <description>Basic Joomla Template</description>
         <files>
                 <filename>index.php</filename>
                 <filename>templateDetails.xml</filename>
                 <filename>css/template.css</filename>
         </files>
         <positions>
                 <position>left</position>
                 <position>right</position>
                 <position>top</position>
                 <position>footer</position>
         </positions>
</install>

Let's take a more detailed look on the lines of the templateDetails.xml file:

<install version="1.5" type="template"> - This line shows the Joomla version which your template is designed for. It will allow the Joomla template installer to correctly install your template if you decide to make an archive of the template and use it on a different Joomla instance.
<name>tutorial_template</name> - This line defines the name of your template. For the purpose of this tutorial, we are using "tutorial_template";
<creationDate>02/2008</creationDate> - This line displays the creation date of your template;
<author>SiteGround</author> - This line defines the author of the template;
<authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it.</authorEmail> - Add your e-mail in this line;
<authorUrl>http://www.siteground.com</authorUrl> - This line specifies the website of the template creator;
<copyright>SiteGround</copyright> - You should add the copyright information for your template in this line;
<license>SG TOS</license> - This line specifies the type of license your template is published under;
<version>1.0.0</version> - This line defines the version of your template;
<description>Basic Joomla Template</description> - Here you can add additional information for your template;
<files>
   <filename>index.php</filename>
   <filename>templateDetails.xml</filename>
   <filename>css/template.css</filename>
</files> - Those lines specify all the files that your template uses.
<positions>
   <position>left</position>
   <position>right</position>
   <position>top</position>
   <position>footer</position>
</positions> - Those lines define the positions you have enabled in your template.

The next step is to add some styling to the template. First, open the index.php file and add the following line just before the </head> tag:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/tutorial_template/css/template.css" type="text/css" />

This line will tell your website where to load its stylesheet file from.

Now, you should edit the css/template.css file and add the following lines to it:

* {
     padding: 0;
   margin: 0;
}
img {
     border: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #0F0F0F;
}
a:link, a:visited {
    text-decoration: underline;
    font-weight: normal;
    color: #000;
    outline: none;
    text-align: left;
}
.float {
     float: left;
}
.clear {
    clear: both;
}
.overall {
    background-color: #fff;
}
div.center {
    text-align: center;
    margin: 0px auto 0 auto;
    padding: 0;
    width: 950px;
    background: #FFFFFF;
}
#container {
    width:960px;
    margin: auto;
    background-color: #f4f9fc;
    border: 1px solid #e2e2e2;
    text-align: left;
}
#header {
    text-align: center;
    background-color:#f4f9fc;
    height: 80px;
}
#content {
    width: 598px;
    text-align: left;
    background-color:#f4f9fc;
    padding: 5px;
}
#sidebar_left {
    text-align: center;
    background-color:#f4f9fc;
    width: 165px;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
}
#sidebar_right {
    background-color:#f4f9fc;
    text-align: center;
    width: 165px;
    border-left: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
     }
#footer {
    background-color:#f4f9fc;
    text-align:center;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
}

Those lines will add some clean basic design to the different parts of your website. You will need some basic skills in working with CSS in order to make changes in the outlook of your Joomla site.

Your template is now complete, at this point your website should look like this :

Simple Joomla Template Preview

From now on it is up to your imagination to create the design of your website as you want it. You can add different module positions, play with the css file, add images for backgrounds and much more. Joomla's template structure gives you the freedom to create the website you have always wanted. Good luck!