Jul 12, 2011

Create A Template In Joomla 1.5 | How to make template in Joomla

So you decided to make your first Joomla template, good idea, Follow the steps below:-

  • Go to your joomla directory>templates, here create a folder named as first_template(You can keep any name, as per your choice)



  • In this new folder, create a file named as "index.php" and one more named as "templateDetails.xml". Then create a folder and named it as "css" and inside this folder make a new file named as "template.css".
    You can create these files using a normal text editor like notepad.



  • The files and folder which we created are the basic and mandatory files which joomla needs.


Explanation of Files
index.php - This file specifies the module positions and the path to your CSS stylesheet file. This is the main and important section of your template.

templateDetails.xml - This file provides the information of your new template to joomla.

css/template.css - As the name suggests, it is used to store your style sheets.

After the above steps go to your administrator>template manager, you will find your new created template displayed there. Just make it as default. and follow the next steps.

The files which we created, now we are going to fill them with codes.

The index.php should contain:

[php]
<!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>
[/php]

The lines which we wrote now, is used to specify the beginning of HTML output.
Next we will add the head php code of joomla, which adds all the head section like title, meta etc etc to your output.

[php]
<jdoc:include type="head"/>
[/php]

Now we will add the body.

[php]
<body>
<jdoc:include type="component" />
</body>
</html>
[/php]

The

[php]<jdoc:include type="component" >[/php]

is used to display the main component or content of each page

After the above steps, lets have a look to our new template, so save the file and check your website in browser, to how it looks.

Joomla first look

The above output is just displaying articles with no modules and css, so lets add them.
Open your index.php file and add the following code to body section

[php]
<div id="container">
<div id="header"> <jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left"> <jdoc:include type="modules" name="left" /> </div>
<div id="content"> <jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer"> <jdoc:include type="modules" name="footer" /> </div>
</div>
[/php]

The jdoc:include type="modules" name="left" is used to include module with a left position.

So after the above step, the final index.php should contain the following code:

[php]
<!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"><jdoc:include type="modules" name="left" /></div>
<div id="content"><jdoc:include type="component" ></div>
<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" />
</div>
<div id="footer"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
[/php]

Now its time to edit templateDetails.xml file, so open it, add the following code:

[php]
<?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>first_template</name>
<creationDate>07/2011</creationDate>
<author>Webs Tutorial</author>
<authorEmail>ntechi@webstutorial.com</authorEmail>
<authorUrl>http://www.webstutorial.com</authorUrl>
<copyright>WebsTutorial</copyright>
<license>webstutorial.com TOS</license>
<version>1.0.0<version>
<description>First 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>
[/php]

I think its quite understandable from the above xml code, we have used this file to pass some information to joomla, like author of template, date created, template name, description etc etc.
We have used files and filename tag to declare the files we have used.
Position tag is used to give position to modules. This is the actual place to declare a position for module in joomla.

Now finally give some looks to your template, so in css>template.css file, add the following code

[php]
<?xml version="1.0" encoding="utf-8">

* {
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;
}
[/php]

So after this edit, save everything and check your website now, it will look something like this:
Joomla Final Layout

Your final layout might differ from mine cause of module position.
But you have successfully created your own Joomla template 1.5
Further just edit the css and give an outstanding looks to your template.

1 comment :

  1. Shishupal Sodha17/12/12 11:58 PM

    hi, This template coversion article is very best and very helpful beginners like me. i want to display page data in div format (By default in Table format) in joomla 1.5 - thnx

    ReplyDelete