How do I customize the look of my search page?

Top  Previous  Next

You can completely alter the appearance of the search page, from changing the fonts and layout to including headers, footers or site navigation menus.

The following is a screenshot of how your search page will look by default after indexing and uploading (before any customisations have been made).

screenshot_results2

First, you will need to have indexed your site successfully. If so, a default search template file should have been created in the output directory (alongside the index files). This is a normal HTML file that can be edited like any other ordinary web page with your favourite web page editor.

lightbulb

Note: the search template file is named “search_template.html” for the PHP, ASP, and CGI versions. For the Javascript version, it is named “search.html”.

You can also open this file from the Indexer, by clicking on the “Templates” menu, and selecting “Customize search page appearance”.

screenshot_customize

This will open up the HTML search template in your default HTML editor. Alternatively you can select a different editor to modify the template with. Note that you should not use MS Word to edit the template file due to known problems with Word’s support for HTML editing* (see “Changing your default editor for templates”).

You can modify this page as you see fit, however, you must retain the following "tag" in place of where you want the search function to be displayed:

<!--ZOOMSEARCH-->        

 

This is different for the JavaScript version, which uses the following line instead:

<script language="JavaScript">ZoomSearch();</script>
 

If you need to go back to the default search template, you can delete or rename your search template file, and re-index your site. A new “default template” will be created in the output directory at the end of indexing, when it finds that the search template is missing.

To change the fonts, colours, and appearance of your search results (everything after the search form), edit the CSS styles defined at the top of the template HTML file. These styles are listed in "CSS class listing".

If you are not familiar with CSS (Cascading Style Sheets), you can look up more information on attributes and definitions you can use to alter everything from margins, font sizes, background images, and more. There are many tutorials and websites online (search for “CSS tutorial” on Google).
 
Just by changing this search template file, the appearance of your search page can be completely changed. The following screenshot is an example of a customized search page. See our website at http://www.wrensoft.com/zoom/ for more examples of search pages in the “Example sites” section.

Advanced template options

For more advanced users, who may wish to modify the layout of search results and/or the search form outside of what is possible with CSS, they should refer to the "Advanced template options" section.

See also:

Customizing the search form
Customizing the search results
CSS class listing