template conversion

How to Convert Solarflare II to Joomla! 1.5

Submitted by prophead on 16 February, 2009 - 10:58

solarflare.png

This tutorial provides instructions for converting a Joomla! 1.0.x template to run in Joomla! 1.5 native mode.  The classic rhuk Solarflare II template is used to illustrate the steps one must take to accomplish this task.  Rhuk's Solarflare II is one of the most popular templates ever for Joomla! and before that for Mambo.  It was included in the initial Joomla! 1.0.0 release and before that with various releases of Mambo.  I do not recall exactly when the initial version of Solarflare II first appeared.  The version I used as baseline for conversion to Joomla 1.5 is dated November 2, 2004.  A very telling tribute to its success is the many sites that still use it to this day and the number of "forks," or variations that one sees powering a ubiquitous and diverse set of sites.  The last time I did a Google search on "rhuk Solarflare," I got about 78.5K hits.  Pretty impressive!

Rhuk was a member of the team that initiated the Joomla! Project and a major contributor to the Joomla! 1.5 development effort.  He is also the founder of RocketTheme.

Scope

This tutorial covers the steps one must take to allow the following Solarflare II files to operate in Joomla! 1.5 native mode:

  • index.php
  • templateDetails.xml
  • template_css.css

Terminology

The terminology used throughout this tutorial may not be as precise as one would like.  For examples all of template-related code snippets are referred to as "template constructs," or simply as "constructs."  This is done in hopes of enhancing readability and understanding, and keeping the focus on the subject at hand.

Getting started

Template conversion can be accomplished by common folk.  One really does not have to be a 32nd Degree PHP Wizard or be up close and personal with each and every Joomla! 1.5 API .  However, if you have little or no prior experience working with Joomla! templates, you may want to take a quick look at this and use it as a reference as you work your way through the tutorial.  To see a list of in-depth template-related documentation, take a look here.

The index.php file

The index.php file controls both the layout and content of the site.  Every page that Joomla! sends to the browser is "encapsulated" within the index.php framework.  The layout and content of each "page" varies as a function of index.php's control logic, with the presentation details being controlled for the most part by the contents of the template_css.css file.

The first order of business is to determine just what needs to be changed in the 1.0.x version of the template's index.php file.  The Joomla! 1.0.x Solarflare II index.php file is listed below.  The statements that must be replaced are highlighted in Red.

rhuk Solarflare II index.php file for Joomla! 1.0.x


<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to separate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!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">

<head>

<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>


<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>"/>
<link href="<?php echo $mosConfig_live_site;?>
/templates/rhuk_solarflare_ii/css/template_css.css"
rel="stylesheet" type="text/css"/>

