• Like
Rapid Template Development Part 2
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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 http://www.joomlajunkie.com/templates/morph/morph.html

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 http://joomlajunkie.com http://prothemer.com http://cmsexpo.net
  • 2. jquery examples Setting jQuery into “no-conflict” mode var $pt = jQuery.noConflict(); $pt(document).ready(function(){ // CODE HERE }); }); http://jquery.com
  • 3. jquery examples Example 1.) Enhance your sidebar menu with simple toggle functions. $(quot;.menu .parent ulquot;).hide(); $(quot;ul.menu li.parent aquot;).click(function(){ $(this).next().toggle().end(); return false; }); http://jquery.com
  • 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;); http://jquery.com
  • 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;)); http://jquery.com
  • 6. jquery examples Example 4.) Remove the last “span.separator”: $(quot;.inner .article_separator:lastquot;).addClass(quot;lastquot;); http://jquery.com
  • 7. jquery examples Example 5.) Zebra striping on table rows (or anything!): $(quot;table tr:evenquot;).addClass(quot;altquot;); http://jquery.com
  • 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;); http://jquery.com
  • 9. jquery examples Example 7.) Add a “teaser” class to first paragraphs of an article: $(quot;#content p:firstquot;).addClass(quot;teaserquot;); http://jquery.com
  • 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;)); http://jquery.com
  • 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;); http://jquery.com
  • 12. jquery examples jQuery Resources: http:// jquery.com http://docs.jquery.com http://jquery.com/plugins http://visualjquery.com http://learningjquery.com http://15daysofjquery.com http://jquery.com
  • 13. jquery examples jQuery Resources (on the cd): ★ Learning jQuery Video Tutorial Series by Nettuts.com (parts 1 - 5) & others. ★ 4 Jquery Cheatsheets ★ Intro to jQuery pdfs & ppts. http://jquery.com