You are on page 1of 20

Rapid Template Development with Joomla!

, YUI CSS & jQuery 1 of 20

Rapid Template Development with


Joomla!, YUI CSS & jQuery

Introduction to Frameworks 2
What is a framework 2
Types of frameworks 2
Proʼs & Cons of using Frameworks 2
Examples of things that can be abstracted 3
CSS Frameworks 3
Yahoo User Interface (YUI) 3
About YUI Library 3
Reset 3
Fonts 4
Fonts CSS: 4
Base (optional) 4
Grid 4
Template Presets 5
Source Ordering 5
Nested Grids 6
YUI Resources: 7
Progressive Enhancement 8
Progressive Enhancement vs Graceful Degradation 8
Intro to jQuery 9
What is jQuery (taken from the jQuery website): 9
Using jQuery with other javascript libraries: 10
Document Ready vs Window Onload 11
Progressive Enhancement with jQuery in Joomla! Templating 12
Example 1.) Enhance your sidebar menu with simple toggle functions. 12
Example 2.) Add “first” & “last” classes to sidebar modules. 12
Example 3.) Add input classes based on type. 12
Example 4.) Remove last .article_separator 13
Example 5.) Add alternating classes to table rows: 13
Example 6.) Assign images a class based on their alignment: 13
Example 7.) Add a class to first paragraphs on article pages: 13
jQuery Resources 14
Books: 14
Websites: 14
Templating in Joomla! 1.5 15
Template Overrides 15
Module Chromes 15
Taking advantage of Joomla! 1.5ʼs built in Split Menu 18
Removing Mootools from the header of your Joomla! 1.5 template. 18
Template Parameters 19

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 1 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 2 of 20

Introduction to Frameworks
What is a framework
“A framework can be defined as a set of tools, libraries, conventions & best practices, that
attempt to abstract routine task intro generic modules that can be reused.

The goal behind using a framework is reduce time spent on repetitive tasks, allowing the
designer or developer to focus on tasks that are unique to a given project, rather than
reinventing the wheel each time around.” [Framework For Designers, by Jeff Croft]

Types of frameworks
✤ CSS Frameworks
✤ Javascript Frameworks
✤ PHP Frameworks
✤ Content Management Frameworks
✤ Web Application Frameworks

Proʼs & Cons of using Frameworks


Pros:
✤ You increase your productivity and avoid common mistakes.
✤ You normalize your code/class base.
✤ You have a better workflow within a team.
✤ You gain an optimal browser-compatibility.
✤ You have a clean, well-structured and complete code.
✤ Uniformity within teams & projects
✤ Reduce time spent on repetitive tasks
✤ Rapid development
✤ Micro format style naming system
✤ Let your content dictate the layout vs the template
✤ Flexibility
✤ Built for growth

Cons:
✤ You need time to fully understand the framework.
✤ You need a close familiarity with your codeʼs architecture.
✤ You might inherit someoneʼs bugs or mistakes.
✤ You develop sites upon a framework, not upon the solid knowledge of CSS.
✤ You get a bloated source code.
✤ CSS can not be framed semantically.
✤ Ignoring the uniqueness of your projects.

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 2 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 3 of 20

Examples of things that can be abstracted


✤ Browser Resets
✤ Base Typography
✤ Basic styles for forms
✤ Grids
✤ Generic reusable classes

CSS Frameworks
Whether you develop sites as a hobby, or a freelancer or part of a web development team,
there is no doubt in my mind that you can benefit from abstracting common css rules from
your development process. When we first embarked on our mission to develop our own
internal framework, we were amazed at the amount of things we do on a daily basis can
be reused for all of our new projects. By drastically cutting down our development time, we
are now able to focus on the things that make each project unique.

Not only have we managed to reduce the time spent on repetitive tasks, but we also have
a solid base to start from and are able to continuously develop and improve.

Yahoo User Interface (YUI)


About YUI Library
“The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in
JavaScript, for building richly interactive web applications using techniques such as DOM
scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.
All components in the YUI Library have been released as open source under a BSD
license and are free for all uses.”

So lets recap, YUI is essentially a javascript library of reusable utilities and controls that
are provided with the aim to reduce the time that developers spend on any given project.

The part that we are going to focus on however, is YUI CSS. The css components of YUI
library consist of reset.css, fonts.css, grid,css and the optional base.css. Read on for
descriptions on each.

