Joomla Template Tutorial for 1.6, 1.7 and 2.5

This is a basic tutorial that describes how to create a template for Joomla Version 1.6, 1.7 and 2.5. If you don’t know about Joomla, click here, for further information about Joomla extensions development, click here.

To start the tutorial, let’s first set our goal. I have had some designing in the photoshop with the goal and created a sample design. We will create a 3 column based template. The template will have collapsible module positions and will completely be a CSS based design. After the completion of this tutorial, we will create the following template.

Update 1: (April 9, 2011) This tutorial has been updated to support custom logo image or text from template parameters.

Update 2:  (January 30, 2012) Some small errors are corrected.

Joomla Demo TemplateJoomla Demo Template no Right Column

Now, lets look at the joomla template architecture. Inside the Joomla installation, you will find the templates folder. All the front-end templates resides in this folder. I have created a folder named lbsaud for the demo template. I am using this name for creating my template. Inside the folder, we basically needed following files and folder structure:

lbsaud

|_ css [folder]
|_ images [folder]
|_ index.php
|_params.ini
|_ templateDetails.xml

Lets explain each of them:

templateDetails.xml is the manifest, or packing list file that includes a list of all the files or folders that are part of the template. It also includes information such as the author and copyright. This file is necessary for the successful installation of template contents and to display template information in the Joomla administrator backend.

params.ini file includes the template parameters if we have defined such as template colors, default font sizes, logo etc.

index.php is the main template file where we will define the structure of the template. All the php and html codes will reside in this file.

css folder will contain all the css files we created for the template designing.

images folder is similar to css folder. It will contain all the image files we have used in the template.

After having a good idea about basic template files, lets move on to the next step. Lets create all the files and folders inside our template folder and we will edit necessary files.

First of all, I put the following code in templateDetails.xml file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">
	<name>lbsaud</name>
	<creationDate>30/01/12</creationDate>
	<author>Lal B. Saud</author>
	<authorEmail>info@lbsaud.com.np</authorEmail>
	<authorUrl>http://www.lbsaud.com.np</authorUrl>
	<copyright>Copyright (C) 2012 Lal B. Saud</copyright>
	<license>GPL</license>
	<version>1.6.4</version>
	<description>A demo template for Joomla 1.6/1.7/2.5 - Template Tutorial</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>params.ini</filename>
		<folder>images</folder>
		<folder>css</folder>
		<folder>js</folder>
	</files>
	<positions>
		<position>breadcrumbs</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>footer</position>
		<position>debug</position>
	</positions>
	<config>
		<fields name="params">
			<fieldset name="basic">
				<field name="logoType" type="list" default="image" label="Logo Type" description="Use Site Logo">
					<option	value="image">Image</option>
					<option	value="text">Text</option>
				</field>
				<field name="logoText" type="text" default="LBSaud Demo Template" size="50" label="Logo text" description="Logo Text" />
				<field name="sloganText" type="text" default="A Better Joomla Template" size="50" label="Slogan" description="Slogan of the site" />
			</fieldset>
		</fields>
	</config>
</extension>

This file has several sections enclosed within Joomla’s basic xml tags. First 3 lines provide the xml information, DOCTYPE information and Joomla installation information for the template. From line 4-12, you can change the value according to your template. Remember, name tag must contain a valid name without having spaces. It will create the template folder with the defined name, when installing the template.

The files tag encloses the files and folders required for this template. Positions tag encloses all the available positions in the template. Config tags encloses template parameters here. The fieldset tag is set to basic, which means only basic parameters are set in the template. If we want to set advanced template parameters also, then there should be a fieldset tag with name advanced. This will create an advanced parameter slider tab. In the basic parameter tab, we have set parameters for template logo (image or text).

When templateDetails.xml file is ready, its time to code index.php file. Remember, index.php is the only file we need to write php and html codes. This file is the only file concerned with presentation of the content. Here is the basic content of the index.php file:

<?php
/**
 * Date         January 30, 2012
 * Copyright	Copyright (C) 2012 Lal B. Saud
 * License	GPL
 */
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<?php echo $app->getCfg('sitename');?>
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="debug" />
</body>
</html>

