Joomla! 1.5 Template Reference: Part 1

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Template Design

Joomla! 1.5 Template Design — Save 50%

Create your own professional-quality templates with this fast, friendly guide

$26.99    $13.50
by Tessa Blakeley Silver | July 2009 | Joomla! Content Management Open Source

In this article by Tessa Blakeley Silver, we'll go over jdoc tags for templates, the standard CSS class and id rules that Joomla! outputs, how module and template override files are organized, as well as useful Joomla! PHP code you can use in your template to aid in making it more user-friendly and dynamic. Of course, wherever possible, we'll let get to know the relevant Joomla! documentation links to bookmark, to give you in-depth detail and save you a little time searching through the Joomla! documentation site and the Web.

 

Take note that we'll see how these Joomla! 1.5 items differ in use from a Joomla! 1.0 template, so that those of you looking to update a Joomla! 1.0 template to 1.5 can quickly get a handle on what to update in your templates and what new features to add.

Consider this article your "cheat sheet".

Jdoc include tags

The jdoc include tags are new to Joomla! 1.5 templates. Previously in Joomla! 1.0, more complicated, abstract PHP code, originally created for Mambo, was used. The jdoc tags are much cleaner, visually make sense (no more guessing what attribute values like "-3" mean), and, thus, are much easier to remember.

Site header information tag

This is pretty simple: the tag outputs all the appropriate meta tags and header information that corresponds to your site and each individual page:

<jdoc:include type="head" />

Joomla! 1.0 to 1.5 conversion

If you're converting a 1.0 template to 1.5, you'll replace this PHP function in your 1.0 template's header with the above jdoc tag:

<head>
...
<?php mosShowHead(); ?>
...

The component include tag

Wherever you place this include, all component content will appear (from articles to poll results to contact forms, and so on):

<jdoc:include type="component" />

Joomla! 1.0 to 1.5 conversion

The 1.0 equivalent of this tag is the mosMainBody function. You'll replace this PHP function with the above jdoc include:

<?php mosMainBody(); ?>

Module position tags

With module tags, we have a few options to work with. So, we can control what modules load into the area, thus assigning their positions as well as what style to output the module content with:

<jdoc:include type="modules" name="position" style="styleName" />

Module position styles

In the jdoc include example above, within the style attribute, you can place one of the following six style names to various effect:

Joomla! 1.5 Template Design Create your own professional-quality templates with this fast, friendly guide
Published: June 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Style name

Effect

     Sample

none or raw

Modules are displayed in plain text, without titles

    Content

xhtml

Modules are displayed wrapped in a single <div> tag, with titles in <h3> header tags. (This is preferred for most applications of Joomla.)

<div class="moduletable">

<h3>Title</h3>

Content

</div>

rounded

Modules are displayed wrapped in several <div> tags with titles in <h3> header tags, allowing for more complex CSS styling, such as the container techniques or applying stretchable, rounded corners.

<div class="module">
<div>
<div>
<div>

<h3>Title</h3>

Content

</div>
</div>
</div>
</div>

table

Modules are displayed in a table with a single row column. This is also the default setting. You'll never really need to use it.

<table class="moduletable"
cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<th>Title</th>
</tr>
<tr>
<td>Content</td>
</tr>
</tbody>
</table>

horiz

Modules are again displayed in a table with a multiple column rows, giving it the effect of being displayed horizontally, rather than vertically like the default.

<table>
<tbody>
<tr>
<td align="top">
<table cellpadding="0"
cellspacing="0"
class="moduletable">
<tbody>
<tr>
<th valign="top">Title</th>
</tr>
<tr>
<td>Content</td>
</tr>
</tbody>
</table>
</td>
<!--next table cell starts-
->
<td align="top">

<table cellpadding="0"
cellspacing="0"
class="moduletable">
<tbody>
<tr>
<th valign="top">Title</th>
</tr>
<tr>
<td>Content</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

outline

This is used to preview modules and help aid in module position names

In your Administration panel, go to Extenstions | Template Manager | yourTemplate | Preview for a sample of this output.

 

 

Joomla! 1.5 Template Design Create your own professional-quality templates with this fast, friendly guide
Published: June 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

For a more complete listing of what's available in your template's object array, check out the Joomla! documentation: http://docs.joomla.org/Objects%2C_methods_and_properties_available_from_your_template.

You'll also find the countModules method useful for helping you set up dynamic layouts for collapsible columns.

$this->countModules('positionName'));

You'd replace positionName with the name of the module position you want to count the modules in; that is, right, user1, left, footer, and so on.

For more information on the countModules method, check out these links in the Joomla! documentation:

>> Continue Reading Joomla! 1.5 Template Reference: Part 2

 

[ 1 | 2 ]

About the Author :


Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Books From Packt

Drupal 6 Content Administration
Drupal 6 Content Administration

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Plone 3 Theming
Plone 3 Theming

MODx Web Development
MODx Web Development

Magento: Beginner's Guide
Magento: Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
G
N
9
u
y
X
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software