Reset
“The foundational YUI Reset CSS file removes and neutralizes the inconsistent default
styling of HTML elements, creating a level playing field across A-grade browsers and
providing a sound foundation upon which you can explicitly declare your intentions.”

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 3 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 4 of 20

In its most basic form, all that reset.css is doing is normalizing the default styling for all the
elements on your page. The reason this is needed is that each browser has its own way of
rendering / styling html elements. From a designer or developers point of view, the
reset.css just puts everything on an even playing field and allows you to have a solid
foundation to work from.

Fonts
“The foundational YUI Fonts CSS file offers cross-browser typographical normalization and
control.”

Fonts CSS:
✤ Offers full A-grade browser support.
✤ Provides consistent font sizing and line-height.
✤ Provides appropriate cross-OS font-family degradation paths.
✤ Supports user-driven font-size adjustment in the browser, including cross-browser
consistency for adjusted sizes.
✤ Works in both "Quirks Mode" and "Standards Mode."

So like with the reset.css, the aim of the fonts.css is to have consistency with how
typographical elements used in your site are displayed in different browsers.

Base (optional)
Base is an optional CSS file that compliments YUI's core CSS foundation (Reset, Fonts,
and Grids). While Reset removes and neutralizes the inconsistent default styling of HTML
elements, Base applies a consistent style foundation for common HTML elements across
A-grade browsers.

The base.css reapplies styling to the typographical elements that you removed with the
reset.css. It is a good starting point for your own typographic styling, as it includes
elements that are often forgotten.

Grid
“The foundational YUI Grids CSS offers four preset page widths, six preset templates, and
the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file
provides over 1000 page layout combinations.”
✤ Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px,
950px, and 974px, and the ability to easily customize to any number.
✤ Supports easy customization of the width for fixed-width layouts.
✤ Flexible in response to user initiated font-size adjustments.

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 4 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 5 of 20

✤ Template columns are source-order independent, so you can put your most important
content first in the markup layer for improved accessibility and search engine
optimization (SEO).
✤ Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
✤ Layouts less than 100% are automatically centered.
✤ Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
✤ Offers full A-grade browser support.

The grids.css is in my opinion what makes YUI CSS special. Donʼt get me wrong, there is
an extensive list of different css libraries available and each have their own proʼs and
conʼs. YUIʼs grid however has given us the most flexibility in terms of Joomla! templating.
Harnessing the core features to easily adjust the primary width of your template, to the
built in template presets (not to be confused with Joomla! template parameters) and the
100ʼs if different grid combinations available.

Once you familiarize yourself with the micro-format style markup naming conventions, you
will soon be on track to developing your own complex layouts using YUI.

Template Presets
The template presets can be a bit confusing at first, but if we think of it in terms of a
traditional two column layout, you have your main content div and a sidebar. The template
presets offer your six different possible configurations to choose from.

- A choice of three different sidebar widths (160px, 180px or 300px). These are based on
standard IAB (Interactive Advertising Bureau) ad unit dimensions, ie: standard advertising
banner sizes. Being that YUI is developed by Yahoo the logic behind this reasoning is
obvious.

- You can also choose on which side the sidebar is displayed. For example, you could
easily set your sidebar to be on the right.

Source Ordering
One of the things that first drew me to YUI CSS, was the special attention that was paid to
ensure that no matter what combination of layouts you use, the content is always source
ordered. In simple terms, the meat of your site is the first thing that screen readers, search
engines, etc see. This is done by wrapping the content that you want highest up in your
sites source code in a div with the id or “yui-main”.
<div id="doc" class="yui-t4"> <!-- change class to change preset -->
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Primary Content</div>
</div>
<div class="yui-b">Secondary Content (sidebar)</div>
</div>
<div id="ft"></div>

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 5 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 6 of 20

</div>

Nested Grids
So far I have only mentioned a simple two column layout. What happens when you need
to add a third column into the mix? Well, this is where the nested grids come in. The best
part is that nested grids can also be configured by

“YUI Grids CSS provides a system for subdividing sections of your page with nestable
grids. Use this technique to easily create complex layouts that go beyond the two column
layouts offered by the template presets. The picture below shows, for example, how a two-
column grid is "nested" within the main block:”

Illustration taken from the YUI Grids page.

Two Column Layout:


