Your SlideShare is downloading. ×
  • Like
Rapid Template Development Part 2
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Rapid Template Development Part 2


Part 2 of Rapid Template Development with Joomla! 1.5, YUI CSS & jQuery that i presented at CMSexpo in Denver, Colorado. …

Part 2 of Rapid Template Development with Joomla! 1.5, YUI CSS & jQuery that i presented at CMSexpo in Denver, Colorado.

The Morph framework and toolset for Joomla is now available for purchase and use - read more at

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Rapid Template Development with Joomla, YUI & jQuery Chris Rault, Web Monkeys CMSExpo, Denver Colorado - December 08
  • 2. jquery examples Setting jQuery into “no-conflict” mode var $pt = jQuery.noConflict(); $pt(document).ready(function(){ // CODE HERE }); });
  • 3. jquery examples Example 1.) Enhance your sidebar menu with simple toggle functions. $(quot;.menu .parent ulquot;).hide(); $(quot; li.parent aquot;).click(function(){ $(this).next().toggle().end(); return false; });
  • 4. jquery examples Example 2.) Add “first” & “last” classes to sidebar modules. $(quot;#sidebar .module:firstquot;).addClass(quot;firstquot;); $(quot;#sidebar .module:lastquot;).addClass(quot;lastquot;);
  • 5. jquery examples Example 3.) Add a class to form input elements based on their type: $(quot;inputquot;).each(function() { $(this).addClass($(this).attr(quot;typequot;));
  • 6. jquery examples Example 4.) Remove the last “span.separator”: $(quot;.inner .article_separator:lastquot;).addClass(quot;lastquot;);
  • 7. jquery examples Example 5.) Zebra striping on table rows (or anything!): $(quot;table tr:evenquot;).addClass(quot;altquot;);
  • 8. jquery examples Example 6.) Assign images a class based on their alignment: $('img[align*=right]').addClass(quot;img-rightquot;); $('img[align*=left]').addClass(quot;img-leftquot;);
  • 9. jquery examples Example 7.) Add a “teaser” class to first paragraphs of an article: $(quot;#content p:firstquot;).addClass(quot;teaserquot;);
  • 10. jquery examples Example 8.) Onion shadows / rounded corners: $pt(quot;.shadowquot;).wrap($pt(quot;<div class='shadow0'> <div class='shadow1'><div class='shadow2'><div class='shadow3'></div></div></div></div>quot;));
  • 11. jquery examples Example 9.) Easy rounded corners plugin: <script src=quot;<?php echo $templatepath;?>js/jquery.corners.min.jsquot; language=quot;javascriptquot; type=quot;text/javascriptquot;></script> Basic Usage: $pt('#mystyle1 #nav #current.first a').corners(quot;10px top-leftquot;); $pt('#mystyle1 #nav').corners(quot;10px topquot;); $pt('.right-pullquote').corners(quot;10pxquot;); $pt('.rounded .mod-content').corners(quot;10px bottomquot;); $pt('.rounded h3').corners(quot;10px topquot;);
  • 12. jquery examples jQuery Resources: http://
  • 13. jquery examples jQuery Resources (on the cd): ★ Learning jQuery Video Tutorial Series by (parts 1 - 5) & others. ★ 4 Jquery Cheatsheets ★ Intro to jQuery pdfs & ppts.