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.
<?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>
<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>
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; ?>
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>
© 2018 ALL Rights Reserved | Sitemap
Vancouver | North Vancouver | Burnaby | Richmond | Coquitlam | Port Coquitlam | Surrey | Langley | Maple Ridge | Mission | Abbotsford | Kamloops | Kelowna | Victoria | Squamish | Whistler | Pemberton