<div id="yui-main">
<div class="yui-b">Primary Content</div>
</div>
<div class="yui-b">Secondary Content (sidebar)</div>

Three Column Layout:


<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first">Primary Content</div>
<div class="yui-u">Tertiary Content</div>
</div>
</div>
</div>
<div class="yui-b">Secondary Content (sidebar)</div>

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 6 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 7 of 20

YUI Resources:

http://developer.yahoo.com/yui/grids/builder/
http://developer.yahoo.com/yui/grids/

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 7 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 8 of 20

Progressive Enhancement
Progressive Enhancement vs Graceful Degradation
At first glance these two terms may sound like the same thing, but though they are similar
in principle, their approach is completely different in its nature.

Graceful Degradation takes a top end approach and is where developers code for modern
browsers, then “gracefully degrade” for older browsers that donʼt have the same support.
This is fine in theory, if the real life execution was thus. The problem is that developers
often look at older browsers

Progressive Enhancement takes a bottom up approach.

At its core, P.E. focusses on the content of a site, then layers up “progressive
enhancements” as new browsers can handle them. At the core, everyone gets the same
rich content. When ever i look at a new design i will be coding, i completely ignore what
the design looks like and rather focus on what it is i am looking at. Once i identify the most
meaningful markup to use, i proceed to coding the xhtml structure. Only once i have a rock
solid xhtml compliant page do i even think about how i am going to implement the design
into the page.

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 8 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 9 of 20

Intro to jQuery
Let me first start off by saying that i am no means a javascript developer and that i have
only recently had my eyes opened to the power of jQuery. The information here is based
on my own understanding and the examples mentioned are simple ways that i have been
able to apply this incredibly useful tool in my everyday development. That said, i am the
proud owner of 3 new jQuery books and i plan on becoming proficient in its usage.

What is jQuery (taken from the jQuery website):


Taken from the jQuery website:

“jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML
documents, handle events, perform animations, and add Ajax interactions to your web
pages. jQuery is designed to change the way that you write JavaScript.”

In plain english, jQuery is lightweight, css3 compliant, incredibly powerful, designer


friendly, javascript library. I say “designer friendly” because it is simple enough that even
non coders can pick it up in no time. The aim or purpose behind it is to bridge the gap
between javascript and html. Writing a jQuery statement is as easy as writing css.

As as designer and theme developer, I was completely taken back at how easy it is to
learn jQuery and the massive amounts of flexibility it gives me. Simple things like injecting
additional markup via the dom (document object model), instead of including it in our
source code or targeting any element on the page are really easy to learn and once you
discover the power and flexibility it gives you, i am certain it will quench your thirst to learn
more - as was the case with me.

A perfect example of this is the built in Joomla! module chrome called “rounded”. This is
generally used to achieve flexible rounded corner modules.

By including the following module position in your template (notice the style=”rounded” -
but more on that further down):
<jdoc:include type="modules" name="left" style="rounded" />

The outputted code will be like this:


<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 9 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 10 of 20

Now since the purpose of the excessive additional markup is purely for presentational
purposes, wouldnʼt it be better to have our module code nice a slim, like this:
<div class="module rounded">
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>

By making sure that our module chrome is set to xhtml (or your own customized version)
and adding a module suffix of “rounded”, we can then use jquery to inject the additional
markup needed to give the necessary rounded corners styling, without cluttering our
markup with meaningless code.

To do this, we simple add the following to the head of our templates index.php:
<script src="<?php echo $templatepath;?>js/jquery-1.2.6.min.js" language="javascript"
type="text/javascript"></script>

$(document).ready(function(){
$(".shadow").wrap($("<div class='shadow0'><div class='shadow1'><div
class='shadow2'><div class='shadow3'></div></div></div></div>"));
});
});

My motto is to always keep the markup as clean as humanly possible and add any

Using jQuery with other javascript libraries:


One of the nicest things about jQuery is the ability to run it in no-conflict mode. This means
that when you use it along side other libraries that use the same $ function, jQuery gives
you 3 different methods to avoid running into problems.