<!--
script to determine which div layout to use based on module configuration
-->
<?php
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
}
elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
}
elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}
//right based combos
if ( mosCountModules( 'right' ) and

( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>
</head>

<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="808">
<tr>
<td class="outline">
<div id="pathway_outer">
<div id="pathway_inner">
<div id="pathway_text">
<?php mosPathWay(); ?>
</div>
<div id="buttons">
<?php mosLoadModules ( 'user3', -1); ?>
</div>
</div>
</div>
<div id="search_outer">
<div id="search_inner">
<?php mosLoadModules ( 'user4', -1 ); ?>
</div>
</div><\
div class="clr">
</div>
<div id="header_outer">
<div id="header"> 
</div>
<div id="top_outer">
<div id="top_inner">
<?php if ( mosCountModules( 'top' ) ) {
mosLoadModules ( 'top' ); }
else { ?>
<span class="error">Top Module Empty</span>
<?php } ?>
</div>
</div>
</div>
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left' ); ?>
</div>
</div>
<div id="content_outer">
<div id="content_inner">
<?php if ( mosCountModules ('banner') ) { ?>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<tr>
<td>
<div id="banner_inner">
<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement. png"
alt="advertisement. png, 0 kB" title="advertisement" border="0" height="8" width="468"/>
<br />
<?php mosLoadModules( 'banner', -1 ); ?>
<br />
</div>
<div id="powered#ce3131by_inner">
<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/
images/powered_by.png"
alt="powered_by.png, 1 kB" title="powered_by" border="0" height="68" width="165"/>
<br/>
</div>
</td>
</tr>
</table>
<?php } ?>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<tr valign="top">
<td width="99%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<?php if ($colspan > 0) { ?>
<tr valign="top">
<?php if ( $user1 > 0 ) { ?>
<td width="50%"> class="user1_inner">
<?php mosLoadModules( 'user1' ); ?>
</div>
<div>
</td>
<?php } if ( $colspan == 3) { ?>
<td width="2">
<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt=""
title="spacer"
border="0" height="10" width="2"/>
</td>
<?php } if ( $user2 > 0 ) { ?>
<td width="50%">
<div class="user2_inner">
<?php mosLoadModules ( 'user2' ); ?>
</div>
</td>
<?php } ?>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png"
alt="" title="spacer" border="0" height="2" width="100"/>
<br/>
</td>
</tr>
<?php } ?>
<tr>
<td colspan="<?php echo $colspan; ?>" class="body_outer">
<?php mosMainBody(); ?>
</td>
</tr>
</table>
</td>
<?php if ( $right > 0 ) { ?>
<td>
<div id="right_outer">
<div id="right_inner">
<?php mosLoadModules ( 'right' ); ?>
</div>
</div>
</td>
<?php } ?>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<div style="text-align: center;">
</div>
<?php
include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>

Converting the Prolog and HTML Statement

The first update is applied to the Prolog and HTML statement .  Since the red text is old news, we will not bother to explain what all this means for Joomla 1.0.x  We simply delete it:


<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to separate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!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">

And replace it with this:


<?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; ?>" dir="<?php echo $this->direction; ?>" >

What does all this stuff do?  Well it does this:

  • _JEXEC ensures that index.php can only be invoked by Joomla! internals, which is a good thing security-wise
  • inserts a DOCTYPE statement so browsers can determine the xhtml version and, parse the incoming data accordingly and render the page on the display
  • inserts an html statement and tells the browser the page is using xHTML 1.0 markup and what language the input is using (i.e., English, French, German, Arabic, Hebrew, Chinese, ....) and whether the text reads left-to-right or right-to-left.

An example the generated code is shown below.  If you look at the source of the page that is sent to your browser, this is what you will see:

<!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="en-gb" lang="en-gb" dir="ltr">

Converting the Header Section

First, we delete this:


<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>"/>
<link href="<?php echo $mosConfig_live_site;?>
/templates/rhuk_solarflare_ii/css/template_css.css"
rel="stylesheet" type="text/css"/>

And replace it with this:


<jdoc:include type="head" />
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>
/templates/<?php echo $this->template; ?>/css/template_css.css" />

The <jdoc:include> statement generates:

  • a <base href> statement that tells your browser the base URL of the page
  • a <meta> statement that tells your browser what character encoding the page is using (for Joomla! 1.5 UTF-8 encoding is used)
  • a <meta> statement that tells search engine "robots" what to do
  • <meta> statements that tell the world your site is powered by Joomla 1.5
  • a <title> statement containing "Welcome to the Frontpage"
  • <link> statements that tell the world what news feed protocols your site supports (the Joomla! 1.5 defaults are RSS 2.0 and Atom 1.0)
  • <script> statements that load the Javascripts used by the Joomla! 1.5 core (mootools.js and caption.js)
  • a <link> statement that loads the template's css file (template_css.css).

And here is an example of the generated code:

<base href="http://rc.hrpr.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Welcome to the Frontpage>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="/templates/rhuk_solarflare_ii/css/template_css.css" />

Solarflare II has a custom PHP script in the header section for determining the layout as a function of module existence and placement.  Since the script uses some Joomla! template constructs, it needs to be modified.

This is done by replacing the red text shown below:


<!--
script to determine which div layout to use based on module configuration
-->
<?php
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
}
elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
}
elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}
//right based combos
if ( mosCountModules( 'right' ) and

( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>

with the following green text:


<!-- script to determine which div layout to use based on module configuration -->
<?php
$collspan_offset = ( $this->countModules( 'right' ) + $this->countModules( 'user2' ) ) ? 2 : 1;
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
//user combos
if ( $this->countModules( 'user1' ) + $this->countModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
} elseif ( $this->countModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
} elseif ( $this->countModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}
//right based combos
if ( $this->countModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>

countModules() is one of the key 1.5 template constructs.  It counts the number of active modules contained in "module positions."  It is typically used in PHP "if statements" to control logic flow and ultimately, what gets rendered on your display when certain conditions are evaluated as true (active modules assigned to the positron) or false (positron contains no active modules).

Before we proceed to the Body section a bit of explanation about one of the significant differences between 1.0.x and 1.5 is probably in order.  In 1.0.x, arguments were passed by value, e.g., mosCountModules( 'user2' ) returns the actual module count.  In 1.5, arguments are passed by reference, e.g., $this->countModules('user2') is a pointer to the location containing module count.

Note that this particular PHP script does not generate any xHTML statements.

Convertng the Body Section

A number of the common template constructs are repeated a number of times throughout the body.  One example of each is shown in the following text.

The first change is to the statement that generates the breadcrumb trail.  We delete this statement:


<?php mosPathWay(); ?>

and replace with this statement:


<jdoc:include type="modules" name="breadcrumb" style="none" />

This <jdoc:include> construct displays the code generated by the module assigned to the "breadcrumb" module position, which in the Solarflare II template is located at the top left of the page.  The style parameter value is set to "none", which tells the Joomla! core not to bother encapsulating the output in shiny "chrome," which is a fancy way of saying do not add any <div>, <table>, <ul>, or whatever else constructs.  Traditionally only one module is assigned to this positron.  It is left as an exercise for the reader to figure out which one!

And here is an example of the generated code for the front (Home) page:


<span class="breadcrumbs pathway">
<a href="http://rc.hrpr.com/" class="pathway">Home</a> <img src="/templates/rhuk_solarflare_ii/images/arrow.png"
alt="" /> Joomla! Overview</span>

Next we delete this:


<?php mosLoadModules ( 'user3', -1); ?>

and replace it with this:


<jdoc:include type="modules" name="user3" style="table" />

This <jdoc:include> construct displays the code generated by the module assigned to the "user3" module position, which in the Solarflare II template contains the top horizontal menu and is located at the top right of the page.  The style parameter value is set to "table", which tells the Joomla! core to encapsulate the output in a <table> construct.

And here is an example of the generated code:


<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>
<ul id="mainlevel-nav"> <li><a href="/news.html" class="mainlevel-nav" >News</a></li>
<li><a href="/features.html" class="mainlevel-nav" >Features</a></li>
<li><a href="/about-joomla.html" class="mainlevel-nav" >About Joomla!</a></li>
</ul>

</td>
</tr>
</table>

The are more instances of <jdoc:include> in the body section; however, they are identical to those discussed above, with the exception of the differing names of the remaining SolarFlare II module positions.  The same holds for the countModules() constructs, which were discussed previously in Converting the Header Section.  Therefore, we will forego any further discussion of these constructs.

Next delete this:


<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement. png"
alt="advertisement. png, 0 kB" title="advertisement" border="0" height="8" width="468"/>
<br />

and replace it with this:


<img src="<?php echo JURI::base();
?>templates/rhuk_solarflare_ii/images/advertisement. png"
alt="advertisement. png, 0 kB" title="advertisement" border="0" height="8" width="468"/>

The JURI::base() construct returns the site's fully qualified URL, e.g., http://rc.hrpr.com/.  It is important to note that the fully qualified URL has a "/" as its last character.  It is left to the reader to determine why this is important!

Here is an example of the code generated by the JURI::base() construct:


<img src="http://rc.hrpr.com/templates/rhuk_solarflare_ii/images/advertisement. png"
alt="advertisement. png, 0 kB" title="advertisement" border="0" height="8" width="468"/>

Note: One does not have to use the fully qualified URL.  An alternative construct would look something like this:


<img src="templates/<?php echo $this->template; ?>/images/advertisement. png" />

This construct generates a URL that is relative to the site's base URL, e.g., /templates/rhuk_solarflare_ii/images/advertisement. png.

And now you probably want to know why JURI::base() was used instead of the alternative construct.  The answer is that the guy who originally converted Solarflare II to run in Joomla! 1.5 native mode wanted to keep the end result as close as possible to rhuk's original code.  Hint: Take a look at the Joomla! 1.0.x code that was replaced.

The are more instances of <JURI::base()> in the body section; however, they are identical to those discussed above.  Therefore, we will forego any further discussion of this construct.

Almost done.  Next we have to convert the footer, so delete this:


<?php
include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>

and replace it with this:


<jdoc:include type="modules" name="footer" style="none" />

This <jdoc:include> construct loads any active modules assigned to the footer position.

We need to add some debug capability, so delete this:


include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>

and replace it with yet one more <jdoc:include>:


<jdoc:include type="modules" name="debug" style="none" />

And finally, we need to add yet another <jdoc:include> immediately following the <body> statement that handles information and error messages generated by the Joomla! 1.5 core:



Assuming the author did not make any typos or omissions (which is highly likely), we now have an index.php file for the Solarflare II template that operates in Joomla! 1.5 native mode.

rhuk Solarflare II index.php file for Joomla! 1.5


<?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; ?>" dir="<?php echo $this->direction; ?>" >

<head>

<jdoc:include type="head" />
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>
/templates/<?php echo $this->template; ?>/css/template_css.css" />

<!-- script to determine which div layout to use based on module configuration -->
<?php
$collspan_offset = ( $this->countModules( 'right' ) + $this->countModules( 'user2' ) ) ? 2 : 1;
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
//user combos
if ( $this->countModules( 'user1' ) + $this->countModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
} elseif ( $this->countModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
} elseif ( $this->countModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}
//right based combos
if ( $this->countModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>
</head>
<body>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="808">
<tr>
<td class="outline">
<div id="pathway_outer">
<div id="pathway_inner">
<div id="pathway_text">
<jdoc:include type="modules" name="breadcrumb" style="none" />

</div>
<div id="buttons">
<jdoc:include type="modules" name="user3" style="table" />
</div>
</div>
</div>
<div id="search_outer">
<div id="search_inner">
<jdoc:include type="modules" name="user4" style="table" />
</div>
</div>
<div class="clr"></div>
<div id="header_outer">
<div id="header">
 
</div>
<div id="top_outer">
<div id="top_inner">
<?php if ( $this->countModules( 'top' ) ) { ?>
<jdoc:include type="modules" name="top" style="table" />
<?php } else { ?>

<span class="error">Top Module Empty</span>
<?php } ?>

</div>
</div>
</div>
<div id="left_outer">
<div id="left_inner">
<jdoc:include type="modules" name="left" style="table" />
</div>
</div>
<div id="content_outer">
<div id="content_inner">
<?php
if ( $this->countModules ('banner') ) { ?>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<tr>
<td>
<div id="banner_inner" style="width:168px;">
<img src="<?php echo JURI::base(); ?>/templates/rhuk_solarflare_ii/images/advertisement. png"
alt="advertisement. png, 0 kB" title="advertisement" border="0" height="8" width="468"/><br />
<jdoc:include type="modules" name="banner" style="table" />
</div>
</td>
</tr>
</table>
<?php } ?>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<tr valign="top">
<td width="99%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<?php if ($colspan > 0) { ?>
<tr valign="top">
<?php if ( $user1 > 0 ) { ?>
<td width="50%">
<div class="user1_inner">
<jdoc:include type="modules" name="user1" style="table" />
</div>
</td>
<?php } if ( $colspan == 3) { ?>
<td width="2">
<img src="<?php echo JURI::base(); ?>/templates/rhuk_solarflare_ii/images/spacer .png" alt="" title="spacer"
border="0" height="10" width="2"/>

</td>
<?php } if ( $user2 > 0 ) { ?>
<td width="50%">
<div class="user2_inner">
<jdoc:include type="modules" name="user2" style="table" />
</div>
</td>
<?php } ?>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<img src="<?php echo JURI::base(); ?>/templates/rhuk_solarflare_ii/images/spacer .png" alt=""
title="spacer" border="0" height="2" width="100"/><br />

</td>
</tr>
<?php } ?>
<tr>
<td colspan="<?php echo $colspan; ?>" class="body_outer">
<jdoc:include type="component" />
</td>
</tr>
</table>
</td>
<?php if ( $right > 0 ) { ?>
<td>
<div id="right_outer">
<div id="right_inner">
<jdoc:include type="modules" name="right" style="table" />
</div>
</div>
</td>
<?php } ?>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>

</div>
<div class="credits" align="center">
<jdoc:include type="modules" name="footer" style="none" />
</div>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

The templateDetails.xml File

The templateDetails.xml file holds a variety of meta-data used by the Template Manager during installation and ongoing maintenance.  Joomla! 1.5 introduced substantial changes in the content and format of the templateDetails.xml file, so the recommeded approach here is to delete the entire 1.0.x version:



<?xml version="1.0" encoding="iso-8859-1" ?>

<mosinstall type="template" version="4.5.2">
<name>rhuk_solarflare_ii</name>

<creationDate>11/02/04</creationDate>

<author>rhuk</author>

<copyright>
GNU/GPL</copyright>

<authorUrl>http://www.mambodev.com</authorUrl>

<authorEmail>rhuk@rhuk.net</authorEmail>
<version>2.01</version>

<description>SolarFlare II is a simple and stylish template. The clean design of this template makes it very lightweight and fast. This is a significant upgrade for the original SolarFlare template in that is has a completely revised layout that uses an alternate box model hack that makes it easier to modify. Also a table has been introduced in the main content area that better constricts layout causing less problems with 'problematic' components. New headers and menu elements give this template a 'fresher' look.</description>

<files>
<filename>index.php</filename>

<filename>template_thumbnail.png</filename>

</files>
<images>
<filename>images/advertisement.png</filename>

<filename>images/arrow.png</filename>

<filename>images/button_bg.png</filename>

<filename>images/contenthead.png</filename>

<filename>images/indent1.png</filename>

<filename>images/indent2.png</filename>

<filename>images/indent3.png</filename>

<filename>images/indent4.png</filename>

<filename>images/header_short.jpg</filename>

<filename>images/menu_bg.png</filename>

<filename>images/powered_by.png</filename>

<filename>images/spacer.png</filename>

<filename>images/subhead_bg.png</filename>

<filename>images/title_back.png</filename>

</images>
<css>
<filename>css/template_css.css</filename>

</css>
</mosinstall>

and replace it with the following:



<?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" client="site">
<name>
rhuk_solarflare_ii</name>

<creationDate>2008-01-16</creationDate>

<author>rhuk - Joomla! 1.5! modifications by HarryB</author>

<authorUrl>http://www.rockettheme.com</authorUrl>

<authorEmail>author@some-email.com</authorEmail>
<version>1.5 Native</version>

<copyright>GNU/GPL</copyright>

<description>SolarFlare II is a simple and stylish template. The clean design of this template makes it very lightweight and fast. This is a significant upgrade for the original SolarFlare template in that is has a completely revised layout that uses an alternate box model hack that makes it easier to modify. Also a table has been introduced in the main content area that better constricts layout causing less problems with 'problematic' components. New headers and menu elements give this template a 'fresher' look. NOTE: updated for use with Joomal! 1.5 by HarryB on 16 January 2008.</description>

<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
<filename>images/advertisement.png</filename>
<filename>images/arrow.png</filename>
<filename>images/button_bg.png</filename>
<filename>images/contenthead.png</filename>
<filename>images/indent1.png</filename>
<filename>images/indent2.png</filename>
<filename>images/indent3.png</filename>
<filename>images/indent4.png</filename>
<filename>images/header_short.jpg</filename>
<filename>images/menu_bg.png</filename>
<filename>images/powered_by.png</filename>
<filename>images/spacer.png</filename>
<filename>images/subhead_bg.png</filename>
<filename>images/title_back.png</filename>
<filename>css/template_css.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>bottom</position>
<position>banner</position>
<position>advert1</position>
<position>footer</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
<position>user10</position>
<position>debug</position>
<position>syndicate</position>
<position>breadcrumb</position>
</positions>
</install>

The templateDetails.xml file delineates the files and module positions contained in the template.  There is also another construct called <parameter> that may be included in templateDetails.xml.  This is used to define template confiuguration parameters (if any).

Note: although Solarflare II uses only the user1 through user4 module positions, user6 through user10 are included for those who wish to modify the basic template and require additional module positions.

The template_css.css File

The template_css.css file, as the name implies, contains alll of the basic styling used by Solarflare II.  Unfortunately, I don't recall all the changes I made, but I do remember that they were few and far between, and mostly to ensure that the CSS passed W3C validation testing.

The End

You can view the reference site for the Joomla! 1.5 native rhuk Solarflare II template here.  There is a link on the front page to the latest version.  If that link happens to be broken, you can also download the template from here, provided you don't mind linking to a site that does not use Joomla! ;-)

At this tme, I really don't know how many sites are using the Joomla! 1.5 version of rhuk Solarflare II other than my reference site at rc.hrpr.com and the Arden Theatre site.

That's all there is my friends.  No xHTML, PHP or Joomla! 1.5 template-related constructs were overtly harmed during production of this tutorial.

Tags: 
Joomla! 1.5
Solarflare II
template conversion