How to modify an existing Joomla template to Joomla 3.x template?
Question
I am a beginner in Joomla! I have to upgrade a Joomla 2.5.x version site to the latest version of Joomla. I've checked the compatibility of all the existing components/modules/plugins of version 2.5.19 and they are all compatible in Joomla 3.x. The only problem is the template. I just don't know how to procceed and where to start from to modify it.
This are some of the lines of my templateDetails.xml:
<extension version="2.5" type="template" client="site">
<name>Harpo</name>
<version>1.0.0</version>
...
<files>
<filename>index.php</filename>
<folder>css/</folder>
<folder>images/</folder>
<filename>templateDetails.xml</filename>
<filename>error.php</filename>
</files>
<images>
<filename>template_thumbnail.png</filename>
</images>
...
<positions>
<position>newsflash</position>
<position>hornav</position>
<position>breadcrumbs</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
</positions>
</extension>
And this are some of the lines of my index.php file :
<head>
<link rel="shortcut icon" href="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/images/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html;" />
<link href="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/css/template_css.css" rel="stylesheet" type="text/css" media="all"/>
<!-- <link href="css/template_css.css" rel="stylesheet" type="text/css" media="all"/> -->
<jdoc:include type="head" />
<meta name="verify-v1" content="PynT0gVSXBh484xuIjQakd0YZS+sHAYmOK+CRTa1aJI=" />
<script type="text/javascript" src="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/flashobject.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32944659-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
jQuery.noConflict();
...
...
...
<body>
<div class="out">
<div class="main">
<!--Toparea Start-->
<div class="top">
<div class="logo_space">
<div class="boxlogin"><jdoc:include type="modules" name="user2" /></div>
</div>
<div class="header">
<img src="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/images/img_header.jpg" alt="sfondo_header" align="top" style="float:left;" />
<div id="flash" style="float:right; width:550px; height:132px;"></div>
<script type="text/javascript">
var fo = new FlashObject("<?php
$flashPath = $app->getCfg( 'live_site' )."templates/".$this->template."/flash/animazione.swf";
echo $flashPath;
?>", "Menu", "550", "132", "8", "#FFFFFF", "transparent");
fo.write("flash");
</script>
<!-- <img src="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/images/img_headerright.jpg" alt="sfondo_header" align="top" style="float:right;" width="550" height="132" /> -->
<!-- <div class="boxlogin"></div> -->
</div>
<div class="topmenu">
<?php if ($this->countModules( "top" )) { ?>
<jdoc:include type="modules" name="top" />
<?php } ?>
</div>
</div>
...
...
...
Any suggestions are welcomed!
Solution
Ok having looked at your code, here are a few things.
Firstly, you XML file is fine and doesn't require any changing.
To import jQuery in noConflict mode and ensure it is only done once, you should replace this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
with this:
JHtml::_('jquery.framework'); // this is PHP so wrap it in PHP tags
Once done, you can remove this code: jQuery.noConflict();
To get values from the configuration.php file, don't use $app->getCfg()
as it's deprecated. Instead use, $app->get()
. So in your case, replace this:
$app->getCfg('live_site')
with this
$app->get('live_site');
Other than that, I don't see any other issues with the code.