This is a short tutorial that aims to explain how to place a search box at the top of the sidebar, above the navigation menu. This will require some fiddling with code – don’t be afraid! I’ll do my best to walk you through it.

This tutorial assumes the user has bought a copy of Rapidsearch 2.0.

First the code for a search box is required. An example (that you are encouraged to use) is shown below:

1
2
3
4
5

<div id="panel">
        <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
            <input type="text" name="query" id="search_site" value="DEFAULT_TEXT"         onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
        <input type="submit" id="search_button" value="Search"/></form>
    </div>

1) To use this code, open your website in Rapidweaver, press “Themes”. Select the theme you use for your site, and make a copy of it. Select the copy, right click and press “Reveal Theme Contents in Finder”. This will open a Finder window containing the files required to make your theme … your theme.

There are two files that need editing in order to make our search bar work: “index.html” and “styles.css”. Both should be visible in the Finder window.

2) Open “index.html” in a text-editor. I use TextWrangler, because it is free and provides syntax highlighting. If you are a serious coder, try Coda or Eclipse. Scroll down until you see:

<div id="navcontainer">

Copy the search box code (displayed above) just below this line, then change DEFAULT_TEXT to whatever text you want to be displayed inside the search box. You need to change PATH_TO_YOUR_SEARCH_PAGE to the path to your search page as well. It should have changed from this:

<div id="navcontainer">

To this:

1
2
3
4
5
6

<div id="navcontainer">
             <div id="panel">
            <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
    <input type="text" name="query" id="search_site" value="DEFAULT_TEXT" onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
    <input type="submit" id="search_button" value="Search"/></form>
          </div>

That has changed the theme’s template to include the search box above the navigation menu in the side bar.

3) This part will clear the default text when a user clicks inside the box, and restore it if the user deselects the box without entering a search term.

Still inside “index.html”, scroll up until you see:

<script type="text/javascript" src="/rw_common/themes/pagesofinterest/javascript.js"></script>

Directly beneath this line, paste this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
        function clickclear(thisfield, defaulttext) {
            if (thisfield.value == defaulttext) {
            thisfield.value = "";
            thisfield.style.color='DESIRED_ACTIVE_TEXT_COLOUR';
            }
        }
        function clickrecall(thisfield, defaulttext) {
            if (thisfield.value == "") {
            thisfield.value = defaulttext;
            thisfield.style.color='DESIRED_IDLE_TEXT_COLOUR';
            }
        }
    </script>

Replace “DESIRED_ACTIVE_COLOUR” and DESIRED_IDLE_COLOUR” with hex codes for your desired colours for these states. To avoid confusion: “active colour” in this case is the colour that the text will be when the user has selected the text box. I have mine set to #333333, which is the same colour as my body text. “Idle colour”, if you haven’t guessed already, is the colour that the text will be when the search box is not selected. I have mine set to be a very light grey: #C5C5C5.

If you’re not a computer, you’ll need a human-usable interface for generating hex colour codes, which are those nasty-looking 7-digit codes, like the two I mentioned above. To do this I use Dr. Peter Jones’ RGB Colour Calculator. If you don’t want to pick your own colours, you may instead use the colours of your theme. Have a poke around in “styles.css”, they’ll be in there somewhere.

4) There is a chance that your search box is in the perfect position already, but I’d say that chance is pretty slim. To remedy this, we now need to open up the “styles.css” file. Into this file, paste:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#panel{
        position: relative;
        left: 5px;
        width: 169px;
    }
    #search_site{
        color: #C5C5C5;
        font-size: 11px;
    }
    #search_button{
        position: relative;
        margin-top: 4px;
        margin-bottom: 4px;
        left: 96px;
    }

#panel contains the styling for the entire area within which the search box’s form, text area, and button reside. Adjusting the “left” positively will move the whole set left, adjusting it negatively to the right. Adjusting the “width” value will change the width. You may add anything you want here. I used W3Schools to learn about CSS syntax.

#search_site controls the styling of the search text box. I have set the default font colour and size here.

#search_button controls the styling of … the button. Use this to position the button. “margin” defines how much whitespace there should be between the element in question and its neighbours. Append “-left”, “-right”, “-top”, “-bottom” to “margin” to set the respective values.

Save both the “index.html” and “styles.css” files and preview your site. You should now see a search box above the navigation menu in the sidebar, in every page!

5) All we have to do now is create a Rapidsearch page, then modify it to work with our new search box.

So, create a Rapidsearch page, and configure the options to suit your desires.

Preview the page. When you are happy with the page’s appearance, publish the page to the same URL used in your search box, then press ⌘⌥U to view the page’s source. Copy all of the code by pressing ⌘A then ⌘C. Now open page inspector with ⌘⇧I, and uncheck “show in menu” and “enabled”.

Now create a HTML page, and paste the code you copied earlier into it. Open page inspector, change the page’s extension to PHP. Select the “Page” options icon and uncheck “Apply Theme”.

The following line:

var queryTerm = getUrlParam('query');

Must be replaced with:

1
2
3
4
5
6
7

<? php
if($_POST['query'] != ""){
echo "var queryTerm = '".$_POST['query']."';";
}
else{
echo "var queryTerm = getUrlParam('query');";
}

Make sure the URL to the HTML page is the same as the URL used in your search box, and publish.

There is a good chance that your search page will not have the correct styles applied to it, as the links to the external CSS sheets will probably be relative, not absolute. In order to fix this, you must manually correct each CSS link within your HTML page. You’ll know you’ve done it right when the page loads and is styled correctly. Safari’s Web Inspector can be useful for this – in Safari the hotkey is ⌘⌥I.

When you’ve finished with the CSS, re-upload your site, and begin testing.

Congratulations!

Scroll to top

Related posts:

1. Exec-php and WP-Syntax Caveat Exec-php was attempting to execute the line below, when there was no whitespace between ...
2. Search Box Above Nav Menu in Rapidweaver ...how to place a search box at the top of the sidebar, above the navigation menu. This will require some fiddling with code - don’t be afraid! I’ll do my best to walk you through it. ...
3. WP-Blog Proves that Dreams *Can* Come True The days of staring jealously at the Wordpress crowd have ended. No more shall we scroll longingly down the lists of available Wordpress plugins, wishing they were ported to RapidWeaver....
4. Twitter Tools Post From Sidebar – Blog in Different Directory Fix I joined Twitter yesterday, and installed the Twitter Tools plugin....
5. JS-Kit Comments for Each Blog Entry In this short tutorial I will describe how to use the JS-Kit commenting system in Rapidweaver. By then end of this tutorial you will have learned how to insert the code into yor blog so that each post has its own comments - the comments will show in permalinks, category and tag versions of each post. When someone comments on...

Tags: Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程