Remember, this is just the basic index.php file that retrieves data from the database and presents it in the webpage. We haven’t included any images and CSS layout to create the desired output. Now, before going forward, lets explain the code.

Line 7 ensures that file is not accessed directly for security reasons. Line 8 initializes a variable $app, which can be used to grab various Joomla template parameters such as Site name. Line 10 defines the document type used in the page. Line 11 defines xml namespace for the page. Line 13 includes all the necessary header tags automatically, such as meta tags, page title etc. Line 14 and 15 includes the generic css files of Joomla while line 16 includes our templates css file (tempate.css). From line 1-17 is necessary for all templates. Besides this, we have also noticed two keywords here:

$this->template defines the current template.
$this->language defines the language being used currently.

Now, lets move on to the body part. Body part basically contains main content and Joomla modules. Line 19 displays the site name. Line 20, 21, 22, 25, 26 and 27 display different Joomla modules (Please remember, we have not set the module positions yet, we have just called them). Line 23 displays the system messages(if any) and line 24 displays the main content. The output will look like this at this stage:

Joomla Raw Template

Now, lets add some div tags in the index.php file to create the required layout by calling the css from template.css file inside the css folder.

Here is the updated index.php file:

<?php
/**
 * Date         January 30, 2012
 * Copyright    Copyright (C) 2012 Lal B. Saud
 * License  GPL
 */
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$leftbar = 1;
$rightbar = 1;
?>
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/equalcolumns.js" type="text/javascript"></script>
<?php
if ($this->countModules('left') == 0)
	$leftbar	= "0";

if ($this->countModules('right') == 0)
	$rightbar	= "0";
?>
</head>

<body>
<div id="header">
<?php
   if ($this->params->get('logoType') == 'image') { ?>
   <h1>
      <a href="index.php" title="<?php echo $app->getCfg('sitename'); ?>"><span><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.gif" border="0" alt="Logo"></img></span></a>
   </h1>
   <?php } else { ?>
   <div>
      <h1><a href="index.php" title="<?php echo $this->params->get('logoText'); ?>"><span><?php echo $this->params->get('logoText'); ?></span></a></h1>
      <p><?php echo $this->params->get('sloganText');?></p>
   </div>
<?php } ?>
</div>

<div id="message">
  <jdoc:include type="modules" name="top" style="xhtml" />
</div>

<div id="main_wrapper">
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar_left">
    <jdoc:include type="modules" name="left"style="xhtml" />
  </div>
  <?php endif; ?>
  <div id="maincolumn<?php echo (2-$leftbar-$rightbar); ?>">
    <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />
  </div>
  <?php if($this->countModules('right')) : ?>
  <div id="sidebar_right">
    <jdoc:include type="modules" name="right" style="xhtml" />
  </div>
  <?php endif; ?>
  <div class="clear">
</div>
</div>
<div id="footer">
  <jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>

You can notice the several changes now in the index.php file. Lets first explain the changes. We have initialized two variables ($leftbar and $rightbar) at line 9 and 10. These variables are used in the page to create the collapsible module positions (Remeber that in all pages, there may not be modules at left or right positions, in that case we are increasing the width of main content).

At line 19, you can see that we have added a javascript file. The script file is referenced to equalcolumns.js file inside the js folder. Since, css cannot determine the height of all the columns and we need to fill-up the grey background in left and right up to the length of the content. You also need to check this file.

Line 21 and 24 (also several lines below) uses the conditional PHP strings to count the module numbers, which will return a +ve integer if the module is present at the position. At line 21 and 24, we are using this function to assign the value 0 to $leftbar and $rightbar, which means modules are present or not at the left/right position. Also, from lines 49-53 and 59-63, we are using the function to display the div tag, in case the modules are present.

Another new changes to notice is: style="xhtml" inside the modules tag. This is to define the module output type. Several other output types are: table, horz, xhtml, rounded, and none. Custom module output types can also be created. However, its always better to use xhtml or rounded as they are css optimized.

At line 54, we are using the $leftbar and $rightbar variables to get the value of id attribute of div tag. The possible values are maincolumn0, maincolumn1 or maincolumn2. Now, we are creating three different CSS styles in the template.css file, with different widths.

The template.css file will look like this:

/* Layouts */
html, body {
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 960px;
}

