Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue



2007081005 Email to Ronx

Formatting the FrontPage search component

Adding style to the FrontPage search form

Create a table to hold the form and its components.

  Search this site: Set up the label for the form.

Add something to create space if required (extra row, perhaps?)

This space can be used for instructions, decoration, or removed altogether.  

Insert the Search webbot and customise it using the Search property sheets.

The results shown here are an example taken from a working version of the FrontPage search.

The search results are presented in a table.

The table is set to 50% of the available width. The table rows are hard-coded:

<tr style="vertical-align=top;">
<td><a href="/fp/articles/fp-folders.aspx">fp-folders.aspx</a></td>

Notice that the code is invalid -
This same code is used in every row in the results table, as well as the table Caption.

However, the cells can be styled using an embedded or external style sheet - see third column, opposite.

Number of documents found: 5. Click on a document to view it, or submit another search.

Search Results
Document Title
Folders in a Website
FrontPage Search Form Customisation

Change the button text, and replace the words "Search for" in the label with a single space character - that removes the Front Page label.

The buttons are styled using CSS:

#srchfrm input {
border:1px ridge red;
font:700 large Courier;

Unfortunately, the reset button cannot be removed, but it can be relabelled if desired.

The results table is styled using the default settings from the main CSS sheet for this page, plus an embedded sheet:

#srchfrm table, 
#srchfrm table td,
#srchfrm table caption {
border: 1px solid black;

Note that the FrontPage search does not function in this web site - the form above is only for style demonstration purposes.