[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Joomla! 1.5 Template Reference: Part 1, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
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:
|
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"> <h3>Title</h3> Content </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" |
|
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> <table cellpadding="0" |
|
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. |
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:
- http://docs.joomla.org/JDocumentHTML/countModules
- http://docs.joomla.org/Operators_for_use_with_the_countModules_function
>> 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.
Post new comment