Search Box Above Nav Menu in Rapidweaver

×

This post was originally published in 2008
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

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.

Note: This tutorial requires Rapidsearch 1.0, and is now outdated. A new tutorial written for Rapidsearch 2.0 can be found here: Search Box Above Nav Menu with Rapidsearch 2.0.

First you need to have the code for a search box. I got mine by adding a Rapidsearch 1.0 page to my website, uploading the page, viewing it’s source then copying the code that created the searh box in that page. This tutorial could be modified to work with Google’s custom search. If you do this, please let me know which steps needed modifying and I’ll include them here.

Luckily you won’t have to do that, because I’ve copied the required code for you (plus an extra that you’ll love):

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:

1
<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:

1
 <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 de-selects the box without entering a search term.

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

1
<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!

Congratulations!

No comments | Trackback