Animated Pop Up Searchbox Tutorial

With or Without RapidSearch


RapidSearch, a RapidWeaver plugin by Josh Lockhart, is the easiest way to blend Google search seamlessly into your RapidWeaver websites. If you haven't already done so, try it out yourself, using the searchbar above. You can find out more about RapidSearch at Josh Lockart.com

But you don't have to own RapidSearch to make The Seeker searchbar work. The Seeker works just as well with an ordinary search form, and the only difference is that search results are returned to a generic Google page outside your RapidWeaver theme. Not so pretty but just as functional.

Either way, we have a tutorial for each eventuality. Make your choice below.


Without RapidSearch

Continue with the tutorial that follows immediately below:

With RapidSearch

Go to the RapidSearch Tutorial Page here



Backup your project file


  • If you are working on your own project, we always recommend that you backup your project file and work on a copy.
  • For the purpose of this tutorial, though, we are going to assume that you are working on the Seeker Project File included in the download pack


Preparation


  1. Download and unzip the Seeker Pack
  2. Double-click to open and install each Snippet
  3. Restart RapidWeaver

For the purpose of this tutorial you will need:


  • 1 Seeker Searchbar jQuery Header Snippet
  • 1 Seeker Searchbar HTML Snippet
  • 1 Seeker Move Parts Snippet
  • 1 Seeker Searchbar CSS Snippet
  • 1 small search icon (search_icon_small.png)
  • 1 Searchbar PNG (searchbar_orange_right.png)


Adding to Assets


  1. Open the Seeker Project File
  2. Open Page Inspector > Header > Assets
  3. Add the following files to Assets:

  • searchbar_orange_right.png
  • search_icon_small.png



assets



Inserting Snippets


Open the Snippets panel and type seeker searchbar in the searchfield. (For the purposes of this tutorial, ignore the three Seeker Searchbar Extra snippets. Tutorials for these can be found on the Add Ons page.)

Screen shot 2009-09-07 at 12.13.11



Drag the Seeker Searchbar CSS snippet into Page Inspector > Header > CSS

Seeker Searchbar CSS



Drag the Seeker Searchbar jQuery Header snippet into Page Inspector > Header > Header

Seeker Searchbar jQuery Header




Drag the Move Parts snippet into Page Inspector > Header > Header

Move Parts Header Snippet



Drag the Seeker Searchbar HTML snippet into the body of the page. Anywhere will do. Even the sidebar. As long as you remember to highlight the code and select Ignore Formatting from the Format menu. For Blog pages and other plugins, check out these Hints and Tips.

QUICK TIP — in Blog pages you can insert the Seeker Searchbar HTML snippet in any of your posts and as long as that post is enabled then the code will work. For other kinds of plugin pages — for example Collage 2, Formloom, Contact Page etc — you can insert the snippet in the page specific Header areas.

Click for more Hints and Tips



Seeker Searchbar Form HTML



Now that all the necessary files and snippets are in place, it's time to configure and tweak.



Configuring the Move Parts Snippet


Where do you want to place the searchbar? In the Header? The Footer? To find the name of the destination div, open the Page Source by either clicking on the Source icon or selecting View Source from the View menu.

Configuring the Move Parts Snippet



Configuring the HTML Form Snippet


Configuring the HTML Form Snippet


Positioning The Searchbox


Positioning The Searchbox


Tweaking the CSS


This is where you sometimes need a lot of patience. Before beginning, remind yourself of the Hints and Tips

Tweaking the CSS