Almost everything starts with a call the jQuery() function and because it is reused so often,
the $ variable is setup to alias jQuery. You can choose to setup your own alias like this:
var $pt = jQuery.noConflict();
$pt(document).ready(function(){

You are essentially telling jQuery to use (in this case) $pt rather than $ to reference the
jQuery function.

For more information on “no-conflict” in general and the various ways that you can ensure
running into problems with other libraries, check out the below resources.

Further reading:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 10 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 11 of 20

Document Ready vs Window Onload


Another nice feature of jQuery is the Document Ready function. Unlike Window.Onload,
which has to first wait for everything to load before executing its functions, jQuerys
Document Ready executes everything that is in this function / call back once the entire
document has been loaded (before images, flash, etc). Execute before images have been
loaded, flash or any external items. Fire before page visible to use. Allowing you to make
modifications to the page before the user sees them, unlike Window OnLoad which does
not execute anything until everything has loaded.

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 11 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 12 of 20

Progressive Enhancement with jQuery


in Joomla! Templating
Once you start getting the hang of jQuery, you will soon start to see just how much power
and flexibility you have at your finger tips! The important thing to remember though is to
avoid adding excessive widgets and gizmos and always make sure that the element that
you are “enhancing” is still 100% fully functional when javascript is turned off.

Here are a few really simple examples of how you can progressively enhance your visitors
user experience.

Please note that the below examples need to be wrapped in the document ready function.
jQuery(document).ready(function(){
//
});

Example 1.) Enhance your sidebar menu with simple toggle functions.

Set your sidebar menu to toggle whether child items are displayed. If no javascript is
detected, the sub items are displayed like normal.
$(".menu .parent ul").hide();
$("ul.menu li.parent a").click(function(){
$(this).next().toggle().end();
return false;
});

Example 2.) Add “first” & “last” classes to sidebar modules.

Have you ever wished you could target the first and last modules in your sidebar without
having to manually set a module suffix?
$("#sidebar .module:first").addClass("first");
$("#sidebar .module:last").addClass("last");

What the above is doing, is finding the first and last div with a class of “module”, then using
the addClass function to assign it a class of .first and .last.

Example 3.) Add input classes based on type.

This will automatically add a class to input items based on their type. For example, <input
type=”text”> would end up being <input type=”text” class=”text”> or <input type=”radio”>
becomes <input type=”radio” class=”radio”>. This gives you great control when styling
form elements.
$("input").each(function() {

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 12 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 13 of 20

$(this).addClass($(this).attr("type"));

Example 4.) Remove last .article_separator

This may sound trivial, but one thing that always bugged me was not being able to zero
out the styling on the last article separator (since there are no more articles to separate).
Once your eyes open to the power, flexibility and simplicity of jQuery, your mind will soon
be firing off with ways that you can progressively enhance your websites. In my case, this
was finding the span with a class of article_separator and adding a class of .last to it. This
then allowed me to remove all of the styling that had been set.
$(".inner .article_separator:last").addClass("last");

Example 5.) Add alternating classes to table rows:

Alternating classes, otherwise known as “zebra striping” is the alternating row colors
(usually on tables). This makes it easier for users to read the contents of the tables and
can easily be added using jquery.
$("table tr:even").addClass("alt");

Example 6.) Assign images a class based on their alignment:

Another simple enhancement, is to automatically add a class to images based on their


alignment. When an image is set to be left aligned, it will automatically get assigned a
class of “img-left”. This can then be used in your css to give additional spacing to the right
of the image to keep the page nicely balanced.
$('img[align*=right]').addClass("img-right");
$('img[align*=left]').addClass("img-left");

Example 7.) Add a class to first paragraphs on article pages:

Having the first paragraph of your article is a nice way to set the summary apart from the
rest of the articles copy. By adding a class of teaser to the first paragraph of the article, we
can increase the font size, change the color to make it stand out from the rest of the text.
$("#content p:first").addClass("teaser");

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 13 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 14 of 20

jQuery Resources

Books:
✤ Learning jQuery
✤ jQuery Reference
✤ jQuery in Action

Websites:
✤ http:// jquery.com:
✤ http://docs.jquery.com
✤ http:// jquery.com/plugins
✤ http:// ui.jquery.com
✤ http://visualjquery.com
✤ http://learningjquery.com
✤ http://15daysofjquery.com/

Video:
Ajax Experience 2008 - Intro to jQuery with John Resig
http://onflash.org/ted/2008/11/ajax-experience-2008-intro-to-jquery.php

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-2/
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-3/
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-5/

http://blip.tv/search?q=jquery&x=0&y=0

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 14 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 15 of 20

