Theming filter info

Sep 30 2009

In Drupal, any text area that supports markup will also display help text (filter tips) for the "input format" section beneath the text area. Unfortunately, filter tips (and particularly the filter tips "more info" link) are not wrapped in markup that makes them easily selectable from CSS. This can be easily rectified using a theme function.

Here's an example from the template.php file inside of a theme named sitetheme.

<?php
/* *
 * Implements theme_filter_tips_more_info().
 */
function sitetheme_filter_tips_more_info() {
  return '<div class="filter-tips-more-info">' . theme_filter_tips_more_info() . '</div>';;
}

/* *
 * Implements theme_filter_tips().
 */
function sitetheme_filter_tips($tips, $long = FALSE, $extra = '') {
  module_load_include('inc', 'filter', 'filter.pages');
  return '<div class="filter-tips">' . theme_filter_tips($tips, $long, $extra) . '</div>';
}
?>

The code above simply overrides the theming functions from the filter module, wrapping the content inside of divs. This example still uses the original theming functions (themefiltertips() and themefiltertipsmoreinfo()), but around this content, some extra divs with easily targeted classes are wrapped. We have to call these theming functions directly (instead of using the theme() function) because we have already declared an override to the theme function, and unlike OO inheritance, there is no clean method of calling a "parent" or "super" version of a function.

Of course, in your own themes, you may find it more useful to simply re-theme the tips and more info link instead of merely wrapping existing markup with extra divs. That can easily be accomplished with the theming functions shown above. <!--break-->