theming

If your are not a jQuery dev, don't worry, there are plenty of excellent resources to get you started using jQuery to enhance your site.

Star here

http://drupal.org/project/Modules/category/101 ( Drupal Modules: JavaScript Utilities )

Then simply:

1. Browse
2. Download
3. Install & Configure

Some module which I recommend checking out

UI Improvements

• jTooltips: http://drupal.org/project/jtooltips - adds in context user feedback
  
• JQuery Interface: http://drupal.org/project/jquery_interface  - might not be D6 ready
  
• jQuery UI: http://drupal.org/project/jquery_ui - a full library of effects
  
• Username originality AJAX check: http://drupal.org/project/username_check - This is the kind of enhancements jQuery is perfect for.

Content Browsing

• jCarousel: http://drupal.org/project/jcarousel - nice for creating a recent post/image browser, or a headlines browser.
  • Also see @ http://drupal.org/project/jcarousel_block
    
• Views carousel: http://drupal.org/project/viewscarousel

Photos

• Thickbox: http://drupal.org/project/thickbox or Lightbox2: http://drupal.org/project/lightbox2 
  • @see Comparison of “lightbox” type modules: http://drupal.org/node/266126
  • @see Lightbox2 demo http://www.stellapower.net/lightbox2
• Slideshow Creator: http://drupal.org/project/slideshow_creator
  • @see Cool demo here: http://www.malsup.com/jquery/cycle/

Theming and Display

• jQuery Eye Candy: http://drupal.org/project/jq_eyecandy  - if you really must use jQuery rather than CSS
  
• JavaScript Theming: http://drupal.org/project/js_theming
  
• Page Style: http://drupal.org/project/pagestyle - a style changer in a block and in the browser for better Web Accessibility

jQuery Plug-in Management

• jQuery plugins: http://drupal.org/project/jquery_plugin - call jQuery plugins from any module or theme by calling the jquery_plugin_add($plugin) function
  
• jQuery Plugin Handler (JQP): http://drupal.org/project/jqp

• jQ: http://drupal.org/project/jq

Read More »

In D6, you can put a .js file in your base theme directory and it will automatically be loaded by Drupal.

You can also include a js file via an entry in your theme’s .info file:

scripts[] = your_javascript.js

However, I recommend the following:

Consider your JavaScript theme-able like HTML.

1. It should be able to be themed
2. Put JavaScript in .js file
3. Use drupal_add_js() in a theme function
4. If in a module, call it with hook_init()

As HTML in a theme function / tpl file, calling your JS with a theme function allows theme developers to modify or override your JS in the theme layer.

Here it is in a module:

<?php

/**

 * Implementation of hook_init()

 */

function trickoutmysite_init() {

 theme('trickoutmysite_javascript');

}

/**

 * Implementation of hook_theme()

 */

function trickoutmysite_theme($existing, $type, $theme, $path) {

  return array(

    'trickoutmysite_javascript' => array(

      'arguments' => array(),

    ),

  );

}

/**

 * A themable function which uses drupal_add_js to include the js file

 */

function theme_trickoutmysite_javascript() {

  drupal_add_js (drupal_get_path('module', 'trickoutmysite') . '/trickoutmysite.js');

}

?>

Read More »

The following post is an answer I wrote to a question submitted to Tree House Agency in preparation for Do It With Drupal (New Orleans 2008). Tree House has kindly given me permission to post this material on my own website.

Q: One node, varied displays?

BH asks:

What are the best practices for rendering different types of node displays?

Short Answer

Three methods immediately come to mind. These are:

1. Different TPL files for each type of node

2. Switching template files by path

3. Using CSS to change display by node type

Additional cases may include:

4. Switching by taxonomy term

5. Switching by role type

6. Switching by user id

Details

1. Different TPL files for each type of node

Drupal already has an excellent built in method for rendering different types of node displays.

Grab a copy of node.tpl.php from Drupal’s modules/node/ directory.

Put it into your site theme folder. Then rename it according to whatever node type you would like to customize. (node-nodetype.tpl.php )

Notes:

The node type should be the machine readable content type.

There are many places to find the machine readable name. One place is at: /admin/content/types

Read More »