How To Make A Custom Joomla Template

How To Make a Custom Joomla Template

How To Make A Custom Joomla Template Making a Joomla template is very similar to hand-coding a typical html/css template. However, there are slight changes in the coding and concepts. The main file which is responsible for the output of a Joomla template is index.php. Index.php can be coded between the body tags with plain old div tags. But, you can make it modular by adding tags which can be used to add custom modules. The page which holds the details for module positions is templateDetails.xml. If the name is in templateDetails.xml, you can assign a module the position with Joomla's module manager in the administrator backend.

Stage#1: Joomla Doctype and Head
The top of index.php should have the following code which includes details about the doctype and head tags. The code is shown below.

<?php
defined('_JEXEC') or die('Restricted access');
?>
<!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/<?php echo $this->template; ?>/css/template.css" type="text/css" />

<!--[if IE 6]>
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/ie6.css" type="text/css" />
<![endif]-->

<script type="text/javascript">
function showstuff(){
document.getElementById("submenu").style.visibility="visible";
}
function hidestuff(){
document.getElementById("submenu").style.visibility="hidden";
}
</script>
</head>

Stage#1: The body of index.php
The body of index.php should have the following code which includes div tags for the body of the template.

<body>
<div id="container_1">
<div id="container_2">
<div id="container_3">
<div id="header" style="margin-top:80px; height:auto;width:970px;">
<!-- CUSTOM MENU GOES HERE-->
<div style="inline-block; color:white;">
<ul style="display:block; background-color:#000000; padding:0px;">
<a style="padding:5px 0px 5px 0px;" onmouseout="hidestuff()" onmouseover="showstuff()"

href="../services"><li style="display:inline-block; margin-left:0px; padding:5px;">List 1</a>
<ul id="submenu" style="visibility: hidden; display:block;margin-top:5px; padding-left:0px;

margin-left:0px;  position:absolute;visibility: hidden;">
<a onmouseout="hidestuff()" onmouseover="showstuff()" href="http://example.com/test">
<li style="background-color:blue; margin-top:0px; padding:10px;list-style-type:none;">Drop down

1</li></a>
<a onmouseout="hidestuff()" onmouseover="showstuff()" href="http://example.com">
<li style="background-color:blue; margin-top:0px; padding:10px;list-style-type:none;">Drop down

2</li></a>
</ul>
</li>
<li style="display:inline-block;padding:5px;">List 2</li></ul></div>
</div>
<div style="clear:both;"></div>
<div id="content" style="margin-top:300px;">
<jdoc:include type="component" />
</div>
</div>
<div style="clear:both;"> </div>
</div>
</div>
<div id="bottom">
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
<div id="debug" style="display:none;"><br/><br/>
<jdoc:include type="modules" name="debug" style="xhtml" />
</div>

</body>
</html>

Stage#3: Adding Modules and positions to index.php
The body of index.php can be adjusted to add modules in desired div tags.

The code to add a module looks like this:

<jdoc:include type="modules" name="user3" style="xhtml" />
and
<jdoc:include type="modules" name="footer" style="xhtml" />

Note:
To only use a module if it is enabled on a page, you can use the following code:

<?php if($this->countModules('right')) : ?>

<!-- Add code such as divs here -->

<?php endif; ?>

Stage#4: Adding Modules to templateDetails.xml
To use the module, you need to make sure it exists in the templateDetails.php file.

Here is a list of module positions and how they should be presented within templateDetails.xml

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>top1</position>
<position>user1</position>
<position>user2</position>
<position>footer</position>
<position>debug</position>
</positions>