#header {
	height: 80px;
	background: #99CCFF;
	padding: 10px;
}

#message {
	height: 36px;
	width: 100%;
	background: #1CA4E0;
}

#main_wrapper {
	width: 960px;
	height: auto;
}

#sidebar_left, #sidebar_right {
	width: 230px;
	background: #CCCCCC;
	height:auto;
	padding: 0 5px;
}

#sidebar_left {
	float: left;
}

#sidebar_right {
	float: right;
}

#maincolumn0 {
	position: relative;
	width: 470px;
	float: left;
	padding: 0 5px;
}

#maincolumn1 {
	position: relative;
	width: 710px;
	float: left;
	padding: 0 5px;
}

#maincolumn2 {
	position: relative;
	width: 950px;
	float: left;
	padding: 0 5px;
}

#footer {
	height: 38px;
	background: #2C3E46;
}

.clear {
	clear: both;
}

/* Topography */
a:link, a:visited {
	color: #1BA5DF;
	text-decoration: none;
}

a:hover {
	color: #666;
}

.actions {
	list-style: none;
	float: right;
}

.actions li {
	float: left;
	display: block;
}

.actions img {
	padding: 0 4px;
	border: none;
}

#footer {
	color: #FFF;
	padding: 5px;
	text-align: center;
}

Please remember, this is just a minimal css file. Several other Joomla inbuilt css class attributes are not defined here.

That’s it. We have created a simple Joomla template.

I hope, now with this tutorial, you can create your own template. For the shake of convinience, I have also attached the template file, we have used in this tutorial. You can download and install it. Please don’t forget to leave a comment.

Click here to download the template

Happy templating!!

You can leave a response, or trackback from your own site.

