freefind login search menu
Changing the Font Using Style Sheets

You can change the font used in the search results page by using style sheets. Special CSS classes have been set up to allow you to easily change the look of each element on the page.

Contents Overview Base CSS Classes Extended CSS Classes Use this feature to change the search results font so that it exactly matches your site. You can also use these classes and your style sheets to do other creative customization.

This tutorial is not a web/html primer and assumes that you already are familiar with creating web pages and with cascading style sheets (CSS). If you are not familiar with these concepts please read a basic web/html primer.


In order to change the font using style sheets you will need to customize your results using a template file (see Using Templates for the Best Look). Use of a template file allows you to set the styles used on the search result page. The base CSS classes below are always available in the search results. The extended CSS classes are optionally available.

This how-to assumes that you have already set up a basic template, and now want to change the font of the search results.

Base CSS Classes

To set the fonts, add a style sheet to your template page. Here is an example which sets the overall font used for result items to verdana and makes the line at the top of the search results red:

	.search-results {font-size:10pt; color:Black; font-family:verdana,sans-serif;}
	.search-line {background:Red;}

The table below lists all of the standard CSS classes available. Additional optional classes are detailed in the section after this one.

.search-resultsAll search results text
.search-headline"Search results from this site" headline (and sponsored search, if present)
.search-nav"Next" and "prev" buttons
.search-formThe search panel form
.search-countThe item count
.search-no-resultsMessage: "No pages were found that match your query."
.search-page-linksOther links (site map, home, etc...)
.search-lineOne pixel wide lines
.search-header-tableTable at the top containing search count message and the "search tips" (etc) links
.search-footer-tableTable at the bottom containing the "search tips" (etc) links
.search-nav-form-tableTable containing the nav controls and the searchbox
.search-nav-cellTable cell containing the nav controls
.search-form-cellTable cell containing the search panel form
Extended CSS Classes

The search engine can optionally create pages with extended CSS classes. This allows greater control over the formatting of each result item. To enable this feature you will need to add this HTML tag to your search panel:

	<input type=hidden name=css value="">

This tag instructs the search engine to include the extended CSS classes listed below in the search result pages:

.search-item-numberThe item number portion of each search result item
.search-item-linksThe link portion of each search result item
.search-item-descriptionThe description portion of each search result item
.search-item-urlThe URL portion of each search result item
FreeFind and are trademarks of
Copyright 1998 - 2024