Templating in Joomla! 1.5


Joomla! 1.5 was a big step forward from the 1.0 version. From a template developers point
of view, these enhancements have enabled us to break out of the mould of what was
previously possible in Joomla! 1.0 and are taking template development to a whole new
level.

The list of features in Joomla! 1.5 are too extensive to list here without getting distracted,
so i am only going to focus on the specific features that are relevant to Joomla! templating.

Template Overrides
The feature that i most enjoy in Joomla! 1.5 is the ability to override any component or
modules xhtml output. This gives any template developer massive flexibility to change the
way Joomla! outputs its code, such as stripping out any unnecessary tables, changing the
way article and component headings are outputted and much much more. The best part is
that by taking advantage of this feature, you do not need to worry about your changes
being overridden the next time you upgrade your Joomla! version.

Some examples of things you can override:


✤ Content headings
✤ Component Heading
✤ Blog view
✤ Article
✤ Contact form
✤ Page Suffix

Module Chromes
Joomlaʼs module chrome can be summarized as the xhtml code that is wrapped around
the contents of any given module. Which chrome any given module position should use is
determined by the “style” attribute that is specified in the module positionʼs code.

An example of these would be:


<jdoc:include type="modules" name="user1" style="xhtml" />

In Joomla! 1.0.x we were limited to the the chromes that were available to us, but in
Joomla! 1.5, we are now able to not only customize the existing chromes to our liking, but
also add our own!

The below examples are of the built in chromes that are available out of the box in Joomla!
1.5. Please note that that the module that is used in the example is the same in all of
them. All that is different is the module chrome or “style” that has been set.

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 15 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 16 of 20

<jdoc:include type="modules" name="left" style="raw" />


<ul class="menu">
<li><!-- various menu items --></li>
</ul>

<jdoc:include type="modules" name="left" style="xhtml" />


<div class="moduletable_menu">
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>

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


<table cellpadding="0" cellspacing="0" class="moduletable_menu">
<tr>
<th valign="top">Main Menu</th>
</tr>
<tr>
<td>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</td>
</tr>
</table>

<jdoc:include type="modules" name="left" style="horz" />


<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
<tr>
<th valign="top">Main Menu</th>
</tr>
<tr>
<td>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 16 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 17 of 20

<jdoc:include type="modules" name="left" style="rounded" />


<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>

<jdoc:include type="modules" name="left" style="outline" />


<div class="mod-preview">
<div class="mod-preview-info">left[outline]</div>
<div class="mod-preview-wrapper">
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>

Now to create your own module chrome, you simply create a file called “modules.php” and
put it into your templates “html” folder.

Below is an example of the modules.php that i created for our new template framework:
<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_junkie($module, &$params, &$attribs) { ?>
<div class="module <?php echo $params->get('moduleclass_sfx'); ?>" id="mod<?php
echo $module->id; ?>">
<?php if ($module->showtitle != 0) : ?>
<?php
if(isset($_COOKIE['mod'.$module->id])) $modhide = $_COOKIE['mod'.$module->id];
else $modhide = 'show';
?>
<h3><span><?php echo $module->title; ?></span></h3>
<?php endif; ?>
<div class="mod-content"><?php echo $module->content; ?></div>
</div>
<?php } ?>

The first thing to look at is the highlighted text modChrome_junkie. If you remember,
“junkie” is the name that i gave our custom module chrome style. This can be anything you

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 17 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 18 of 20

would like, but important to mention is that it must be kept in the same format, ie:
modChrome_yourstyle.

Apart from adding a few basic css hooks for additional styling, the one other notable
difference is the space between the “module” class and the “module suffix”. The reason for
this is simple. Instead of ending up with a class of “modulemycustomsuffix”, which
subsequently would remove all of the modules built in styling (since we have not made
provision for any modules with a class of “modulemycustomsuffix”), we now end up with
““module mycustomsuffix”, which takes advantage of the fact that any element can have
multiple classes assigned to it.

