Joomla! 1.5

How to Convert Solarflare II to Joomla! 1.5

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! ...read more about How to Convert Solarflare II to Joomla! 1.5

Joomla! 1.5 Templates - index.php file

The following is an illustrative example of an index.php file for a Joomla! 1.5 template.  It is based on an actual working index.php file compatible with Joomla! 1.5 Production/Stable, 22 January 2008.

<?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"/>
</head>
<body>
<div id="bigbox"> <!-- big box -->
<div id="pathbox">
 <jdoc:include type="modules" name="breadcrumb" style="none"/>
</div> <!-- end pathway box -->
<div id="topheader">
<div>
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/logo.png" class="logo" title=" A Joomla! 1.5 Test Site" alt=" A Joomla! 1.5 Test Site"/>
</div>
<div id="searchpos">
<jdoc:include type="modules" name="search" style="none"/>
</div> <!-- end searchpos -->
<div id="datepos">
<div class="date">
<?php echo strftime('%A, %d %B %Y');?>
</div>
</div> <!-- end datepos -->
</div> <!-- end topheader -->
<div id="top_hz_menubox"><jdoc:include type="modules" name="user1" style="none"/>
</div>
<?php if($this->countModules('top')) : ?>
<jdoc:include type="modules" name="top" style="xhtml"/>
<?php endif; ?>
<div id="leftbox"> <!--left-->
<jdoc:include type="modules" name="left" style="xhtml"/>
</div> <!--end leftbox-->
<?php $menu = &JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) : ?>
<!-- do three-column front page style -->
<div id="rightbox"> <!--right-->
<jdoc:include type="modules" name="right" style="xhtml"/>
</div> <!-- close rightbox -->
<div id="centerboxfp">
<?php else : ?><!-- not front page, do two-column style -->
<div id="centerbox">
<?php endif; ?>
<div id="middlebox"> <!-- middle -->
<jdoc:include type="component"/>
</div> <!-- close middlebox -->
<?php if($this->countModules('bottom and advert1')) : ?>
<div id="bottombox"> <!--bottom-->
<jdoc:include type="modules" name="bottom" style="none"/>
<jdoc:include type="modules" name="advert1" style="xmthl"/>
</div> <!--close bottombox -->
<?php endif; ?>
</div> <!--close centerboxfp or centerbox-->
<div align="center" id="footerbox"><?php if($this->countModules('banner')) : ?> <div align="center"><jdoc:include type="modules" name="banner" style="xhtml"/> </div>
<?php endif; ?>
<div class="pagestats">
· Powered by <a href="http://www.joomla.org" target="_blank">Joomla</a>, a CMS released under the GNU/GPL License ·
Original content and layout Copyright © 2003 - <?php echo date('Y'); ?>, John Doe, All Rights Reserved.
<a href="javascript: scroll(0,0)" class="topbutton">Top</a><br /><br />
</div> <!-- close pagestats -->
</div> <!-- close footerbox-->
</div> <!-- close bigbox -->
<?php if($this->countModules('user8')) : ?>
<div id="bottom_hz_menubox">
<jdoc:include type="modules" name="user8" style="none"/>
</div>
<?php endif; ?>
</body>
</html>

Joomla! 1.5 Templates - CSS Classes and IDs

The template_css.css file contains the Cascading Style Sheet (CSS) used in conjunction with the index.php file, the Joomla! functions that generate xHTML code for core components, modules and plugins, and,in many cases, third-party extensions.  The subsequent text discusses CSS in the context of its role in Joomla! 1.5 .  It assumes that the reader is "CSS-Literate."  If you are not familiar with CSS and wish to learn something about it, I recommend you do a Google on "CSS" ... you will find more on this subject than you can read in a lifetime.

Joomla! 1.5, like its predecessors, has a set of default CSS classes and ids that it uses when rendering the standard views.  One significant new feature is that a "suffix" can be defined for just about every CSS class recognized by the Joomla! 1.5 core.  Joomla! 1.0.x modules have had this feature for quite a while now and in Joomla! 1.5, it has been extended to cover the general case.  Use of suffixes provides the ability to assign different styling on a per-page or per-module basis.

  • Default CSS classes – this is a PDF file containing a list of CSS classes generated by the Joomla! 1.5 core
  • Default CSS ids – this is a PDF file containing a list of Joomla! 1.5 CSS ids generated by the Joomla! 1.5 core

After reading the above, those familiar with the Joomla! 1.0.x series are probably thinking "Big deal, nothing new here!"  Not true!   In Joomla! 1.0.x, although it was not widely advertised, one could override the default content view.  In Joomla! 1.5, this capability has been extended to allow custom views based on individual content types (e.g., articles, newsfeeds, weblinks, etc.).  And, in doing so, one can also define custom CSS classes for use in lieu of the defaults.  And, if so inclined, replace the default table-based layout structures with div-based layouts.

Pages