RokWebify Tutorial - Joomla 1.5 Native

Joomla! 1.5 Native?

Joomla! 1.5 is the next stage in Joomla!'s development and you can find my details at Joomla!. However, all Joomla! templates that where for the current series (1.0x) will not operate on Joomla! 1.5 as standard. You can use the legacy plugin but it is better to convert your 1.0x Joomla! template into 1.5, natively.

The next question is what does Native mean? To put this into context, we need to understand that Joomla! 1.5 offers a vast array of new features in respects to templates which go beyond the limits of the 1.0x series. Therefore, new Joomla! 1.5 templates will harness these features to create an even more powerful template and subsequently, a more powerful website. Native means that the templates designed for the 1.0x series will work as they do at present but in Joomla! 1.5 and without the legacy plugin.

Now that we have grasped the concept of converting to Joomla! 1.5, you will now be shown the necessary steps to convert the RokWebify template, natively. The process is simple with RokWebify and should give you the knowledge for converting more templates, but below are the files we are going to edit:

  1. index.php
  2. templateDetails.xml

Editing the index.php

  • index.php

    Open the index.php file

    The initial step is to edit the index.php. You can use a variety of editing tools to do this but we recommend using Adobe Dreamweaver if you us Windows or TextMate if you are a Mac user. Each are powerful tools to make the process much simpler. It is best to use a code editor tool as described above as certain text editors have a tendancy to cause issues. You can download a free trial for Adobe Dreamweaver at Adobe
  • W3c

    Above the <head> tags

    Once the index.php is opened within your code editor, we will concentrate on editing the section above the </head> tag.

    The first lines of code that you will observe are as follows:
    <?php
    defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
    ?>
    We edit this to resemble the code below
    <?php
    /**
    * @copyright Copyright (C) 2005 - 2007 RocketTheme LLC.
    * @license GNU/GPL
    * This Joomla template is not free - Please read
    http://www.rockettheme.com for more information
    */
    // no direct access
    defined( '_JEXEC' ) or die( 'Restricted index access' );
    ?>
    The Security measure has changed syntax as shown above.


    Proceeding this statement, you will find the following, which is the DOCTYPE which is an important part of the webpage.
    <!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">
    For Joomla! 1.5 templates, we need to edit this in the fashion shown below:
    <!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 ?>" dir="<?php echo $this->direction; ?>">
    This change improves the site as a whole with a focus on international languages and the ability to switch between left-to-right and right-to-left directions easily, such as Arabic.
  • Between the <head> tags

    The next step is to edit the code between the <head>..</head> tags. You will be aware of how cleaner the code is in Joomla! 1.5 with the simple change shown below.
    <?php
    if ( $my->id ) {
    initEditor();
    }
    mosShowHead();
    ?>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    The above code becomes the following which is much leaner than the original
    <jdoc:include ="head" />

    The next stage in the RokWebify template is the area which loads the template's stylesheets and favicon. We convert the following
    <link href="<?php echo $mosConfig_live_site;?>/templates/
    <?php echo $mainframe->getTemplate(); ?>/css/template_css.css"
    rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link href="<?php echo $mosConfig_live_site;?>/templates/ <?php echo $mainframe->getTemplate(); ?>/css/template_ie.css" el="stylesheet" type="text/css" />
    <![endif]-->
    <link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?> /images/favicon.ico" />
    This is edited to
    <link href="templates/<?php echo $this->template ?>/css/template_css.css"
    rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link href="templates/<?php echo $this->template ?>/css/template_ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link rel="shortcut icon" href="images/favicon.ico" />
    Observer how <?php echo $mosConfig_live_site;?> becomes redundant and is dropped and <?php echo $mainframe->getTemplate(); ?> is replaced with <?php echo $this->template ?> which is shorter and cleaner.
  • Index.php links

    We now move onto the main block of the template, the body. This step is again, just syntax changes. The first syntax change is the link for the logo which is defined by
    <a href="<?php echo $mosConfig_live_site;?>" class="nounder">
    <img src="<?php echo $mosConfig_live_site;?>
    /images/blank.png" border="0"
    alt="" id="logo" /></a>
    <?php echo $mosConfig_live_site;?> needs to be change to <?php $this->url ?>. Therefore the new statement is as follows
    <a href="<?php $this->url ?>" class="nounder"><img src="<?php $this->url ?>
    images/blank.png"
    border="0" alt="" id="logo" /></a>
    Do the same for all instances of the code.
  • Module syntax

    The module syntax change is probably the most dramatic. The normal loader for a module in the Joomla! 1.0x series is <?php mosLoadModules('module name', -1); ?> with the name of the module between the ' ' tags followed by a number which is either -3,-2,-1,0 or 1. Joomla! 1.5 takes a differnt approach with using <jdoc:include type="modules" name="module_name" style="option" /> again, there are 5 default options, rounded(-3), xhtml(-2), raw(-1), table(0) and horiz(1). Therefore, we need to change all instances of <?php mosLoadModules('module name', -1); ?> to the Joomla! 1.5 syntax. Below is a list of code changes for RokWebify.
    1. <?php mosLoadModules('top', -1); ?>
      <jdoc:include type="modules" name="top" style="raw" />
    2. <?php mosLoadModules('user3', -1); ?>
      <jdoc:include type="modules" name="user3" style="raw" />
    3. <?php mosLoadModules('user1', -2); ?>
      <jdoc:include type="modules" name="user1" style="xhtml" />
    4. <?php mosLoadModules('user2', -1); ?>
      <jdoc:include type="modules" name="user2" style="xhtml" />
    5. <?php mosLoadModules('inset', -2); ?>
      <jdoc:include type="modules" name="inset" style="xhtml" />
    6. <?php mosLoadModules('right', -2); ?>
      <jdoc:include type="modules" name="right" style="xhtml" />
    7. <?php mosLoadModules('user4', -2); ?>
      <jdoc:include type="modules" name="user4" style="xhtml" />
    8. <?php mosLoadModules('user5', -2); ?>
      <jdoc:include type="modules" name="user5" style="xhtml" />
    9. <?php mosLoadModules('user6', -2); ?>
      <jdoc:include type="modules" name="user6" style="xhtml" />
    10. <?php mosLoadModules('debug', -1); ?>
      <jdoc:include type="modules" name="debug" style="raw" />
    Once that is complete, we need to edit the php code which controls collapsable modules, i.e. <?php if(mosCountModules('user6')) : ?>, this changes to <?php if($this->countModules('user6')) : ?>. In this instance, only mosC changes which is to $this->c. A simple change but there are other more complex formations of the module counter such as <?php if(mosCountModules('user4') or mosCountModules('user5') or mosCountModules('user6')) : ?> which changes to <?php if($this->countModules('user4 or user5 or user6')) : ?>. Below is all the code you the references you need to change and what to replace it with.
    1. <?php if(mosCountModules('user1') or mosCountModules('user2')) : ?>
      <?php if($this->countModules('user1 or user2')) : ?>
    2. <?php if(mosCountModules('user1')) : ?>
      <?php if($this->countModules('user1')) : ?>
    3. <?php if(mosCountModules('user2')) : ?>
      <?php if($this->countModules('user2')) : ?>
    4. <?php if(mosCountModules('right')) : ?>
      <?php if($this->countModules('right')) : ?>
    5. <?php if(mosCountModules('user4') or mosCountModules('user5')
      or mosCountModules('user6')) : ?>
      <?php if($this->countModules('user4 or user5 or user6')) : ?>
    6. <?php if(mosCountModules('user4')) : ?>
      <?php if($this->countModules('user4')) : ?>
    7. <?php if(mosCountModules('user5')) : ?>
      <?php if($this->countModules('user5')) : ?>
    8. <?php if(mosCountModules('user6')) : ?>
      <?php if($this->countModules('user6')) : ?>
  • The Mainbody and Pathway

    The final part of the RokWebify index.php conversion is to alter the syntax which loads the pathway and the mainbody area. In the 1.0x series, the pathway was loaded with and has been changed to <jdoc:include type="modules" name="breadcrumb" style="raw" />. The mainbody where content and components are rendered has been changed from to <jdoc:include type="component" />. Change them accordingly in RokWebify's index.php.

Editing the templateDetails.xml file

index.php The final step in the conversion to Joomla! 1.5 is to edit the template's .xml file, templateDetails.xml. Find <mosinstall version="1.0" type="template"> and change to <install version="1.5" type="template">. As we have just changed the opening tag mosinstall, we must edit the closing tag </mosinstall> to </install>.This is at the very bottom of the file.

This will make the template work in Joomla! 1.5 if you install templates with the FTP option, i.e. upload the extracted folder. You may wish to make some additonally alterations to conform correctly. Locate </files> and add:
<positions>
<position>top</position>
<position>inset</position>
<position>breadcrumbs</position>
<position>right</position>
<position>debug</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>user6</position>
</positions>
Completed 1.5 Native RokWebify Template Available!
Download the RokWebify Joomla 1.5 template now
 
Copyright © 2007 - RocketTheme, LLC. - All Rights Reserved.
This material is property of RocketTheme, LLC. Copying or replicating this content is strictly prohibited without permission of RocketTheme, LLC.
RocketTheme Joomla Templates