So now the module will still keep the original styling that has been set for “.module”, but we
now also have the added hook of “.mycustomsuffix”, where we can override the styling that
is specific only to that module (ie, like the module header background color. We have
further extended this concept with our built in ModFX feature that is included in all of our
latest templates, where you can easily mix and match your own combination of module
header icon, header text color, background image and main module background style.

To call this new module chrome in the template, we simple set the chrome style to “junkie”:
<jdoc:include type="modules" name="user1" style="junkie" />

Further Reading:
✤ http://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-
chrome.html
✤ http://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-
module-chrome.html
✤ http://docs.joomla.org/What_is_module_chrome%3F

Taking advantage of Joomla! 1.5ʼs built in Split Menu


Another little gem that Joomla! 1.5 has included, is the ability the split a menuʼs child items
at any level. The below example has 3 levels in total. You could choose the split the menu
after the first level, which would result in the 2nd and 3rd level children to split or split at
the 2nd level and have the 3rd level in your sidebar menu.

A split menu in its traditional sense is a where the sub children of a menu item are
displayed further down the page (usually in the sidebar). An example of this would a
horizontal navigation with some top level and child level items.

Removing Mootools from the header of your Joomla!


1.5 template.
Something that has been greatly debated within Joomla! circles is the inclusion of
mootools.js on the frontend by default, with no “obvious” way to disable them. First off you
may ask, what is mootools and so what if its included? Well, the answer is simple.
Mootools is another javascript library, similar to jQuery and Joomla! 1.5 uses this library in
the backend administration section of your site. That is all fine and dandy, the problem

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 18 of 20


Rapid Template Development with Joomla!, YUI CSS & jQuery 19 of 20

however, is that the file weighs in at around 74kb, which is pretty heavy to include when its
only being used for captions irrespective whether you are using the captions feature or
not.

So how do we prevent mootools and caption.js from loading on the frontend of your site?
Simply add the following to the top of your Joomla! templates index.php:
<?php
$user =& JFactory::getUser();
if($user->get('guest') == 1 or $user->usertype == 'Registered') {
$headerstuff = $this->getHeadData();
unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/mootools.js']);
unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/caption.js']);
$this->setHeadData($headerstuff);
}
?>

Template Parameters
The last templating related feature in Joomla! 1.5 that i am going to discuss, is the new
template parameters. In previous versions of Joomla! we were limited to creating separate
configuration files, where users had to dig around in the code to apply any of the settings.
Thanks to Joomla! 1.5 this is now a thing of the past.

To see these parameters in action, take a look at any of the templates that are packaged
with Joomla! by default.

All the template parameters are really doing is giving the template users a GUI (graphic
user interface) for the various options that are built into the template.

Here is how you add your own template parameters to your next Joomla! template:

The first thing that we need to do is get your templates index.php talking to the templates
xml file. To do that, we simple define them at the top of the file, like this:
<?php
$template_style = $this->params->get('template_style');
?>

Then, we need to add the relevant parameters to the templates xml file:
<param name="template_style" type="list" default="blue" label="Template Style"
description="Which style would you like to use?">
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
</param>

Each parameter can have a number of different attributes - name, type, label, description
and default. If you plan on using template parameters in your Joomla! templates, i would
highly recommend that you go through the XML Parameters tutorial, linked at the bottom
of this section.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 19 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery 20 of 20

XML Parameter Attributes:


name - This is the field name of the parameter
type - This is the element type for the parameter, text, a list box, etc
label - The text label to be displayed in the parameter form
description - The text that will display when you hover over the label
default - The default value to use

So now you have a way for your user to select an option within the template parameters
page. What we now need to do is output the variable to be used somewhere in the
template.

Lets take a look at some examples of how these options can be used:

In the first example, we are outputting the “template_style” variable as a class on our body.
<body class=”<?php echo $template_style; ?>”>

This would then allow us to write the following css, where we target all links through out
the template and set their color based on which color scheme has been set.
body.green a { color: green; }
body.orange a { color: orange; }
body.red a { color: red; }

Alternatively, we could pull in a color specific stylesheet based on the users selection:
<link href="<?php echo $templatepath;?>css/<?php echo $template_style; ?>.css"
rel="stylesheet" type="text/css" media="screen" />

There are all kind of different variations on how this can be used. Most of which are really
simple and can be picked up purely by sifting through other templates as examples. The
only thing that you are limited by, is your creativity. You can provide your users with literally
options for anything and everything.

Further Reading:
http://dev.joomla.org/component/option,com_jd-wiki/Itemid,/id,references:xml_parameters/

General Joomla Templating Resources:


http://movielibrary.lynda.com/html/modPage.asp?ID=666&ref=swf

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 20 of 20