We've been using the Pulse effect on our searchIcon at RapidWeaver Central for quite a while now. In contrast to many of our jQuery effects, it's so subtle you may not even have noticed. Please note that this is a tutorial for the more advanced or adventurous Weaver, and for the purpose of this tutorial we assume you already have the Seeker installed.

To use the Pulse effect in your own searchIcon you will first need to download:

• The jquery pulse.js
• The New Improved & Updated Seeker Snippet Pack

Then using Pixelmator or Photoshop you will need to edit the colour overlay of the Background layer of the Pulse SearchIcon 32x32.psd file — which you'll find in the Pulse SearchIcon folder — so that it matches the background colour of your website. Save it as pulse_searchicon.png and add it to Assets, or place it wherever you placed your previous searchIcon.

Now reference it in your #searchIcon CSS in the Page Inspector. If you've attached the image as an Asset, it should now look like this:

#searchIcon { background: url(assets/pulse_searchicon.png) no-repeat; cursor: pointer; etc.,}

Next you will need to:

1. Add the pulse.jquery.js to your assets.
2. Replace the default Seeker Searchbar jQuery Header Snippet in the Header panel of the Page Inspector with the Seeker Searchbar jQuery Header (with Pulse) Snippet.
3. Tweak the Pulse values as in the example below.
4. For a more detailed explanation of the Pulse plugin and all its configurations, visit James Padolsey's Pulse Plugin page.

To utilise both Pulse and Easing in your searchbar you will need to download:

• The New Improved & Updated Seeker Snippet Pack
• The jquery.easing.js
• The jquery pulse.js

Then using Pixelmator or Photoshop you will need to edit the colour overlay of the Background layer of the Pulse SearchIcon 32x32.psd file — which you'll find in the Pulse SearchIcon folder — so that it matches the background colour of your website. Save it as pulse_searchicon.png and add it to Assets, or place it wherever you placed your previous searchIcon.

Now reference it in your #searchIcon CSS in the Page Inspector. If you've attached the image as an Asset, it should now look like this:

#searchIcon { background: url(assets/pulse_searchicon.png) no-repeat; cursor: pointer; etc.,}

Then you will need to:

1. Add the jquery.easing.js and the pulse.jquery.js to your assets.
2. Replace the default Seeker Searchbar jQuery Header Snippet in the Header panel of the Page Inspector with the Seeker Searchbar jQuery Header (with Pulse & Easing) Snippet.
3. Tweak the Pulse values as in the example below.
4. Tweak the Easing methods and values as suggested here.
5. For a more detailed explanation of the Pulse plugin and all its configurations, visit James Padolsey's Pulse Plugin page.