With RapidSearch
This tutorial is for RapidSearch owners only.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
- Download and unzip The Seeker pack
- Select all the snippets and double-click to install them
- Restart RapidWeaver
For the purposes of this tutorial you will need:
- 1 Seeker Searchbar jQuery Header Snippet
- 1 Seeker Searchbar HTML (RapidSearch) 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
- Open the Seeker Project File
- Open Page Inspector > Header > Assets
- Add the following files to Assets:
- searchbar_orange_right.png
- search_icon_small.png
Add a RapidSearch Page and configure it
For the purposes of this tutorial we have configured ours like this:
Inserting Snippets
Open the Snippets panel (⌘5) and type seek in the searchfield
Drag the Seeker Searchbar CSS snippet into Page Inspector > Header > CSS
Drag the Seeker Searchbar jQuery Header snippet into Page Inspector > Header > Header
Drag the Move Parts snippet into Page Inspector > Header > Header
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
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 HTML (RapidSearch) Snippet
Remember: the path must be the FULL ABSOLUTE path to your RapidSearch page.
Positioning The Searchbox
Tweaking the CSS
This is where you need patience. Before beginning, remind yourself of the Hints and Tips
IMPORTANT:
You will not see any results on your RapidSearch page until you have PUBLISHED your site.
