By bjornarneson on

I recently implemented the "Fade Anything Technique" on my Drupal site. There are obviously many ways to do this, via theme overrides, hacks, new modules.

I opted for the "quick and dirty" way, using the following steps:

1. Download fat.js from http://www.axentric.com/posts/default/7. Direct link http://www.axentric.com/aside/fat/fat.js.

2. Save this javascript file to the directory containing your current theme.

3. Manually edit your theme page.tpl.php to include the following line:
[script type="text/javascript" src="themes/__THEME-NAME__/fat.js"][/script]
Change the script brackets to < and > symbols.

4. Change line 426 of theme.inc to $output .= "<div id=\"messages\" class=\"fade messages $type\">\n";. (notice we added the "fade" class)

Done. At this point, any output to the "messages" function, including confirmation of node creation and edit, will be automagically faded from yellow to the native background-color.

To choose a fade color other than yellow, an element should be classed with a color code extension: fade-ff8000 (i.e. orange fade)

Comments

bjornarneson’s picture

bjornarneson commented

In order for the technique to work, you must also apply an ID to the messages div. This ID can be anything, but allows for more customized fades when fading multiple elements. Read the documentation at http://www.axentric.com/posts/default/7 for more information on how to fade multiple elements.
--
Bjorn | choirgeek.com

1zero’s picture

1zero commented

very interesting trick! I couldn't test it quickly because I can't find the page.tpl.php file in my theme, and I suspect it's because I'm not using phptemplate. I can't spend more time on this today but I'm very curious to know what page to change in order to activate this function on a vanilla install.