35 Responses to “Joomla Template Tutorial for 1.6, 1.7 and 2.5”

  1. redone says:

    hi thank very much you for this tutorials

    really it’s very important, but i have same problem in your themes

    not work with me , just i see liker this

    http://www.lbsaud.com.np/wp-content/uploads/2011/02/joomla_raw-300×209.jpg

    i want to give me the position of the modules , i work in joomla 1.6.

    please excuse me my English is very bad :)

    • admin says:

      Hi Redone,

      Thanks for the comment. Please follow the whole tutorial. While creating the template, the screen shown above (the link you also provided) comes in between. Also, add some modules to the left and right module positions from your admin panel. It works like a charm.

      Also, you can download and install the template I have used in the tutorial. Check the link at the end of this tutorial. :D

  2. [...] the original here: Joomla 1.6 Template Tutorial – The Home of Lalu – A web … Bookmark on Delicious Digg this post Recommend on Facebook Buzz it up share via Reddit Share with [...]

  3. Ozz says:

    Really helpful tutorial, thanks a lot.

  4. steff says:

    Hi and thanks for this tutorial.
    I have a problem with a template that I hope you could help me with.
    My sitename is shown in my template and I want to change it to an other name. How do I manage that?

    best reg/
    Steff

    • admin says:

      Hi Steff,

      Thanks for the query. Please check the demo template I have attached at the last of this tutorial. I have updated the template to display Custom Site Name or Logo Image from template parameters.

  5. George says:

    i created a template folder but i cannot see it from the admin panel of template manager. any assistance? George

    • admin says:

      Hi George,

      In joomla 1.5, it shows automatically. But if you are in Joomla 1.6, you need to do an extra step.

      Go to Extensions Manager->Discover and then click on the discover button.

  6. escort says:

    Hi and thanks for this tutorial.s
    I have a problem with a template that I hope you could help me with.
    My sitename is shown in my template and I want to change it to an other name. How do I manage that?xs

    • admin says:

      Hi escort,

      You need to add a parameter in the template to add custom title. Then you need to modify the template to display the parameter in place of site name.

      Check the template I have attached with this tutorial.

  7. [...] based design. After the completion of this tutorial, we will create the following template. …http://www.lbsaud.com.np/jooml .. Share and [...]

  8. anurag says:

    thanks alot for the tutorial…
    It was really helpful for someone to start with.

  9. escort says:

    thanks alot for the tutoriald…
    It was really helpful for someone to start with

  10. guest says:

    Hello.
    Great tutorial.
    I found one small mistake in this tutorial here:

    “At line 44, we are using the $leftbar and $rightbar variables to get the value of id attribu”

    The mistake is in number, not 44, but 54.

    Oh, and one more:
    In your “Share the knowledge” is one more mistake. The text for RSS feed icon when mouse hover is “Post to Delicious”

    Anyway, your tutorial is great.

    Thank you!

  11. Ozzy says:

    This is fantastic, thank you so much! I’m very new to Joomla (day 2!) and this tutorial helped a great deal as most of the in-depth tutorials seem to be for older versions, which for a beginner is difficult to pick out what’s different in 1.6. Thanks again :)

  12. romper says:

    For joomla 1.6 in file templateDetails.xml should be placed tag extension instead of install as it was in version 1.5

  13. Submit Your Site at PopDirectory…

    Create Joomla template in 30 Minutes | The home of Lalu…

  14. Stefano says:

    Great Tutorial!
    It’s well written, simple and direct!
    I’m new to Joomla (1 week) and I know just a little of css, html and php. With this tutorial I learned a lot of key points of Joomla.
    Thank you.

  15. silver says:

    awsome and nicely explained

  16. This is fantastic, thank you so much! I’m very new to Joomla (day 2!) and this tutorial helped a great deal as most of the in-depth tutorials seem to be for older versions,in version 1.5

  17. [...] how to adapt your 1.5 version template to 1.6,1.7 versions. Visit Joomla Documentation and then here also. These would help you with ideas on what to do , there are not much documentations available [...]

  18. joomla says:

    joomla…

    [...]Create Joomla template in 30 Minutes | The home of Lalu[...]…

  19. djeeke says:

    Hey Lalu,

    I installed your template & encountered an issue:
    It does not seem to load the system messages of the “frontend user registration confirmation page”
    I did open a query on the Joomla forums about this before noticing the error comes from the template.
    Maybe you care to reply on the joomla Forum, the link to the thread is : http://forum.joomla.org/viewtopic.php?f=615&t=688326
    Thanks for helping us learn about templates !

    Djeeke

    • Lalu says:

      Hi djeeke,
      Sorry, I was out for some time, so can’t update soon.

      Thanks for pointing out this issue. I forgot to include the system message line in the Joomla template. Now, I have updated the Joomla Template Page and the Demo Template (zip file).

      Hope, it will be more useful for Joomla enthusiasts like us.

      Thanks.
      Lalu

      • djeeke says:

        Thanks for the feedback Lalu !

        I’m sure your tutorial will help Joomla enthusiasts in understanding templates ane eventually create their own !

        Kind regards,
        Djeeke

  20. kAlAi says:

    Hai,
    I use Jupgrade in Joomla 1.5.23 to migrate to Joomla 1.7.3. And i did changes in templtedetail.xml , index,php and template.css . Then i go to Extensions > Template Manager > Templates. Template not found in Joomla 1.7.3.
    i get idea from http://joomlatut.com/joomla-tips-and-tricks/57-how-to-convert-a-simple-template-for-joomla-1-5-to-1-7.html
    Can i have solution ?

  21. Zamme says:

    Thanks a lot Lalu!

    This is the first time I understand how to create a joomla template!
    Perfect for beginners.

    Greatings.

  22. sergey says:

    Respect from Russia! Great and useful tutorial:)

  23. Pete says:

    This is possibly the most clear explanation of not only how to create a Joomla template, but why certain elements work. Thank you very much for taking the time to teach this!

  24. Steve says:

    Very much appreciated. Thank you.

  25. Victor says:

    Thanks! Very useful tutorial!

    Blue skies,
    Victor

  26. kostas says:

    thanks
    it is very understandable

  27. Arun says:

    Thanks a lot Lalu!

    This is the first time I understand how to create a joomla template!
    Perfect for beginners.

  28. Laurie says:

    Great tutorial and files. Thanks a heap!

  29. z-dog says:

    This is an excellent tutorial. It is easy to read, and it really works. Thanks very much for publishing this outstanding piece of work.

Leave a Reply

*

Powered by WordPress | Buy cheap cell phones at iFreeCellPhones.com | Thanks to iCellPhonePlans.com, Facebook Games and Free Ads